Googleは中央のみ

Question

私はポップアップ（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); 
     }); 
    } 

} 

がmarkesは、マップの周りに適切に表示されますが、ポップアップのみで示されて複数のマーカーを作成するGoogleマップのJavaScript APIを使用していますで示したJavaScript APIのマーカーのポップアップをマップしますマップの中心（所属マーカー位置の近くに表示されるのではなく）

変更するには何が必要ですか？

Answer 1

この問題を解決するには（InfoWindowに正しいマーカーを関連付ける）、1つのオプションは、この同様の質問に対する答えに示されているように関数クロージャを使用することです。Google Maps JS API v3 - Simple Multiple Marker Example。あなたのコードで

：

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

proof of concept fiddle

コードスニペット：

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>