無法讓Google API地圖出現在Javascript中

我正嘗試創建一個Google地圖，其中有多個地圖標記。然後地圖應該以這些標記結束的位置爲中心。我爲測試目的硬編碼了一些座標。我已經爲我的map-canvas div設置了高度和寬度。我無法讓地圖出現在網頁上。我到處看過，看過很多例子，而且我的例子看起來很像。是的，我在我的實際代碼中包含了我的API密鑰。無法讓Google API地圖出現在Javascript中

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Check In Draft</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <link type="text/css" href="styles.css" rel=stylesheet /> 
    <h1>Where am I?</h1> 
    <script type="text/javascript" 
     src="https://maps.googleapis.com/maps/api/js?key=xxxxx&sensor=false"> 
    </script> 
    <script type="text/javascript"> 
     function initialize() { 
      var mapMarker, i; 
      var locations = [ 
       [ 'Location 1', 42.5822, -87.8456, 3 ], 
       [ 'Location 2', 42.5812, -87.8446, 2 ], 
       [ 'Location 3', 42.5832, -87.8466, 1 ] 
      ]; 
      var mapOptions = { 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
      }; 
      var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
      var infowindow = new.google.maps.InfoWindow(); 
      var bounds = new google.maps.LatLngBounds(); 

      for(i = 0; i < locations.length; i++) {    
       //Edit map marker 
       mapMarker = new google.maps.Marker({ 
        position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
        map: map, 
        animation: google.maps.Animation.DROP 
       }); 

       bounds.extend(mapMarker.position); 

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

      //now fit the map to the newly inclusive bounds 
      map.fitBounds(bounds); 

      //(optional) restore the zoom level after the map is done scaling 
      var listener = google.maps.event.addListener(map, "idle", function() { 
       map.setZoom(10); 
       google.maps.event.removeListener(listener); 
      }); 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    <div id="login-links"> 
     Login | Sign Up 
    </div> 
    </head> 
    <body> 
    <div id="map-canvas"/> 

    </body> 
</html>

這是我的styles.css頁面。

html 
{ 
    height: 100%; 
} 

body 
{ 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    background-color: #b0c4de; 
} 

h1 
{ 
    text-align: center; 
} 

#map-canvas 
{ 
    height: 75%; 
    width: 75%; 
    margin-left: auto; 
    margin-right: auto 
} 

#login-links 
{ 
    text-align: right; 
}

在此先感謝您的幫助！

來源

2013-11-14 nblakey

更新：問題似乎在Home.html的「var listener」部分內。我刪除了該變量，並且一切似乎都正常。當我粘貼它時，它似乎沒有改變任何東西。所以我最終只是將它刪除，並且一切似乎都工作正常。 – nblakey

這是一個問題：

var infowindow = new.google.maps.InfoWindow();

應該

var infowindow = new google.maps.InfoWindow();

的另一個問題是：

google.maps.event.addListener(marker, 'click', (function(mapMarker, i) {

應該是：

google.maps.event.addListener(mapMarker, 'click', (function(mapMarker, i) {

來源

2013-11-14 22:28:02 geocodezip

感謝您的改進！不幸的是，這並沒有解決我的問題。當我在瀏覽器中啓動時，它仍然不會顯示地圖。 :( – nblakey

更新：問題似乎是在Home.html的「var listener」部分。我刪除了該變量，並且一切似乎都正常工作。當我粘貼回來時，它似乎沒有改變任何東西。所以我最終只是將它刪除，並且一切似乎都工作正常。 – nblakey

無法讓Google API地圖出現在Javascript中

回答

相關問題