Загрузка API Google Map по запросу

Обычно, API Карт Google загружается вместе со страницей. Однако если карта не важный элемент приложения и лучше, чтобы страница загружалась скорее, то можно отложить загрузку JavaScript кода до того момента, пока он понадобится. В API Яндекс Карт все делается аналогично.

Карты Google обеспечивают загрузку API при необходимости. Значит, нет спешки ее загружать одновременно со страницей.

Наведем пример нажатия на кнопку.

Загружать код сJavaScript c с помощью тега script не нужно. Его заменит кнопка

<input id=»loadButton» onclick=»loadAPI()» type=»button» value=»Load maps api» />

Нажатие на нее создает тег script со свойством src. Это свойсво добавляется к документу. Таким способом загружается API Google AJAX. Этот API необходим для загрузки других API Google.

function loadAPI()
{
    var script = document.createElement("script");
    script.src = "http://www.google.com/jsapi?key=YOUR_API_KEY_HERE&callback=loadMaps";
    script.type = "text/javascript";
    document.getElementsByTagName("head")[0].appendChild(script);
}

Не забудьте поменять ключ API Google Map на свой – новый ключ.
Обратите внимание на код в script.src, под именем callback=loadMaps. Он очень важный – сообщает, какая функция выплывет после загрузки Google AJAX. У нас будет функция loadMaps. Определяем ее.

function loadMaps()
{
    //AJAX API загружен успешно. Теперь можно загружать другие API
    google.load("maps", "2", {"callback" : mapLoaded});
}

Для загрузки нужного API, функция loadMaps прибегает к методу load API Google AJAX API. Загрузим вторую версию “maps”. Снова нужно указать возвратную функцию, которая вызвана только после успешной загрузки указанного API.

function mapLoaded()
{
    //Если мы оказались в данном месте кода, то API карт Google успешно загружен.
    //Теперь можно выводить карту на страницу
    if (GBrowserIsCompatible())
    {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setMapType(G_SATELLITE_MAP);
        map.setCenter(new GLatLng(28.631466106808542, 77.07853317260742), 5);
    }
}

Динамическая загрузка используется и с другими API.