Организуем загрузку API Google Map по запросу
Обычно API Карт Google загружается вместе с содержанием страницы, что задается в теге script указанием источника кода. Но если карта не является важным элементом приложения или нужно уменьшить время загрузки страницы можно отложить загрузку javascript кода до момента, когда он действительно понадобится. С API Яндекс.Карт можно поступить аналогичным образом.
Карты Google обеспечивают механизм динамической загрузки API тогда, когда она требуется. Таким образом ее не нужно загружать одновременно с содержанием страницы. Небольшой пример демонстрирует загрузку API после нажатия на соответствующую кнопку.
Загружать какой-либо код сjavascript с помощью тега script с сайта Google не нужно. Вместо этого мы используем кнопку.
<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&callback=loadMaps";
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
}
Нужно поменять ключ API Карт Google на ваш. (Получить ключ API Карт Google можно здесь)
Важно: обратите внимание на код callback=loadMaps в script.src. В нем заключено все волшебство. Он сообщает, какая функция будет вызвана после окончания загрузки API Google AJAX. В нашем случае это будет функция loadMaps. Таким образом, ее нужно определить.
Функция loadMaps использует метод load API Google AJAX API для загрузки нужного API. Мы загружаем “maps” версии “2″. И снова указываем возвратную функцию, которая будет вызываться после загрузки указанного API. Возвратная функция вызывается только при успешной загрузке API.
Вот и все!
Динамическую загрузку можно использовать и с другими API.
Карты Google обеспечивают механизм динамической загрузки API тогда, когда она требуется. Таким образом ее не нужно загружать одновременно с содержанием страницы. Небольшой пример демонстрирует загрузку API после нажатия на соответствующую кнопку.
Загружать какой-либо код сjavascript с помощью тега script с сайта Google не нужно. Вместо этого мы используем кнопку.
Исходники
<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&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});
}
{
//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 карт 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.