谷歌地圖Api標記不能在多個位置工作

Question

我有一個谷歌地圖API，我把我的地圖上的一些多個位置，但不幸的是我的位置標記沒有出現在地圖上，我不知道是否有問題我的陣列或者我宣佈，我需要的是反對的是把一些多個標誌設置在兩個位置，這裏是示例代碼

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 

}); 

the positiongoogle.maps.LatLng object有兩個參數，你只給它一個。應該是：

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>