Google Maps JavaScript Popups api Marker gezeigt nur in der Mitte

Question

Ich verwende Google Maps JavaScript API mehrere Marker mit Pop-ups (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); 
     }); 
    } 

} 

Die markes erscheinen richtig um die Karte zu schaffen, aber die Pop-ups werden nur angezeigt, bei die Mitte der Karte (statt in der Nähe der zugehörigen Markerposition zu erscheinen)

Was muss ich ändern, damit sie funktionieren?

Answer 1

Um das Problem zu lösen (das InfoWindow mit der richtigen Markierung verbinden), ist eine Option, Funktion Schließung zu verwenden, wie in der Antwort auf diese ähnliche Frage gezeigt: Google Maps JS API v3 - Simple Multiple Marker Example.

In Ihrem Code:

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

proof of concept fiddle

Code-Schnipsel:

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>