Google maps – highlight sidebar text on marker mouseover

Sometimes when integrating a Google map on a site it is useful to give feedback to the user when hovering the mouse over a map marker. While not very difficult to achieve, it may not be completely straight forward to beginners, so I just wanted to post my solution here.

The trick is to add a listener when creating the markers, and then use getElementID to select the corresponding item in the document, identified by a uniqe ID.

(Java script)
var marker = new GMarker(point, customIcons[\"standard\"]);
GEvent.addListener(marker, \"mouseover\", function() {
marker.setImage(\"../images/marker_h.png\");
var listItem = document.getElementById(\"item-\" + j);
listItem.style.backgroundColor = \"#FFFA5E\";
});
GEvent.addListener(marker, \"mouseout\", function() {
marker.setImage(\"../images/marker.png\");
var listItem = document.getElementById(\"item-\" + j);
listItem.style.backgroundColor = \"#FFFFFF\";
});

The HTML could for example look like this:



Some content

Maybe not the most elegant solution, but it does the job.

Finally, some useful resources for Google map developers:
Google Maps API Tutorial by Mike Williams
Simple to use tool to make custom markers

Popularity: 7% [?]