Question

Im making an map with different markers which should have different info windows. But when i tried to put an infowindow on multiple markers the position of the infowindow stayed at the first clicked marker. What am i doing wrong?

<script type="text/javascript">
      function initialize() {
        var latlng = new google.maps.LatLng(53.033117,5.639752);

        var latingSiton = new google.maps.LatLng(53.0356197730161,5.62613738302669);
        var SitonImg = 'images/siton.png';
        var latingZee = new google.maps.LatLng(53.0360534900284,5.62488617774811);
        var ZeeImg = 'images/zee.png';
        var latingHylkema = new google.maps.LatLng(53.0373853769166,5.62924255777811);
        var HylkemaImg = 'images/hylkema.png';
        var latingDijkstra = new google.maps.LatLng(53.0360125088934,5.62735529113307);
        var DijkstraImg = 'images/dijkstra.png';

        var myOptions = {
          zoom: 16,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

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

        var contentString = 'test';

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

          var marker = new google.maps.Marker({
              position: latingSiton, 
              map: map, 
              icon: SitonImg,
            });

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

          var marker = new google.maps.Marker({
              position: latingZee, 
              map: map, 
              icon: ZeeImg,
          });

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

          var marker = new google.maps.Marker({
              position: latingHylkema, 
              map: map, 
              icon: HylkemaImg,
          });

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

          var marker = new google.maps.Marker({
              position: latingDijkstra, 
              map: map, 
              icon: DijkstraImg,
          });

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

Thanks in forward!

Answer 1

Alternatively, instead of Pratik’s suggestion, try this:

var marker = new google.maps.Marker({
     position: latingSiton, 
     map: map, 
     icon: SitonImg
});

// repeat this line after each new Marker is created:
bindInfoWindow(marker, map, infowindow);

Then create a new function:

function bindInfoWindow(marker, map, infowindow) {
    marker.addListener('click', function() {
        infowindow.open(map, marker);
    });
}