Google API не загружается на мою страницу

Я пытаюсь настроить google-карту api на своем веб-сайте, поэтому для части службы доставки, которую я предлагаю. Я скопировал код непосредственно из образца на сайте developers.google.com, но по какой-то причине моя карта не загружается на мою страницу! Я прошел через код несколько раз и не могу загрузить его ... ПОМОЩЬ!Google API не загружается на мою страницу

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0; padding: 0 } 

</style> 
<script type="text/javascript" 
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBPiGhEEN1WjNHOtVoOMufbwsj_thBse2w&sensor=true"> 
</script> 


<script type="text/javascript"> 
    function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(-34.397, 150.644), 
     zoom: 8, 
     mapTypeId: google.maps.mapTypeId.ROADMAP, 
    }; 
    var map = new google.maps.Map(document.getElementById("map-canvas"), 
     mapOptions); 

    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head>

HTML-:

<body onload="initialize()"> 

<div class="map-canvas" style= "height: 100%"> 

    </div> 
</body>

источник

2014-02-01 technewb

Опубликовать ошибку pls –

У вас есть ошибки? Вы используете свой собственный ключ API? – Andy

Также попробуйте добавить '' непосредственно перед вашим другим вызовом 'script'. – Andy

Я получаю сообщение об ошибке: яваскрипта Uncaught TypeError: Cannot read property 'ROADMAP' of undefined

Это:

 mapTypeId: google.maps.mapTypeId.ROADMAP,

Должно быть:

 mapTypeId: google.maps.MapTypeId.ROADMAP,

Основная проблема заключается в: Uncaught TypeError: Cannot read property 'offsetWidth' of null потому, что ваша страница не имеет div с id = "map-canvas":

<div class="map-canvas" style= "height: 100%">

Должно быть:

<div id="map-canvas" style= "height: 100%;">

Вы также вызова инициализации дважды, изменения:

<body onload="initialize()">

To:

<body>

Полная страница (работает локально):

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Google Maps JavaScript API v3 Example: Map Simple</title> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0; padding: 0 } 

</style> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 


<script type="text/javascript"> 
    function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(-34.397, 150.644), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map-canvas"), 
     mapOptions); 

    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
</head> 
<body > 

<div id="map-canvas" style= "height: 100%;"> 

    </div> 
</body> 
</html>

источник

2014-02-01 20:32:34 geocodezip

спасибо! казалось, сработало. Еще один вопрос: я хочу, чтобы размер карты использовался с использованием длины px вместо%, но не изменял размер, когда я это делаю. мне нужно изменить тело и стиль html на px? – technewb

Это должен быть другой вопрос (если вы не можете найти ранее существовавший, который обращается к вашей проблеме). Изменение встроенного стиля, применяемого к div-карте canvas, всегда работает для меня. Вы делаете что-то вроде style = "height: 500px, width: 600px;"? – geocodezip

Я вижу три вопроса

вы используете getElementById, но вы даете DIV класса из карты-холст
это * M * apTypeId (капитал M)
вы должны дать вашей карты холст ДИВ фиксированная высота

Кроме того, так как вы используете addDomListener, это ненужно также событие OnLoad на тело тега тоже. Я бы просто использовал addDomListener.

<!DOCTYPE html> 

    <head> 
    <title>Google Maps</title> 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBPiGhEEN1WjNHOtVoOMufbwsj_thBse2w&sensor=true"> 
    </script> 
    <style> 
     #map-canvas{ 
     height: 400px; 
     } 
    </style> 
    </head> 

    <body> 
    <div id="map-canvas"> 

    </div> 
    </body> 

    <script> 
    function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(-34.397, 150.644), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
    }; 

    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 

    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 

</html>

источник

2014-02-01 20:29:24 thescientist

Google API не загружается на мою страницу

ответ

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