Google지도 Api 마커가 여러 위치에서 작동하지 않습니다.

Question

Google지도 API가 있고지도에 여러 위치를 넣었지만 불행히도 내 위치 표시가지도에 표시되지 않지만 문제가 있는지는 알 수 없습니다. 내 배열 또는 I 선언, 내가 필요로하는 모든 인 목적은 두 위치에서 약간의 여러 마커를 배치하는 것입니다 여기에 샘플 코드

var map; 
 

 
function initMap() { 
 
    var manilaMain = { 
 
    info: "<strong>Chipotle on Broadway</strong><br>\ 
 
          5224 N Broadway St<br> Chicago, IL 60640<br>\ 
 
Get Directions</a>", 
 
    lat: 14.5995124, 
 
    lng: 120.9842195 
 

 
    }; 
 

 
    var manilaHospital = { 
 
    info: "<strong>Chipotle on Broadway</strong><br>\ 
 
          5224 N Broadway St<br> Chicago, IL 60640<br>", 
 
    lat: 14.609189, 
 
    lng: 120.966466 
 

 
    }; 
 

 
    var locations = [ 
 
    [manilaMain.lat, manilaMain.lng, manilaMain.info, 0], 
 
    [manilaHospital.lat, manilaHospital.lng, manilaHospital.info, 1], 
 
    ]; 
 

 

 
    var newCent = new google.maps.LatLng(14.5995124, 120.9842195); 
 

 
    map = new google.maps.Map(document.getElementById('hplus-map'), { 
 
    center: newCent, 
 
    zoom: 14, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    draggable: false, 
 
    scrollwheel: false 
 
    }); 
 

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

 

 

 
    var marker, i; 
 

 
    for (i = 0; i < locations.length; i++) { 
 
    marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(locations[i][1]), 
 
     map: map 
 

 
    }); 
 

 

 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
     return function() { 
 
     infowindow.setContent(locations[i][0]); 
 
     infowindow.open(map, marker); 
 
     } 
 
    })(marker, i)); 
 

 
    } 
 

 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="hplus-map"> 
 

 
</div> 
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBO3K_aCpewx5lqVbthR2YOHXvX5pHMLWU&callback=initMap" async defer></script>

Answer 1

당신은 당신의 마커 생성에 오타가에게있어합니다 코드 :

marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1]), 
    map: map 

}); 

positiongoogle.maps.LatLng 개체에는 두 개의 인수가 필요하며 하나만 지정하면됩니다. 해야합니다

position: new google.maps.LatLng(locations[i][0],locations[i][1]), 

코드 :

html, 
 
body, 
 
#hplus-map { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<div id="hplus-map"></div> 
 
<script> 
 
    var map; 
 

 
    function initMap() { 
 
    var manilaMain = { 
 
     info: "<strong>Manila Main</strong><br>5224 N Broadway St<br> Chicago, IL 60640<br>Get Directions</a>", 
 
     lat: 14.5995124, 
 
     lng: 120.9842195 
 
    }; 
 

 
    var manilaHospital = { 
 
     info: "<strong>Manila Hospital</strong><br>5224 N Broadway St<br> Chicago, IL 60640<br>", 
 
     lat: 14.609189, 
 
     lng: 120.966466 
 
    }; 
 

 
    var locations = [ 
 
     [manilaMain.lat, manilaMain.lng, manilaMain.info, 0], 
 
     [manilaHospital.lat, manilaHospital.lng, manilaHospital.info, 1], 
 
    ]; 
 

 
    var newCent = new google.maps.LatLng(14.5995124, 120.9842195); 
 

 
    map = new google.maps.Map(document.getElementById('hplus-map'), { 
 
     center: newCent, 
 
     zoom: 14, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
     draggable: false, 
 
     scrollwheel: false 
 
    }); 
 

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

 
    var marker, i; 
 

 
    for (i = 0; i < locations.length; i++) { 
 
     marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(locations[i][0], locations[i][1]), 
 
     map: map 
 
     }); 
 

 
     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
     return function() { 
 
      infowindow.setContent(locations[i][2]); 
 
      infowindow.open(map, marker); 
 
     } 
 
     })(marker, i)); 
 
    } 
 
    } 
 
</script> 
 
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>