Marker Mouseover events not firing or not firing at times

1,467 views
Skip to first unread message

CSharp

unread,
Jul 7, 2010, 4:21:00 PM7/7/10
to Google Maps JavaScript API v3
Seems like there's an issue with the Google Map API with the mouseover
event for the Marker object not firing for all other browsers except
for IE. Even in IE, it seems that the marker's event firing on
mouseover stop and the tooltip no longer shows up. The tooltip
actually doesn't even show for the other browsers.

Can someone verify that the Marker's Title property actually shows up
for other browsers other than IE and that the mouseover event actually
work?

dfd

unread,
Jul 7, 2010, 4:30:18 PM7/7/10
to Google Maps JavaScript API v3
Yes and yes.

frank

CSharp

unread,
Jul 7, 2010, 4:57:51 PM7/7/10
to Google Maps JavaScript API v3
Polyline mouseover event seems to work great in all the browsers.

So here is the code how I created the Markers and how the mouseover
events are created (just copy the following code to a good text editor
to get the tab formatting correct):

CreateStopMarkerMouseEvent : function(stopMarker, currentRoutePattern)
{ var currentPolyline = currentRoutePattern.Polyline;
var originalPolylineColor = currentPolyline.strokeColor;
var originalPolylineOpacity = currentPolyline.strokeOpacity;
var hilitedLineColor = this.m_highlitePatternColor;
var originalZindex = currentPolyline.zIndex;

google.maps.event.addListener(stopMarker,
"mouseover",
function()
{ currentPolyline.setOptions({strokeColor: hilitedLineColor,
strokeOpacity: .8, zIndex: 999});
}
);
google.maps.event.addListener(stopMarker,
"mouseout",
function()
{ currentPolyline.setOptions({strokeColor:
originalPolylineColor, strokeOpacity: originalPolylineOpacity, zIndex:
originalZindex});
}
);
},


CreateMarkers : function(markerList, currentRoutePattern)
{ var markerImage = new google.maps.MarkerImage("../Images/
bus.png",
new google.maps.Size(32, 37), //This marker is 32 pixels
wide by 37 pixels tall.
new google.maps.Point(0,0), // The origin for this
markerImage is 0,0.
new google.maps.Point(12, 27), // The anchor for this
markerImage is the base at 16,37.
new google.maps.Size(24, 27)); //Scaled size of the
markerImage
var markerShape = {coord: [0, 32, 37,0], type: "poly"};
var markers = [];

for(var i in markerList)
{ var marker = new google.maps.Marker({position: new
google.maps.LatLng(markerList[i].LatLong.Latitude,
markerList[i].LatLong.Longitude),
//map: this.m_map,
icon: markerImage,
shape: markerShape,
title: markerList[i].Title});
markers.push(marker);

//Create the event handling for mouse-over the marker
this.CreateStopMarkerMouseEvent(marker, currentRoutePattern);
}

currentRoutePattern.Markers = markers; //push the markers into the
routePatter item
return currentRoutePattern;
},
> > work?- Hide quoted text -
>
> - Show quoted text -

Chad Killingsworth

unread,
Jul 7, 2010, 7:42:38 PM7/7/10
to Google Maps JavaScript API v3
Rather than posting your code here, please link to your actual site
with the map. Then we can look at it easily and either see the error
or verify the bug.

Chad Killingsworth

CSharp

unread,
Jul 8, 2010, 11:33:26 AM7/8/10
to Google Maps JavaScript API v3
I can't. I'm currently on a project where the product has not been
released and it's behind the firewall. : (



On Jul 7, 5:42 pm, Chad Killingsworth
> > > - Show quoted text -- Hide quoted text -

geoco...@gmail.com

unread,
Jul 8, 2010, 11:40:18 AM7/8/10
to Google Maps JavaScript API v3
On Jul 8, 8:33 am, CSharp <aliquis.igno...@gmail.com> wrote:
> I can't.  I'm currently on a project where the product has not been
> released and it's behind the firewall.  : (

Make a version that doesn't contain any proprietary information but
shows the issue, get some free hosting, put it there and post that
link here.

This post (from the v2 group, but applicable here) describes the
reasons for requesting a link and addresses most excuses for not
giving one:
http://groups.google.com/group/google-maps-api/web/why-including-a-link-is-critical

-- Larry

Rossko

unread,
Jul 8, 2010, 11:40:58 AM7/8/10
to Google Maps JavaScript API v3
> I can't.  I'm currently on a project where the product has not been
> released and it's behind the firewall.  : (

You can post up a demonstrator, if it matters enough to you.
All the excuses and workarounds are covered here
http://groups.google.com/group/google-maps-api/web/why-including-a-link-is-critical
Sometimes building a stripped down demo will actually identify the
problem for you.

CSharp

unread,
Jul 9, 2010, 11:14:04 AM7/9/10
to Google Maps JavaScript API v3
OK, I finally got authorization from the company to display a sample
code which shows a bus route with a set of bus markers on the map. In
IE, the markers, on mouseover, will show the tooltip (Title property
of the marker). In other browsers, the markers will show, but on
hover over, the mouse pointer doesn't change and there is no tooltip.

Here's the link:

http://www.mentoreng.com/testing/public/map.html

I will try to get a more complex link here where it'll show a similar
map with mouseover events that highlights a route with a different
color and upon hover over the bus markers, it'll also highlight the
route.




On Jul 7, 5:42 pm, Chad Killingsworth
<chadkillingswo...@missouristate.edu> wrote:
> > > - Show quoted text -- Hide quoted text -

Rossko

unread,
Jul 9, 2010, 11:39:15 AM7/9/10
to Google Maps JavaScript API v3
> http://www.mentoreng.com/testing/public/map.html

This looks a bit poorly defined
var markerShape = {coord: [0, 32, 37,0], type: 'poly'};
see
http://code.google.com/apis/maps/documentation/javascript/overlays.html#ComplexIcons

CSharp

unread,
Jul 9, 2010, 12:15:08 PM7/9/10
to Google Maps JavaScript API v3
I changed it the markerShape to a "rectangle" and the mouseover seems
to be working. But now the tooltip (marker's Title) does not show
up. Any clues?


Thanks
> seehttp://code.google.com/apis/maps/documentation/javascript/overlays.ht...

CSharp

unread,
Jul 9, 2010, 12:21:35 PM7/9/10
to Google Maps JavaScript API v3
Sorry, it seems to be working for both the mouseover and the tooltip
display on the marker. Now, I have to look through why the tooltip
is not showing up for the following link:

http://www.mentoreng.com/testing/public/map2.html

Thanks for your help on this.
> > seehttp://code.google.com/apis/maps/documentation/javascript/overlays.ht...- Hide quoted text -

CSharp

unread,
Jul 9, 2010, 12:28:45 PM7/9/10
to Google Maps JavaScript API v3
Thanks to everyone that helped me on this issue, especially Rossko. I
think I got everything resolved for this on my end. The tooltips
didn't show because no data was returned for it or it's grabbing the
wrong JSON property.


Thanks!
> > > seehttp://code.google.com/apis/maps/documentation/javascript/overlays.ht...Hide quoted text -
>
> > - Show quoted text -- Hide quoted text -
Reply all
Reply to author
Forward
0 new messages