Не удалось загрузить карту google

Я пытаюсь показать местоположение пользователя, полученное с помощью API геолокации, на карте google.but, но карта не загружается. Что я делаю неправильно?Не удалось загрузить карту google

$(document).ready(function(){ 
    trackLocation() 
}) 

//Track the user's location with high accuracy 
function trackLocation(){ 
    if(navigator.geolocation){ 
     navigator.geolocation.getCurrentPosition(
      successFunction, 
      errorFunction, 
      {enableHighAccuracy : true, 
      timeout:1000 * 10 * 100, 
      maximumAge:0 
      } 
     ) 
    } 
} 

function successFunction(position){ 
    plotMap(position) 
} 

function errorFunction(error){ 
    alert(error) 
} 

function plotMap(position){ 
    var location = new google.maps.LatLng(position.coords.latitude, 
      position.coords.longitude) 
    alert('created locaction') 
    var plotOptions = { 
     center: location, 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    alert('created options') 
    var map = new google.maps.Map(document.getElementById('map_canvas'),plotOptions) 
    alert('created map') 
}

и HTML является

<!DOCTYPE HTML> 
<html> 
<head> 
    <script type="text/javascript" src="{{STATIC_URL}}jquery.min.js"></script> 
    <script type="text/javascript" src="{{STATIC_URL}}javascript_posted_above.js"></script> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
</head> 
<body> 
    Hi 
    <div id="map_canvas" style="width:100%; height:100%;"></div> 
</body> 
</html>

источник

2012-01-22 Bunny Rabbit

Какая, если таковая имеется, ваших оповещений? –

все они вызываются. –

Вы видите какие-либо ошибки в консоли? Возможно, вы используете браузер, который не поддерживает карты Google или географическую привязку? –

Посмотрите на это jsFiddle. Единственные различия между этим и вашим - удаление статических ссылок js и добавление CSS. Без этого CSS карта не отображается. Я никогда не испытывал этой проблемы при использовании Maps Api, возможно, я просто добавил этот CSS, не задумываясь.

CSS был взят из документа HelloWorld tutorial.

источник

2012-01-22 11:14:26

Thomas Nadin, Да, действительно, проблема css работает для меня тоже, когда я включаю css, Но я не могу понять, почему это так?Извините, я не n00b :( –

Основываясь на ответе @ Luuk, я должен был предположить, что, когда ширина карты родителя не определена или неопределенная, похоже, проблема, но это всего лишь предположение. –

здесь my fiddle, я изменил несколько вещей:

Прежде всего, я изменил оповещения на console.log, что важно поскольку это неструктурный способ ведения журнала, предупреждение останавливает скрипт excecution и не является надежным.
Я удалил карту сценария тегов Google и динамически добавлять его на страницу в document.ready обработчика, я также добавил функцию обратного вызова «& обратного вызова = trackLocation», то JSON-P загружаемый скрипт от Google будет работать функция с этим именем, когда она выполнена.
Я привязал функцию trackLocation() непосредственно к объекту окна, поэтому он будет найден скриптом, загруженным из Google.
Я изменил высоту вашего map_canvas на 500 пикселей, вместо 100%, похоже, проблема растяжения карты. Мой первый поиск в google дал мне: http://forum.jquery.com/topic/google-map-not-stretching-properly-when-width-set-to-100 вы могли бы сделать больше исследований с этим.

Удачи вам в вашей карте!

источник

2012-01-22 11:13:34

Спасибо luuk. Я буду придерживаться рекомендаций в моей работе с javascript. Кажется, что я не включил css, приведенный в примере. Хотя я не могу понять, почему не включая CSS, он ведет себя в таким образом. –

Вы пытались позвонить googlemap.js перед своим .js в html?

источник

2012-01-22 13:23:18 rebelbass

rebelbass since i я делаю все вещи в файле my.js после загрузки документа, это не должно создавать разницы, я тестировал это на ваше предложение, это не имеет значения. Спасибо за предложение, хотя :) –

Я загрузки API Карт Google, как это:

function mapsjsready() 
{ 
    // mapsjs ready! 
} 
$(document).ready(function() { 
    var mapsjs = document.createElement('script'); 
    mapsjs.type = "text/javascript"; 
    mapsjs.async = true; 
    mapsjs.src  = "https://maps.googleapis.com/maps/api/js?sensor=false"; 
    mapsjs.id  = "mapsjs"; 
    mapsjs.onload = mapsjsready; 
    // Only for IE 6 and 7 
    mapsjs.onreadystatechange = function() 
    { 
     if(this.readyState == 'complete') 
     { 
      mapsjsready(); 
     } 
    } 
    document.body.appendChild(mapsjs); 
});

Но вдруг перестал работать.

я обнаружил, что добавление параметра обратного вызова как-то решить эту проблему:

function mapsjsready() 
{ 
    // mapsjs ready! 
} 
function mapsjsloaded() 
{ 
    // mapsjs loaded! 
} 
$(document).ready(function() { 
    var mapsjs = document.createElement('script'); 
    mapsjs.type = "text/javascript"; 
    mapsjs.async = true; 
    mapsjs.src  = "https://maps.googleapis.com/maps/api/js?sensor=false&callback=mapsjsloaded"; 
    mapsjs.id  = "mapsjs"; 
    mapsjs.onload = mapsjsready; 
    // Only for IE 6 and 7 
    mapsjs.onreadystatechange = function() 
    { 
     if(this.readyState == 'complete') 
     { 
      mapsjsready(); 
     } 
    } 
    document.body.appendChild(mapsjs); 
});

Я не понимаю, почему, но добавив параметр обратного вызова решить мою проблему.

источник

2013-03-22 11:03:45

Не удалось загрузить карту google

ответ

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