Google Maps Основы

Создайте простую карту Google

Теперь давайте создадим простую карту Google.

Ниже представлена карта Google с Лондоном, Англия:

Пример

<!DOCTYPE html> <html> <head> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc&callback=initMap" async defer></script> <script> function initialize() { var mapProp = { center:new google.maps.LatLng(51.508742,-0.120850), zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"), mapProp); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="googleMap" style="width:500px;height:380px;"></div> </body> </html>

Попробуйте сами »

Анализ примера

Мы используем приведённый выше пример, чтобы проанализировать процесс создания Google Maps.

Почему приложение должно объявлять HTML5?

<!DOCTYPE html>

Большинство браузеров отображают страницы, используя HTML5-документы в "стандартном режиме", что означает, что ваше приложение совместимо со всеми основными браузерами.

Кроме того, без тега DOCTYPE браузеры используют режим quirks для отображения содержимого страницы.

Совет:Следует отметить, что некоторые CSS-правила в режиме совместимости (quirks mode) не применимы в стандартном режиме. В конкретном приложении все размеры в процентах должны наследоваться от родительского блочного элемента. Если размер не указан в родительском модуле, значение по умолчанию — 0 x 0 пикселей. Если вы хотите использовать проценты, их можно объявить в теге <style>, как показано ниже:

<style type="text/css">
html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>

Это объявление стиля указывает, что модуль карты (GoogleMap) должен иметь HTML-высоту 100%.

Добавить ключ Google Maps API

В следующем примере первый тег <script> должен включать Google Maps API:

<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

Поместите ключ API, сгенерированный Google, в параметрkey(key=YOUR_API_KEY)。

Параметр sensorобязателен. Он используется, чтобы указать, использует ли приложение датчик (например, GPS-навигацию) для определения местоположения пользователя. Значение параметра может быть true или false.

HTTPS

Если ваше приложение — это защищённое HTTP-приложение (HTTPS: HTTP Secure), вы можете использовать HTTPS для загрузки Google Maps API:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

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

Аналогичным образом мы также можем загрузить Google Maps API после полной загрузки страницы.

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

Пример

function loadScript() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBzE9xAESye6Kde-3hT-6B90nfwUkcS8Yw&sensor=false&callback=initialize"; document.body.appendChild(script); } window.onload = loadScript;

Попробуйте сами »

Определение свойств карты

Прежде чем инициализировать карту, нам сначала нужно создать объект свойств карты, чтобы определить некоторые свойства карты:

var mapProp = {
  center:new google.maps.LatLng(51.508742,-0.120850),
  zoom:7,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

center (центральная точка)

Свойство center задаёт центр карты, создавая центральную точку на карте с помощью координат (широта, долгота).

Zoom (уровень масштабирования)

Свойство zoom задаёт уровень масштабирования карты. zoom: 0 показывает всю карту мира в максимально уменьшенном масштабе.

MapTypeId (начальный тип карты)

Свойство mapTypeId задаёт начальный тип карты.

mapTypeId включает следующие четыре типа:

  • google.maps.MapTypeId.HYBRID: Отображает прозрачный слой основных улиц поверх спутниковых снимков
  • google.maps.MapTypeId.ROADMAP: Отображает обычную карту улиц
  • google.maps.MapTypeId.SATELLITE: отображает спутниковые снимки
  • google.maps.MapTypeId.TERRAIN: отображает карту с природными особенностями (такими как рельеф и растительность)

Где отображать карту Google

Обычно карта Google используется внутри элемента <div>:

Примечание:Карта будет отображаться в размере, заданном в div, поэтому мы можем задать размер карты в элементе <div>.

Создайте объект Map.

var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);

Приведённый выше код использует параметр (mapProp) для создания новой карты в элементе <div> (с идентификатором googleMap).

Совет:Если вы хотите создать несколько карт на странице, вам нужно только добавить новые объекты карт.

В следующем примере определяются четыре экземпляра карт (четыре карты используют разные типы карт):

Пример

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapProp2); var map3 = new google.maps.Map(document.getElementById("googleMap3"),mapProp3); var map4 = new google.maps.Map(document.getElementById("googleMap4"),mapProp4);

Попробуйте сами »

Загрузить карту

После загрузки окна выполняется функция initialize() для инициализации объекта Map, что гарантирует загрузку Google Map после полной загрузки страницы:

google.maps.event.addDomListener(window, 'load', initialize);
Другие расширения