I have script for adding multiple markers to an interactive Google Map. I want all the markers to hold different infowindows

Question

I have already created the code below. This codes generates a Google Map with different markers. I don't seem to get the code right so that each marker will on mouseclick display a different infowindow. Is there some way to add code in the for loop, so that all markers are built with different infowindows with different content?

<body onload="initialize()">

  <div id="map_canvas" style="width: 800px; height: 500px;"></div>

  <script type="text/javascript">
    function initialize() {
      var myOptions = {
        zoom: 2,
        center: new google.maps.LatLng(23.241346, 18.281250),
      mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById("map_canvas"),
                                    myOptions);

      setMarkers(map, locations);
    }

     var locations = [
       ['AU', -37.850565, 144.980289 , 4],
       ['AS', 48.1670845, 16.3465254, 5],
       ['BE', 50.8826906, 4.4570261, 3],
       ['BR', -23.5004937, -46.8482093, 2],
       ['CZ', 50.0878114, 14.4204598, 1],
       ['DM', 55.6710507, 12.4401635, 6],
       ['FI', 60.2101064, 24.8251788, 7],
       ['FR', 48.8744779, 2.1668675, 8],
       ['GE', 51.19423, 6.70568, 9],
       ['GR', 38.0433281, 23.797971, 10]
     ];

     function setMarkers(map, locations) {
       var image = new google.maps.MarkerImage('punaise.png',
         new google.maps.Size(30, 30),
         new google.maps.Point(0,0),
         new google.maps.Point(0, 32));
       var shadow = new google.maps.MarkerImage('schaduw.png',
         new google.maps.Size(30, 30),
         new google.maps.Point(0,0),
         new google.maps.Point(0, 32));

       var shape = {
         coord: [1, 1, 1, 20, 18, 20, 18 , 1],
         type: 'poly'
       };

       for (var i = 0; i < locations.length; i++) {
         var entity = locations[i];
         var myLatLng = new google.maps.LatLng(entity[1], entity[2]);
         var marker = new google.maps.Marker({
           position: myLatLng,
           map: map,
           shadow: shadow,
           icon: image,
           shape: shape,
           title: entity[0],
           zIndex: entity[3],
         });
       }
    }
  </script>

Answer 1

It's relatively straight-forward; in your for loop you want to init the info window, something like:

for (var i = 0; i < locations.length; i++) {
    var entity = locations[i];
    var myLatLng = new google.maps.LatLng(entity[1], entity[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: entity[0],
        zIndex: entity[3],
    });
    infoWindow = new google.maps.InfoWindow({
        content: document.getElementById("overlayContent" + [i]).innerHTML
    });
}

The overlayContent[i] would get the <div> (or other element) with an id of overlayContent1 etc. Then outside of the for loop add a click handler that opens the correct info window:

google.maps.event.addListener(marker, "click", function () {

    if (currentInfoWindow) {
        currentInfoWindow.close();
    }
    infoWindow.open(gmap, marker);
    currentInfoWindow = infoWindow;
});

The currentInfoWindow check ensures only one overlay is open at a time

I have script for adding multiple markers to an interactive Google Map. I want all the markers to hold different infowindows

Question

1 answers

solution1
0 2012-03-05 08:58:19

I have script for adding multiple markers to an interactive Google Map. I want all the markers to hold different infowindows

Question

1 answers

solution1 0 2012-03-05 08:58:19

solution1
0 2012-03-05 08:58:19