ansaurus

Question

Google Maps API, all markers opening the same infowindow.

Answer 1

A:

I had this once, too. It is a scoping issue. I had to change my structure a little bit but maybe in your case changing the callback could already help:

GEvent.addListener(marker, "click", function() {
 marker.openInfoWindowHtml(pins[i].getElementsByTagName("message")[0].childNodes[0].nodeValue;);
});

Daff 2009-07-03 08:52:08

Answer 2

+3 A:

Daff is right about the scope. One alternative, however, is to use bindInfoWindowHtml() instead of a listener with openInfoWindowHtml(). Just replace the listener with this code:

marker.bindInfoWindowHtml(mess);

UPDATE: As a sidenote - because of closure, any variable created in a for loop will be remembered. A direct solution to the problem is to make a separate function to create the Listener.

Replace the listener with

createMarker(marker,mess);

and add the function:

function createMarker(marker, mess) {
    GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(mess);
    });
}

Chris B 2009-07-03 17:06:05

Thank you, thank you, thank you. This is exactly what I needed but couldn't find.

John 2009-07-03 18:54:03

+1 Great answer ...

Cannonade 2009-07-04 04:29:16

Answer 3

A:

I have the same problem and I couldn't solve it with Daff's or Chris B's suggestions. The thing is that I am writing my code with the Google Maps API V3 not V2. Does anyone have any idea what would be wrong what I have. Below I am posting my script and any help is appreciated.

All markers appear well on the map but clicking on them doesn't bring me anything. There is also am external .xml file that the script is using in the root folder. I will attach the .xml at the end of this post as well.

--------------------------------------------------------------------------
--------------------------------------------------------------------------


<head>
<script type="text/javascript">

var xmlDoc;
    if (window.XMLHttpRequest)
    {
    xmlDoc=new window.XMLHttpRequest();
    xmlDoc.open("GET","markers.xml",false);
    xmlDoc.send("");
    xmlDoc=xmlDoc.responseXML;
    }
    // IE 5 and IE 6
    else if (ActiveXObject("Microsoft.XMLDOM"))
    {
    xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
    xmlDoc.async=false;
    xmlDoc.load("markers.xml");
    }


  x=xmlDoc.getElementsByTagName("marker");

function initialize() {
var myLatlng = new google.maps.LatLng(21.1616, -86.8341);
var myOptions = {
  zoom: 14,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
  }
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);



for (var i = 0; i<x.length; i++) {
  var markerLatLng = new google.maps.LatLng((x[i].childNodes[3].childNodes[0].nodeValue), (x[i].childNodes[4].childNodes[0].nodeValue));
  var marker = new google.maps.Marker({
      position: markerLatLng,
      title: (x[i].childNodes[1].childNodes[0].nodeValue),
      map: map
  });
  attachMessage(marker, i);
}


}

// click markers

function attachMessage(marker, number) {
  var infowindow = new google.maps.InfoWindow(
      { content: number + "whatever content",
        zIndex: number
      });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
}

</script>
</head>

<body onLoad="initialize()">
<div id="map_canvas" style="width:1500; height:1000"></div>
</body>
</html>

------------------------------------------------------------------------

markers.xml:
-----------------------


<markers>

<marker>
<id>1</id>
<name>Mercado 28</name>
<price>20000000</price>
<lat>21.161659</lat>
<lng>-86.834160</lng>
<type>shopping</type>
</marker>

<marker>
<id>2</id>
<name>Costco</name>
<price>58000000</price>
<lat>21.148310</lat>
<lng>-86.835487</lng>
<type>shopping</type>
</marker>

</markers>

------------------------------

haluk 2009-10-27 03:11:15

ansaurus

tags:

views:

answers:

Google Maps API, all markers opening the same infowindow.

------------------------------------------------------------------------

related questions