Marker flickers on hover if it has a shape

[koichirose]

Hi, I can't seem to use a sprite image AND a shape to use when I hover
on a marker.
If I remove the shape everything works. A bug or my fault?

Here's some code:

var shadow = new google.maps.MarkerImage('css/images/map/
markerShadow.png',
new google.maps.Size(37, 34),
new google.maps.Point(0,0),
new google.maps.Point(5, 34));

function addMarker(map, marker_obj){
marker_obj.latlng = new google.maps.LatLng(marker_obj.lat,
marker_obj.lon);

var image = new google.maps.MarkerImage('css/images/map/
markerImage.png',
new google.maps.Size(32, 47),
new google.maps.Point(0,0));

var hover_image = new google.maps.MarkerImage('css/images/map/
markerImage.png',
new google.maps.Size(32,47),
new google.maps.Point(0,49)); //here I set it to go down to the
hovered image

var marker = new google.maps.Marker({
position: marker_obj.latlng,
icon: image,
shadow: shadow,
shape: {coord: [1,18,3,35,16,40,30,35,32,18,16,1,1,18],type:
'poly'},
map: map
});
markers.push(marker);

google.maps.event.addListener(marker, "mouseover", function() {
this.setIcon(hover_image);
this.setZIndex(999);
});
google.maps.event.addListener(marker, "mouseout", function() {
this.setIcon(image);
this.setZIndex(undefined);
});
}

Thanks

[Esa]

Please provide a link to that page.

[koichirose]

I'm developing locally so the page is not online yet. Putting my page online is a long process, since it links different js files and connects to a database.

So I borrowed this page just to prove this: http://www.wolfpil.de/v3/toggle-cats.html (I notified the developer about this)

Here's my version, with the shape: http://r21447.ovh.net/~koichirose/markertest/markers.html
It only works on the red marker. I haven't investigated about this.
I have the same behaviour on my map.

If I remove the shape then everything works (even other markers) but, of course, the shape is not correct.

Thanks.

[Rossko]

> Here's my version, with the shape:http://r21447.ovh.net/~koichirose/markertest/markers.html
> It only works on the red marker. I haven't investigated about this.

In FF2 it shows a problem nicely ; mousing over a red marker causes it
to flash red-white-red-white. Mouseover triggers an image change ; I
suspect that causes a mouseout event on the original image and enters
a loop, because as soon as the image is changed a mouseover event
occurs again.

One way to prevent that would be not have a mouseout event listener on
the original marker at all. A mouseover event could be used to
position a temporary 'highlighted' marker over the top of the original
marker (that would still cause a mouseout event but no action would be
triggered). A mouseout listener on the highlighting temporary marker
is used to remove the temp marker from view (park it at the north pole
or somesuch).

I believe the orange markers are inert in FF2 because the API is
interpreting the 'shape' coords with reference to the whole sprite
sheet, not just the selected part. Couldn't say if that is intended
behaviour or not?
In IE6 there is clearly something wrong, mousing over an orange marker
just makes it vanish altogether, but IE6 is unsupported after all.

As it doesn't have much to do with your code, all this may have
nothing to do with your problem.

[koichirose]

It shows the problem in Firefox 3.6.12 and Chrome 7, too.
Opera 10.6 is mysteriously fine. I'm on Linux so can't test IE or Safari right now. Don't care about IE6 at all actually.

Yes, the cause is exactly what you described, it triggers mouseover and mouseout in a loop.

The thing is: it works without the shape, so I was wondering if it's a shape-related bug or if I'm doing something wrong

Thanks

[Rossko]

> The thing is: it works without the shape, so I was wondering if it's a
> shape-related bug or if I'm doing something wrong

This issue is relevant
http://code.google.com/p/gmaps-api-issues/issues/detail?id=2629

[koichirose]

Starred and commented.
Thanks.