구글은 센터

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이지도를 제대로 표시하지만, 팝업 만에 표시됩니다 여러 마커를 만드는 구글지도 자바 스크립트 API를 사용하고 그림과 자바 스크립트 API를 마커 팝업 매핑 지도의 중심 (소속 마커 위치 근처에 표시되는 대신)

변경하려면 무엇을 변경해야합니까?

Answer 1

InfoWindow를 올바른 마커와 연결하여 문제를 해결하려면이 유사한 질문에 대한 답변에서 설명한대로 함수 종료를 사용하는 것이 좋습니다 (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>