Проблема с загрузкой карты Google v3 в асинхронном режиме

Question

Мое текущее решение для загрузки скриптов карты Google - это старый способ.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

Но это занимает много времени, и рендеринг контента задерживается.Затем я посмотрел на Документацию по Google Map и обнаружил, как можно асинхронно загружать javascripts карты Goole.

Так что я протестировал это в уже используемом яваскрипте.Это просто фрагменты моего сценария.

jQuery(document).ready(function() {
  googleMaploadScript();
  someFunction();
}

// Script for loading googlemap with callback to initialize Google map
function googleMaploadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.google.com/maps/api/js?sensor=true&callback=initGoogleMap";
  document.body.appendChild(script);
}

// Some function that calls populateGeoMap()
function someFunction() {
(...)
populateGeoMap(); 
}

// Script for populating google map with locations
function populateGeoMap() {
  // This is where I initialized google map each time I load the page using google map
  // But since I'm using a callback, I've commented this out.
  //initGoogleMap(); 
  var lat = '12.142123';
  var lng = '54.524522';
  latLng  = new google.maps.LatLng(lat,lng); <-- THIS FAILS
}

// Google map init
function initGoogleMap() {
    alert('test'); <-- THIS ALERT IS NEVER TRIGGERED

    options           = {zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }    
    map               = new google.maps.Map(document.getElementById("map_canvas"), options);
    geocoder          = new google.maps.Geocoder();
    icon              = new google.maps.MarkerImage("http://mysite.com/img/pin_red.png", null, null, null, new google.maps.Size(32, 32));    
    bounds            = new google.maps.LatLngBounds();  
}

Мой сценарий завершается с ошибкой new google.maps.LatLng(lat,lng);, и это потому, что initGoogleMap() не был запущен.

Кажется, что обратный вызов в script.src не работал - потому что мое предупреждение никогда не срабатывало.Или это может быть из-за того, что вещи загружены не в правильном порядке, но все же оповещение должно было сработать.

Кто-нибудь сталкивался с этим?

Answer 1

У меня была такая же проблема, и я решил ее так:

проблема в том, что вы не можете добраться до самого объекта jQuery извне jQuery .

атрибут обратного вызова API в конце имеет доступ только к глобальному javascript. читать opn javascript namespace , чтобы лучше понять.

Мое решение - настроить глобальный объект вне $ document.ready (function () {...

var global = {};

затем вы пишете функцию init внутри вашего блока jQuery для карты как переменную и присоединяете ее к глобальному объекту:

global.initMap = function(){ ...}

теперь вы можете ссылаться на свою функцию jquery как глобальную переменную в строке запроса url следующим образом:

...&callback=global.initMap

это сработало для меня.

Answer 2

предложение Тима превосходно!

Это работает асинхронно (ленивая загрузка) скрипта Google Maps v3 с плагинами Google Maps на основе jQuery.

Таким образом, ни один скрипт, кроме head.js + jquery.js, не блокирует страницу, и Google Maps начинает загружаться как можно скорее. window.load должен быть доступен быстро. протестировано на ffox 12, т.е. 7,8,9 и хром 18.

из-за некоторых проблем с ie7,8 не удалось загрузить jquery.js асинхронно: /

//////////////////// lazy loaded google map
// load head.js normally before this code.
// due to IE7,8 or head.js bug you HAVE TO load normally jQuery too:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script src="/PATH/head.js"></script> 
// load rest of your javascript using head.js function
head.js("yourscripts.js");

// IMPORTANT: google map plugin must be tagged like this:
head.js({gmap:"YOUR_PATHs/jquery.mapka.v3-rc.js"}); 



var global = {};

global.googlemaps_init = function(){  

   head.ready("gmap", function() {

     // jquery-ui-map v3 init of google maps (place YOUR jQuery based google maps plugin init here)
     $('#map_canvas').gmap({ 'center': '42.345573,-71.098326' });

    }); // head.gmap.ready END
} // global.googlemaps_init END


function loadGmapScript() {
  var global = {};
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.googleapis.com/maps/api/js?&sensor=false&callback=global.googlemaps_init";
  document.body.appendChild(script);
}
window.onload = loadGmapScript;

//////////////////// lazy loaded google map END

Answer 3

Вы можете использовать асинхронный режим при загрузке API Google Maps, вам необходимо предоставить функцию обратного вызова:

http://maps.googleapis.com/maps/api/js?sensor=true&callback=my_callback_function

Здесь http://lucamanzo -soluzione-software.В этом / wp /? p = 5 вы можете найти простой плагин jquery, показывающий все шаги для использования асинхронной загрузки и jquery, и построения карты с помощью всего нескольких строк кода.Пример использования:

$.gmapstools.init();
$("#my_map_canvas").gmap({lat:37.4221913, lng:-122.08458530000001, draw_marker:true, zoom_level:13});

Answer 4

Я думаю, что происходит то, что вы фактически запускаете «somefunction» перед загрузкой карты, поэтому JS завершается сбоем и никогда не выполняет «initGoogleMap».

Поместите вашу somefunction в конец initGoogleMap следующим образом:

google.maps.event.addListener(map, 'loaded', function(){
 somefunction();
});

К

Answer 5

Это потому, что вы пытаетесь инициализировать объект, к которому у вас нет доступа. Попробуйте переместить функции GA в блок document.onready:

$(function(){
    // Script for loading googlemap with callback to initialize Google map
    function googleMaploadScript() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://maps.google.com/maps/api/js?sensor=true&callback=initGoogleMap";
        document.body.appendChild(script);
    }

    // Some function that calls populateGeoMap()
    function someFunction() {
        (...)
        populateGeoMap(); 
    }

    // Script for populating google map with locations
    function populateGeoMap() {
        // This is where I initialized google map each time I load the page using google map
        // But since I'm using a callback, I've commented this out.
        //initGoogleMap(); 
        var lat = '12.142123';
        var lng = '54.524522';
        latLng  = new google.maps.LatLng(lat,lng); <-- THIS FAILS
    }

    // Google map init
    function initGoogleMap() {
        alert('test'); <-- THIS ALERT IS NEVER TRIGGERED

        options           = {zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }    
        map               = new google.maps.Map(document.getElementById("map_canvas"), options);
        geocoder          = new google.maps.Geocoder();
        icon              = new google.maps.MarkerImage("http://mysite.com/img/pin_red.png", null, null, null, new google.maps.Size(32, 32));    
        bounds            = new google.maps.LatLngBounds();  
    }

    googleMaploadScript();
    someFunction();
});