0

I am working on a project using google maps api v3 and am trying to make it so when a marker is clicked on a infowindow appears. I have accomplished this but now what i want is different content to be displayed when different markers are clicked on which i can't seem to figure out. any help is appreciated. thanks!

    function initialize() {

var locations = [
      ['Phi Delta Theta', 39.511747,-84.735117],
      ['Pi Kappa Alpha', 39.511776, -84.735684],
      ['Sigma Nu', 39.513921, -84.735159],
      ['Sigma Alpha Epsilon', 39.514332, -84.734956],
      ['Beta Theta Pi', 39.5107519, -84.738549]
    ];

var myLatlng = new google.maps.LatLng(39.511747,-84.735117);
var mapOptions = {
  zoom: 15,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

var contentString = '<div id="content">'+

    '</div>';

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

var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
      }


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



      }
Kara
  • 6,115
  • 16
  • 50
  • 57
user2096561
  • 126
  • 2
  • 4

1 Answers1

0

Here is the answer that does what you want, however it allows to open multiple infoWindow at once. The point of it is to define multiple instances of windowinfo. Instead of:

var infowindow = new google.maps.InfoWindow({
    content: contentString
});
....
for (i = 0; i < locations.length; i++) {

}

do smth like this:

for (i = 0; i < locations.length; i++) {
    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });
}

That way you will define multiple markers, each with different content.

Community
  • 1
  • 1
Grzegorz
  • 3,538
  • 4
  • 29
  • 47