Проверено

VDS-хостинг - именно на этом хостинге работает наш сайт.
Sape - биржа временных ссылок, доход 80р/день.
Trustlink - биржа временных ссылок, доход 60р/день.
Telderi - здесь покупаю сайты для дальнейшего заработка.

Партнеры

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

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

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

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

Исходники
Прикреплённые файлы:
Файл: demo.zip
Размер: [1,67 Kb] (забрали: 21 раз)


<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.

Другие новости по теме: