Асинхронная загрузка API

Вам может понадобиться загрузить код JavaScript API Google Карт после окончания загрузки страницы или по запросу. Для этой цели можно ввести собственный тег<script>, отвечающий на событие window.onload или вызов функции. Однако при этом требуется предусмотреть дополнительные команды начальной загрузки JavaScript API Google Карт, обеспечивающие задержку выполнения кода приложения до момента полной загрузки кода этого интерфейса. Это осуществляется с помощью параметра callback, принимающего функцию, выполняемую по завершению загрузки API.

В следующем коде приложение получает команду загрузить API Google Карт после полной загрузки страницы (с помощью window.onload) и записать JavaScript API Google Карт втег <script> на этой странице. Кроме того, API получает команду выполнить функцию initialize() только после того, как интерфейс будет полностью загружен. Для этого на этапе начальной загрузки передается параметр callback=initialize:

functioninitialize() {
varmapOptions = {
zoom: 8,
center: newgoogle.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
varmap = newgoogle.maps.Map(document.getElementById("map_canvas"), mapOptions);
}

functionloadScript() {
varscript = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";
document.body.appendChild(script);
}

window.onload = loadScript;

Эдементы DOM карты

<div id="map_canvas" style="width: 100%; height: 100%"></div>

Чтобы карту отобразить на веб-странице, следует зарезервировать для нее место. Обычно это осуществляется путем создания именованного элемента div и получения ссылки на него в модели объекта документа (DOM) браузера.

В приведенном выше примере определен элемент <div> с именем "map_canvas", и с помощью атрибутов стиля установлен его размер. Обратите внимание, что для данного размера установлено значение "100%", и на мобильных устройствах размер будет увеличиваться для соответствия размеру экрана. В зависимости от размеров экрана браузера и отступов может потребоваться корректировка этих значений. Обратите внимание, что карта всегда принимает размер содержащего ее элемента, поэтому всегда требуется явно указывать размер в элементе <div>.