Не удалось загрузить карту Google - PullRequest
Новая
       2

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

0 голосов
/ 22 января 2012

Я пытаюсь показать местоположение пользователя, полученное с помощью API геолокации на карте 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>

Ответы [ 4 ]

1 голос
/ 22 января 2012

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

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

1 голос
/ 22 января 2012

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

1 голос
/ 22 января 2012

вот моя скрипка , я изменил несколько вещей:

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

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

0 голосов
/ 22 марта 2013

Я загружал Google Maps API следующим образом: 

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 );
});

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...