2015-06-04 5 views
-1

У меня возникла проблема с отображением карты google на моем сайте, но не все, но в контейнере есть что-то еще, кроме белого фона, действительно я вижу термины внизу справа и кнопку спутника в правом верхнем углу.API Google Map API, похоже, не загружается

Существует код, я надеюсь, что вы будете в состоянии определить, что это неправильно:

function initialize() { 
     var myLatLng = new google.maps.LatLng(49.724305, 4.716567); 
     var mapOptions = { 
      center: myLatLng, 
      zoom: 17, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 

     var map = new google.maps.Map(mapCanvas, mapOptions); 

     var image = { 
      url: '/media/A.png', 
      size: new google.maps.Size(56, 67), 
      origin: new google.maps.Point(0, 0), 
      anchor: new google.maps.Point(32, 67), 
      scaledSize: new google.maps.Size(56, 67) 
     }; 

     var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      icon: image 
     }); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize()); 
+1

'google.maps.event.addDomListener (окно 'нагрузки', инициализация);' (удаление скобок после того, как инициализация). Когда это не исправляет проблему, нам нужно увидеть больше кода. –

+0

[Ваш код, как опубликовано, работает для меня, когда я присваиваю значение «mapcanvas».] (Http://jsfiddle.net/47h3mguz/) Как вы это определяете? Как выглядит ваш HTML/CSS (только то, что относится к карте). – geocodezip

ответ

0

В вас код mapCanvas, кажется Unassigned. После добавления чего-то вроде var mapCanvas = document.getElementById('map'); карта загружается по назначению. JSFiddle

0

Получил его работу.

Я добавил ссылку googleapis "https://maps.googleapis.com/maps/api/js?sensor=false">.

И я изменил var map = new google.maps.Map(mapCanvas, mapOptions); к var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

И я извлекал пустые круглые скобки в слушателе карты событий.

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     #map-canvas { 
      width: 600px; 
      height: 600px; 
     } 
    </style> 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script> 
     function initialize() { 
    var myLatLng = new google.maps.LatLng(49.724305, 4.716567); 
    var mapOptions = { 
     center: myLatLng, 
     zoom: 17, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

     var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    var image = { 
     url: '/media/A.png', 
     size: new google.maps.Size(56, 67), 
     origin: new google.maps.Point(0, 0), 
     anchor: new google.maps.Point(32, 67), 
     scaledSize: new google.maps.Size(56, 67) 
    }; 

    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     icon: image 
    }); 
} 

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

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