Обычно 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. Таким образом, ее нужно определить.
{
//AJAX API загружен успешно. Теперь можно загружать другие API
google.load(«maps», «2», {«callback» : mapLoaded});
}
Функция loadMaps использует метод load API Google AJAX API для загрузки нужного API. Мы загружаем “maps” версии “2. И снова указываем возвратную функцию, которая будет вызываться после загрузки указанного API. Возвратная функция вызывается только при успешной загрузке API.
{
//Если мы оказались в данном месте кода, то 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.