Skip to content

Use of Sprite image icon and size/origin values #91

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
etichenor opened this issue Mar 6, 2015 · 1 comment
Closed

Use of Sprite image icon and size/origin values #91

etichenor opened this issue Mar 6, 2015 · 1 comment

Comments

@etichenor
Copy link

IGNORE THIS! SEE UPDATE IN MY SECOND COMMENT
Hello again, I want to use a sprite image containing 20+ marker images. Google maps supports the concept with a combination of url, size and origin. However, the Locations Doc on your site doesn't mention size and origin options. So, are these ignored or passed along to google maps API if I use them. It appears they are ignored, and it seems they are. The entire sprite image is displayed for each marker as though size and origin are not passed along. Your thoughts?
UPDATE: in the following code I see that the origin parameter is always passed as (0,0) so that tells me that origin is not currently enabled/supported in maplace.
Next, in the following code, how are image_w and image_h derived? You can see that I'm experimenting with passing size and origin directly to the MarkerImage constructor. I create the size and origin prior and include that in my Locations array items.

            point.icon = new google.maps.MarkerImage(
                point.image,
                //new google.maps.Size(point.image_w || 32, point.image_h || 32), <original code>
                point.size,
                //new google.maps.Point(0, 0), <original code>
                point.origin,
                new google.maps.Point((point.image_w || 32) / 2, (point.image_h || 32)  / 2)
            );
@etichenor
Copy link
Author

UPDATE:
I found that I had to ensure that the size parameters that are sent to google.maps.size class MUST absolutely be numeric! I also decided to stay with the icon object vs. the deprecated MarkerImage class. This fixed all of my sprite issues.
This original code:
if (point.image) {
point.icon = new google.maps.MarkerImage(
point.image,
new google.maps.Size(point.image_w || 32, point.image_h || 32),
new google.maps.Point(0, 0),
new google.maps.Point((point.image_w || 32) / 2, (point.image_h || 32) / 2)
);
}

was changed to: (NOTE: parseInt)

        if (point.image) {
            point.icon = {
                url: point.image,
                size: new google.maps.Size(parseInt(point.image_w), parseInt(point.image_h)),
                origin: new google.maps.Point(parseInt(point.origin_x), parseInt(point.origin_y)),
                anchor: new google.maps.Point(parseInt(point.image_w) / 2, parseInt(point.image_h) / 2)
            };
 }

ORIGINAL COMMENT:
I found a workaround that required an additional change to correct yet another issue (one that seemed to be a google maps problem). When creating multiple markers that refer to the same sprite sheet, the markers displayed as though no origin was specified... strange things happened.
Issue #1: As for the original issue, adding ORIGIN property to the MarkerImage fixed that, but raised another issue.
Issue #2: Multiple markers refer to the same sprite sheet, caused sprite based markers to display improperly.
Issue #3: I reverted to using the ICON object as MarkerImage has been deprecated
So the final code that seems to work, in Maplace.js is as follows:
if (point.image) {
//Create a static MarkerImage the first time only
if (!this.reusableMarkerImage) {
this.reusableMarkerImage = {
url: point.image,
size: new google.maps.Size(32, 37),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(16, 18.5)
};
}
//Now update the origin per the backgroundPosition as determined in advance
//based on a read on the CSS properties for this image class
this.reusableMarkerImage.origin = new google.maps.Point(point.origin_x, point.origin_y);
point.icon = this.reusableMarkerImage;
...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant