Communication error between multiple markers and background div

Question

I am trying to link some markers on a Google map and several divs outside the map. If I hover over the marker on the map, I want to change the background color in a separate Div. If I have only one marker, it works fine, but if I have five, as in the example, only the last one from the list will be displayed.

Why? What's wrong? Can anybody help me?

function initialize() { var locations = [ ['E021066', 39.521753693611515, 2.480292320251465, 4], ['E033012', 39.52724876810637, 2.48166561126709, 5], ['E023016', 39.50193802307746, 2.4660873413085938, 3], ['E019512', 39.522349566080855, 2.4886178970336914, 2], ['E032023', 39.510927787044295, 2.4994325637817383, 1] ]; var latlng = new google.maps.LatLng(39.5075442, 2.476614799999993); var myOptions = { zoom: 12, center: latlng, mapTypeId: google.maps.MapTypeId.SATELLITE }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var infowindow = new google.maps.InfoWindow(); var marker, i; var image1 = 'images/marker1.png'; var image2 = 'images/marker2.png'; for (i = 0; i < locations.length; i++) { **var id = locations[i][0];** marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map, icon: image1 }); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { marker.setImage("images/marker.png"); } })(marker, i)); google.maps.event.addListener(marker, 'mouseover', function() { this.setIcon(image2); **id.style.backgroundColor='#ccc';** }); google.maps.event.addListener(marker, 'mouseout', function() { this.setIcon(image1); **id.style.backgroundColor='#fff';** }); } } 

Answer 1

This is a common problem. A marker is a global variable, when the loop ends, it points to the last created one. I would suggest using the close function (createMarker function) to link as a marker. Sort of:

 function createMarker(location) { var id = location[0]; var marker = new google.maps.Marker({ position: new google.maps.LatLng(location[1], location[2]), map: map, icon: image1 }); google.maps.event.addListener(marker, 'click', function() { marker.setImage("images/marker.png"); }); google.maps.event.addListener(marker, 'mouseover', function() { this.setIcon(image2); id.style.backgroundColor='#ccc'; }); google.maps.event.addListener(marker, 'mouseout', function() { this.setIcon(image1); id.style.backgroundColor='#fff'; }); } 

Then your loop will look like this:

 for (i = 0; i < locations.length; i++) { createMarker(locations[i]); } 

I would not expect it to work, although perhaps in IE.

Working example

Answer 2

Thanks, it did a great job, but only after I converted the ID string.

 var locations = [ [E021066, 39.521753693611515, 2.480292320251465, 0] ]; 

Now I have the last problem, I would also like to change the marker image when the user hovers over the div, unfortunately, I do not know how I feel about the marker. Does anyone have any advice?

 <div class="offer_box" id="E021066"><a href="#" onmouseover="createMarker['E021066'].setIcon('marker2.png')" onmouseout="createMarker['E021066'].setIcon('marker1.png')">