You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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;
...
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.
The text was updated successfully, but these errors were encountered: