google maps javascript api markers popups shown only at center

Question

I am using Google maps JavaScript API creating multiple markers with popups (InfoWindow)

function initMap(){

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 2,
        center: {lat: 20, lng: 0}
    });

    //console.log(dbResults);

    for(var i=0; i<dbResults.length; i++){

        var _coords = dbResults[i].location.split(',');
        var coords = {lat: parseFloat(_coords[0]), lng: parseFloat(_coords[1])}
        //console.log(coords);

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

        var infowindow = new google.maps.InfoWindow({
            content: '<div>'+dbResults[i].title+'</div>'
        });

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

}

The markes appear properly around the map, but the popups are shown only at the center of the map (instead of appear near the belonging marker position)

What do I need to change in order to make them work?

The InfoWindow only appears on the last datapoint. Common problem, solved with function closure here: [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) — geocodezip, Dec 24 '16 at 17:42
I tried also to set position for the infoWindows but it didn't work — neoDev, Dec 24 '16 at 17:48

score 1 · Accepted Answer · edited May 23 '17 at 12:01

To solve the issue (associating the InfoWindow with the correct marker), one option is to use function closure as demonstrated in the answer to this similar question: Google Maps JS API v3 - Simple Multiple Marker Example.

In your code:

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

proof of concept fiddle

code snippet:

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: {
      lat: 20,
      lng: 0
    }
  });

  //console.log(dbResults);
  var dbResults = [{
    location: "42,-72",
    title: "Here"
  }, {
    location: "45,-112",
    title: "There"
  }, {
    location: "20,0",
    title: "Somewhere"
  }];
  for (var i = 0; i < dbResults.length; i++) {

    var _coords = dbResults[i].location.split(',');
    var coords = {
        lat: parseFloat(_coords[0]),
        lng: parseFloat(_coords[1])
      }
      //console.log(coords);

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

    var infowindow = new google.maps.InfoWindow({
      content: '<div>' + dbResults[i].title + '</div>'
    });

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

}
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

google maps javascript api markers popups shown only at center

1 Answers1