Невозможно отобразить карту Google API в Javascript

Я пытаюсь создать карту Google, в которой у меня есть несколько маркеров карты. Затем карту следует центрировать в зависимости от того, где эти маркеры заканчиваются. Для целей тестирования я жестко закодировал некоторые координаты. Я уже установил высоту и ширину для моего div-canvas. Я не могу заставить карту появиться на странице. Я везде искал и видел много примеров, и мои очень похожи на примеры. И да, я действительно добавляю свой ключ 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

ОБНОВЛЕНИЕ: проблема, по-видимому, находилась в части «var listener» Home.html. Я удалил эту переменную, и все, казалось, сработало нормально. Когда я вложил его обратно, это, казалось, ничего не изменило. Поэтому я просто удалил его, и все работает нормально. – 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

UPDATE: проблема, казалось, была в части «var listener» из Home.html. Я удалил эту переменную, и все, казалось, сработало нормально. Когда я вставлял ее обратно, она ничего не меняла. Поэтому я просто удалил его, и все работает нормально. – nblakey

Невозможно отобразить карту Google API в Javascript

ответ

Смежные вопросы