Организуем загрузку API Google Map по запросу

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

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

Загружать какой-либо код сJavaScript с помощью тега script с сайта Google не нужно. Вместо этого мы используем кнопку.

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

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

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

Нужно поменять ключ API Карт Google на ваш. (Получить ключ API Карт Google можно здесь)

Важно: обратите внимание на код callback=loadMaps в script.src. В нем заключено все волшебство. Он сообщает, какая функция будет вызвана после окончания загрузки API Google AJAX. В нашем случае это будет функция loadMaps. Таким образом, ее нужно определить.

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

Функция loadMaps использует метод load API Google AJAX API для загрузки нужного API. Мы загружаем “maps” версии “2″. И снова указываем возвратную функцию, которая будет вызываться после загрузки указанного API. Возвратная функция вызывается только при успешной загрузке 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.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.vijayjoshi.org/2010/01/19/how-to-dynamically-load-the-google-maps-javascript-api-on-demand-loading/
Перевел: Сергей Фастунов
Урок создан: 21 Сентября 2010
Просмотров: 27645
Правила перепечатки


5 последних уроков рубрики "HTML и DHTML"

^ Наверх ^