Google Maps API 3 - Info Window Issue

Question

What do I need to add & where - to make my markers popup the info window, using my var locations txt?

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>

var map;
var brooklyn = new google.maps.LatLng(48.1391265, 11.580186300000037);

var MY_MAPTYPE_ID = 'custom_style';

function initialize() {


  var mapOptions = {
    zoom: 2,
    center: new google.maps.LatLng(48.1391265, 11.580186300000037),
    disableDefaultUI: true,
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    zoomControl: true,
    panControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: [ { stylers: [ { hue: "#098AAD" } ] } ]

  }
  var map = new google.maps.Map(document.getElementById('map-canvas'),
                                mapOptions);

  setMarkers(map, locations);
}

var locations = [
  ['Plano TX', 33.01984, -96.69889, 13],
  ['Hemel Hempstead UK', 51.75324, -0.44863, 12],
  ['Dubai', 25.27114, 55.30748, 11],
  ['San Francisco CA', 37.77493, -122.41942, 10],
  ['Chicago IL', 41.87811, -87.62980, 9],
  ['New York NY', 40.71435, -74.00597, 8],
  ['Troy MI', 42.60559, -83.14993, 7],
  ['Santa Monica CA', 34.01945, -118.49119, 6],
  ['St Peters MO', 38.78747, -90.62989, 5],
  ['Pittsford NY', 43.09062, -77.51500, 4],
  ['Las Vegas NV', 36.11465, -115.17282, 3],
  ['Haidian Beijing', 39.95991, 116.29805, 2],
  ['New Delhi', 28.63531, 77.22496, 1]
];

function setMarkers(map, locations) {

  var image = {
    url: 'images/marker-rmg.png',
    size: new google.maps.Size(32, 32),
    origin: new google.maps.Point(0,0),
    anchor: new google.maps.Point(16, 32)
  };

  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var location = locations[i];
    var myLatLng = new google.maps.LatLng(location[1], location[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image,
        shape: shape,
        title: location[0],
        zIndex: location[3]
    });
  }
}
google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <div id="map-canvas" style="height: 300px;"></div>

duncan · Accepted Answer · 2013-07-31T16:29:45.947

Create a global variable (or within your setMarkers function), infowindow:

 var infowindow =  new google.maps.InfoWindow({
            content: ""
        });

Then within your loop, call a new function, passing various parameters you'll require:

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

    bindInfoWindow(marker, map, infowindow, location[0]);
  }

Then create a new global function which binds the click event to markers and opens the infowindow with the specified content:

 function bindInfoWindow(marker, map, infowindow, strDescription) {
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(strDescription);
            infowindow.open(map, marker);
        });
    }

Update: here's the complete code I'd use

<script>
    var map;
    var brooklyn = new google.maps.LatLng(48.1391265, 11.580186300000037);

    var MY_MAPTYPE_ID = 'custom_style';

    var locations = [
        ['Plano TX', 33.01984, -96.69889, 13],
        ['Hemel Hempstead UK', 51.75324, -0.44863, 12],
        ['Dubai', 25.27114, 55.30748, 11],
        ['San Francisco CA', 37.77493, -122.41942, 10],
        ['Chicago IL', 41.87811, -87.62980, 9],
        ['New York NY', 40.71435, -74.00597, 8],
        ['Troy MI', 42.60559, -83.14993, 7],
        ['Santa Monica CA', 34.01945, -118.49119, 6],
        ['St Peters MO', 38.78747, -90.62989, 5],
        ['Pittsford NY', 43.09062, -77.51500, 4],
        ['Las Vegas NV', 36.11465, -115.17282, 3],
        ['Haidian Beijing', 39.95991, 116.29805, 2],
        ['New Delhi', 28.63531, 77.22496, 1]
    ];

     function bindInfoWindow(marker, map, infowindow, strDescription) {
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(strDescription);
            infowindow.open(map, marker);
        });
    }

    function setMarkers(map, locations) {
        var infowindow =  new google.maps.InfoWindow({
            content: ""
        });
        var image = {
            url: 'images/marker-rmg.png',
            size: new google.maps.Size(32, 32),
            origin: new google.maps.Point(0,0),
            anchor: new google.maps.Point(16, 32)
        };

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

        var i, location, myLatLng, marker;

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

            bindInfoWindow(marker, map, infowindow, location[0]);
        }
    }

    function initialize() {
        var mapOptions = {
            zoom: 2,
            center: new google.maps.LatLng(48.1391265, 11.580186300000037),
            disableDefaultUI: true,
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            },
            zoomControl: true,
            panControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            styles: [ { stylers: [ { hue: "#098AAD" } ] } ]
        };
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        setMarkers(map, locations);
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

Hi Duncan - could you possible add this (above) to my code? I seem to be struggling with it & it's not working (not a strong coder) — user991830, Jul 31 '13 at 16:05
Thanks Duncan... my be broken somewhere, as it's not showing the map at all :( — user991830, Jul 31 '13 at 16:35
ignore that.... me being stupis - works great! thanks very much — user991830, Jul 31 '13 at 16:38

score 0 · Answer 2 · answered Jul 31 '13 at 15:14

You need to bind click event to your markers i.e after the markers are created you need to store them in an array. Then add the below code

var marker = new google.maps.Marker({       
    position: position  
});



var infowindow = new google.maps.InfoWindow({
  content:"Any content or latitude longitude info"
});

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

Here its bit tricky, i.e if there are multiple markers then you need build the marker variable accordingly. In your case may be you can append the for loop counter 'i' to the marker variable such as marker_+i and then fire the click event on those variables inside the same loop.

Google Maps API 3 - Info Window Issue

2 Answers2