Обычно API Карт Google загружается вместе с содержанием страницы, что задается в теге script указанием источника кода. Но если карта не является важным элементом приложения или нужно уменьшить время загрузки страницы можно отложить загрузку javascript кода до момента, когда он действительно понадобится.Обычно 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.