Путь к руководству:
https://developers.google.com/maps/?hl=ru →Документация (в списке слева) →JavaScript API Google Карт →Руководство для разработчиков
Начало работы:
Первые шаги:
Легче всего начать ознакомление с API Google Карт, рассмотрев простой пример. На следующей веб-странице отображается карта с центром в Сиднее (Новый Южный Уэльс, Австралия):
<!DOCTYPE html> <html> <head> <meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” /> <style type=”text/css”> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type=”text/javascript” src=”http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE”> </script> <script type=”text/javascript”> function initialize() { var mapOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById(“map_canvas”), mapOptions); } </script> </head> <body onload=”initialize()”> <div id=”map_canvas” style=”width:100%; height:100%”></div> </body> </html>
Далее данный пример разобран и откомментирован.
Объявление приложения в виде документа html5
Рекомендуем вам использовать в веб-приложении настоящую инструкцию DOCTYPE. В приведенных примерах для объявления приложения в качестве документа HTML5 используется простой HTML5 DOCTYPE:
<!DOCTYPE html>
Большинство современных браузеров отображают содержание, объявленное с помощью инструкции DOCTYPE, в "стандартном режиме". Это означает, что приложение будет совместимо с различными браузерами. Элемент DOCTYPE создан таким образом, чтобы его присутствие корректно обрабатывалось браузерами, которые этот элемент не поддерживают. Такие браузеры проигнорируют его и отобразят содержание в "режиме совместимости".
Обратите внимание, что некоторые CSS, работающие в режиме совместимости, являются недопустимыми в стандартном режиме. В частности, все элементы, размеры которых выражены в процентах, должны наследовать от элементов родительских блоков. Если для родительского элемента размер не указан, будет предполагаться, что он составляет 0 x 0 пикселей. По этой причине в код включено следующее объявление <style>:
<style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style>
Объявление CSS указывает, что контейнер карты <div> (с именем map_canvas) должен занимать 100% высоты элемента HTML body. Обратите внимание, что требуется также особо объявить эти процентные значения для <body> и <html>.
Закрузка api Google карт
<html> <head> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"> </script>
URL, содержащийся в теге script, является местоположением файла JavaScript, загружающего все символы и определения, требуемые для использования API Google Карт. Тег script является обязательным.
Параметр key содержит ключ API приложения. Подробнее см. в разделе Получение ключа API. Имейте в виду, что этот ключ отличается от использовавшегося в API версии 2, и его генерация должна производиться из консоли интерфейсов API.
Требуется также включить параметр sensor URL-адреса, который указывает, используется или нет в приложении датчик определения местоположения пользователя (например, локатор GPS). В данном примере мы выразили этот параметр в виде переменной set_to_true_or_false, чтобы подчеркнуть необходимость явно присвоить ему значение true или false.
HTTPS
Если приложение построено на основе протокола HTTPS, вам может потребоваться загрузить JavaScript API Google Карт по протоколу HTTPS:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE" type="text/javascript"></script>
Чтобы при работе с SSL-приложениями избежать появления предупреждений в веб-браузерах, загрузите API Карт по протоколу HTTPS. Кроме того, этот протокол рекомендуется использовать, если приложение передает в запросах конфиденциальные данные пользователей (например, данные о местоположении).
Библиотеки
При загрузке JavaScript API Google Карт посредством URL http://maps.googleapis.com/maps/api/js можно загрузить дополнительные библиотеки с помощью параметра libraries. Библиотеки содержат модули кода, реализующие дополнительные функции для основного интерфейса JavaScript API. Загрузка библиотек производится только по специальному запросу.
Асинхронная загрузка API
Вам может понадобиться загрузить код JavaScript API Google Карт после окончания загрузки страницы или по запросу. Для этой цели можно ввести собственный тег<script>, отвечающий на событие window.onload или вызов функции. Однако при этом требуется предусмотреть дополнительные команды начальной загрузки JavaScript API Google Карт, обеспечивающие задержку выполнения кода приложения до момента полной загрузки кода этого интерфейса. Это осуществляется с помощью параметра callback, принимающего функцию, выполняемую по завершению загрузки API.
В следующем коде приложение получает команду загрузить API Google Карт после полной загрузки страницы (с помощью window.onload) и записать JavaScript API Google Карт в тег <script> на этой странице. Кроме того, API получает команду выполнить функцию initialize() только после того, как интерфейс будет полностью загружен. Для этого на этапе начальной загрузки передается параметр callback=initialize:
function initialize() { var mapOptions = { zoom: 8, center: new google.maps.LatLng(-34.397, 150.644), mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); } function loadScript() { var script = 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;