Все готово!

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

Активация Google Maps JavaScript API

Чтобы помочь вам освоиться, мы покажем, как выполнить некоторые необходимые действия в консоли разработчика Google:

  1. Создание или выбор проекта
  2. Активация Google Maps JavaScript API и связанных служб
  3. Создание соответствующих ключей

Элементы управления

Обзор элементов управления

Карты, отображаемые через Google Maps JavaScript API, содержат элементы графического интерфейса, позволяющие пользователям взаимодействовать с картой. Эти элементы называются элементами управления, различные их варианты можно включать в ваше приложение. Также можно ничего специально не делать и предоставить Google Maps JavaScript API управлять поведением всех элементов управления.

На следующей карте показан набор элементов управления, установленный по умолчанию, который отображается с помощью Google Maps JavaScript API:

Просмотр примера (control-default.html).

Ниже приведен список всего набора элементов управления, которые вы можете использовать на своих картах.

  • Элемент управления Zoom отображает кнопки "+" и "-" для изменения масштаба карты. По умолчанию этот элемент управления отображается в правом нижнем углу карты.
  • Элемент управления Map Type представляет собой выпадающее меню или горизонтальную панель кнопок, где пользователь может выбрать тип карты (ROADMAP, SATELLITE, HYBRID или TERRAIN). По умолчанию этот элемент управления отображается в левом верхнем углу карты.
  • Элемент управления Street View содержит значок Pegman, который можно перетащить на карту для просмотра панорам Street View. По умолчанию этот элемент управления отображается в районе правого нижнего угла карты.
  • Элемент управления Rotate предоставляет сочетание параметров наклона и вращения для карт с перспективными изображениями. По умолчанию этот элемент управления отображается в районе правого нижнего угла карты. Дополнительную информацию см. в разделе изображения под углом 45°.
  • Элемент управления Scale отображает шкалу масштаба карты. По умолчанию этот элемент управления отключен.
  • Элемент управления перехода в полноэкранный режим предлагает возможность открыть карту в полноэкранном режиме. По умолчанию этот элемент управления включен на мобильных устройствах и отключен на стационарных компьютерах. Примечание. iOS не поддерживает переход в полноэкранный режим. По этой причине элемент управления для перехода в полноэкранный режим на устройствах iOS не отображается.

Вы не можете напрямую получать доступ к этим элементам управления картой или изменять их. Однако вы можете изменять поля MapOptions, определяющие видимость и внешний вид элементов управления. Вы можете изменить вид элементов управления при создании экземпляра карты (используя соответствующие поля MapOptions) или динамически изменить карту, вызвав метод setOptions() для изменения параметров карты.

Не все эти элементы управления включены по умолчанию. Узнать о поведении пользовательского интерфейса по умолчанию (и об изменении этого поведения) можно в разделе Пользовательский интерфейс по умолчанию ниже.

Пользовательский интерфейс по умолчанию

По умолчанию, если размер карты слишком маленький (200х200 пикселей), никакие элементы управления не отображаются. Это поведение можно изменить, явно указав, что элемент управления должен отображаться. Дополнительную информацию см. в разделе Добавление элементов управления на карту.

Поведение и внешний вид элементов управления одинаковы для мобильных и стационарных компьютеров, за исключением элемента управления переходом в полноэкранный режим (см. описание поведения в списке элементов управления).

Кроме того, на всех устройствах по умолчанию включена обработка команд клавиатуры.

Отключение пользовательского интерфейса по умолчанию

Вы можете полностью отключить настройки пользовательского интерфейса API по умолчанию. Для этого нужно установить для свойства карты disableDefaultUI (в объекте MapOptions) значение true. Это свойство отключает автоматические действия пользовательского интерфейса в Google Maps JavaScript API.

В следующем фрагменте кода показано, как полностью отключить пользовательский интерфейс по умолчанию

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    disableDefaultUI: true
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    disableDefaultUI: true
  });
}

Просмотр примера (control-disableUI.html).

Добавление элементов управления на карту

Вы можете модифицировать интерфейс своего приложения, добавив, удалив или изменив действия в пользовательском интерфейсе и элементы управления, а также сделать так, чтобы будущие изменения не влияли на это поведение. При необходимости просто добавить действие или изменить существующее действие следует убедиться, что элемент управления явно добавлен в приложение.

Некоторые элементы управления отображаются на карте по умолчанию, а некоторые выводятся только по прямому запросу. Добавление и удаление элементов управления с карты определяется следующими полями объекта MapOptions, для которых нужно установить значение true, если они должны быть видимыми, или значение false, если их нужно скрыть:

{
  zoomControl: boolean,
  mapTypeControl: boolean,
  scaleControl: boolean,
  streetViewControl: boolean,
  rotateControl: boolean,
  fullscreenControl: boolean
}

По умолчанию, если размер карты составляет менее 200х200 пикселей, никакие элементы управления не отображаются. Это поведение можно изменить, явно указав, что элемент управления должен отображаться. Например, в следующей таблице показывается, отображается ли элемент управления масштабом (в зависимости от размера карты и значения в поле zoomControl):

Размер карты zoomControl Отображается?
Любой false Нет
Любой true Да
>= 200x200 пикселей undefined Да
< 200 х 200 пикселей undefined Нет

В следующем примере показано, как сделать так, чтобы на карте скрывался элемент управления Zoom и отображался элемент управления Scale. Следует отметить, что в этом примере мы не отключаем пользовательский интерфейс по умолчанию напрямую, а вносим изменения в его поведение.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    zoomControl: false,
    scaleControl: true
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    zoomControl: false,
    scaleControl: true
  });
}

Просмотр примера (control-simple.html).

Параметры элементов управления

Некоторые элементы управления можно настраивать, изменяя их поведение и внешний вид. Например, элемент управления Map Type может отображаться в виде горизонтальной полосы или выпадающего меню.

Для изменения этих элементов управления нужно изменить соответствующие поля параметров элементов управления в объекте MapOptions при создании карты.

Например, параметры изменения элемента управления Map Type указаны в поле mapTypeControlOptions. Элемент управления Map Type может отображаться в одном из следующих стилей:

  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR – массив элементов управления отображается в виде кнопок на горизонтальной панели, как показано в Google Maps.
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU – отображается элемент управления с одной кнопкой, где тип карты можно выбрать из выпадающего меню.
  • google.maps.MapTypeControlStyle.DEFAULT – отображается поведение по умолчанию, которое зависит от размера экрана и может измениться в будущих версиях API.

Обратите внимание на то, что в случае изменения параметров любого элемента управления его необходимо явно включить, а также установить для соответствующего параметра MapOptions значение true. Например, чтобы установить для элемента управления Map Type стиль DROPDOWN_MENU, используйте следующий код внутри объекта MapOptions:

  ...
  mapTypeControl: true,
  mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  }
  ...

В следующем примере показано, как изменять положение по умолчанию и стиль элементов управления.

// You can set control options to change the default position or style of many
// of the map controls.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      mapTypeIds: ['roadmap', 'terrain']
    }
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// You can set control options to change the default position or style of many
// of the map controls.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      mapTypeIds: ['roadmap', 'terrain']
    }
  });
}

Просмотр примера (control-options.html).

Элементы управления обычно настраиваются при создании карты. Однако вид элементов управления можно изменить динамически, вызвав для карты метод setOptions() и передав ему новые параметры элемента управления.

Изменение элементов управления

Вид элемента управления определяется при создании карты. Для этого используются поля объекта карты MapOptions. Назначение этих полей объясняется ниже.

  • zoomControl – включает или отключает элемент управления Zoom. По умолчанию этот элемент управления является видимым и отображается в районе правого нижнего угла карты. Поле zoomControlOptions дополнительно указывает параметры ZoomControlOptions, которые следует использовать для этого элемента управления.
  • mapTypeControl – включает или отключает элемент управления Map Type, позволяющий пользователю выбирать тип отображаемой карты (например, обычная карта или съемка со спутника). По умолчанию этот элемент управления является видимым и отображается в левом верхнем углу карты. Поле mapTypeControlOptions дополнительно указывает параметры MapTypeControlOptions, которые следует использовать для этого элемента управления.
  • streetViewControl – включает или отключает элемент управления Pegman, позволяющий пользователю активировать панорамы Street View. По умолчанию этот элемент управления является видимым и отображается в районе правого нижнего угла карты. Поле streetViewControlOptions дополнительно указывает параметры StreetViewControlOptions, которые следует использовать для этого элемента управления.
  • rotateControl – включает или отключает элемент управления Rotate для изменения ориентации изображений аэрофотосъемки под углом 45°. По умолчанию присутствие этого элемента управления зависит от наличия или отсутствия изображений аэрофотосъемки под углом 45° для указанного типа карты, текущего масштаба и отображаемого места на карте. Поведение этого элемента управления можно изменить, используя поле rotateControlOptions для установки параметров RotateControlOptions. Этот элемент управления нельзя сделать видимым, если изображения аэрофотосъемки под углом 45° отсутствуют.
  • scaleControl – включает или отключает элемент управления Scale, представляющий собой простую шкалу масштаба карты. По умолчанию этот элемент управления не отображается. Если этот элемент управления включен, он отображается в правом нижнем углу карты. Поле scaleControlOptions дополнительно указывает параметры ScaleControlOptions, которые следует использовать для этого элемента управления.
  • fullscreenControl – включает или отключает элемент управления, который открывает карту в полноэкранном режиме. По умолчанию этот элемент управления отображается на мобильных устройствах и не отображается на стационарных компьютерах. При использовании этот элемент управления отображается в верхней правой части карты. fullscreenControlOptions дополнительно указывает параметры FullscreenControlControlOptions для использования с этим элементом управления.

Обратите внимание, что вы можете указать параметры элементов управления, которые изначально были отключены.

Позиционирование элементов управления

Большинство элементов управления содержат свойство position (типа ControlPosition), указывающее расположение элемента управления на карте. Для позиционирования элементов управления не используются абсолютные значения. Вместо этого API интеллектуально распределяет элементы управления на экране, так чтобы они не перекрывали существующие элементы карты и другие элементы управления с учетом имеющихся ограничений (например, размера карты).

Примечание. В сложных многослойных макетах карт нельзя гарантировать, что элементы управления не будут перекрываться, но API будет стараться разместить их оптимальным образом.

Поддерживаются следующие положения элементов управления:

  • TOP_CENTER – указывает, что элемент управления следует разместить в верхней центральной части карты.
  • TOP_LEFT – указывает, что элемент управления следует разместить в левой верхней части карты, при этом подчиненные элементы управления должны быть ориентированы к верхней центральной части карты.
  • TOP_RIGHT – указывает, что элемент управления следует разместить в правой верхней части карты, при этом подчиненные элементы управления должны быть ориентированы к верхней центральной части карты.
  • LEFT_TOP – указывает, что элемент управления следует разместить в левой верхней части карты, но под любыми элементами TOP_LEFT.
  • RIGHT_TOP – указывает, что элемент управления следует разместить в правой верхней части карты, но под любыми элементами TOP_RIGHT.
  • LEFT_CENTER – указывает, что элемент управления следует разместить с левой стороны карты по центру между позициями TOP_LEFT и BOTTOM_LEFT.
  • RIGHT_CENTER – указывает, что элемент управления следует разместить с правой стороны карты по центру между позициями TOP_RIGHT и BOTTOM_RIGHT.
  • LEFT_BOTTOM – указывает, что элемент управления следует разместить в левой нижней части карты, но над любыми элементами BOTTOM_LEFT.
  • RIGHT_BOTTOM – указывает, что элемент управления следует разместить в правой нижней части карты, но над любыми элементами BOTTOM_RIGHT.
  • BOTTOM_CENTER – указывает, что элемент управления следует разместить в нижней центральной части карты.
  • BOTTOM_LEFT – указывает, что элемент управления следует разместить в левой нижней части карты, при этом подчиненные элементы управления должны быть ориентированы к нижней центральной части карты.
  • BOTTOM_RIGHT – указывает, что элемент управления следует разместить в правой нижней части карты, при этом подчиненные элементы управления должны быть ориентированы к нижней центральной части карты.

Просмотр примера (control-positioning-labels.html).

Следует отметить, что данные позиции могут совпадать с позициями элементов пользовательского интерфейса, которые нельзя изменять (например, уведомлений об авторских правах и логотипа Google). В этих случаях элементы управления размещаются по логике, указанной для каждой позиции, и отображаются максимально близко к указанной позиции.

В следующем примере показана простая карта, на которой включены все элементы управления в разных положениях.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: -28.643387, lng: 153.612224},
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER
    },
    zoomControl: true,
    zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER
    },
    scaleControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    },
    fullscreenControl: true
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: -28.643387, lng: 153.612224},
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER
    },
    zoomControl: true,
    zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER
    },
    scaleControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP
    },
    fullscreenControl: true
  });
}

Просмотр примера (control-positioning.html).

Пользовательские элементы управления

Помимо изменения стиля и положения существующих элементов управления API вы можете создавать собственные элементы управления для пользователей. Элементы управления представляют собой стационарные виджеты, размещенные на верхнем слое карты в фиксированных местах (в отличие от наложений, которые перемещаются вместе с картой под ними). Элемент управления фактически представляет собой элемент <div> с абсолютным положением на карте. Он используется для вывода пользовательского интерфейса и обеспечивает взаимодействие с пользователем или картой, для чего обычно использует обработчик событий.

Для создания собственного элемента управления нужно знать несколько правил. Желательно учесть следующие рекомендации:

  • Определите стили CSS для отображения элементов управления.
  • Используйте для взаимодействия с пользователями или картой обработчики событий, обрабатывающие изменения свойств карты или пользовательские события (например, события 'click').
  • Создайте элемент <div> для хранения элемента управления и добавьте этот элемент в свойство controls объекта Map .

О каждом из этих аспектов рассказывается ниже.

Отображение пользовательских элементов управления

Способ отображения ваших элементов управления зависит от вас. Обычно мы рекомендуем помещать все параметры отображения элемента управления в одном элементе <div>, чтобы вы могли работать с элементом управления как с одной единицей. Эта конструкция будет использоваться в приведенных ниже примерах.

Для создания привлекательных элементов управления требуется знание CSS и структуры DOM. В следующем примере кода показано, как создать простой элемент управления в элементе <div>, как в элементе <div> хранится контур кнопки, а в другом элементе <div> хранится внутренняя часть кнопки.

// Create a div to hold the control.
var controlDiv = document.createElement('div');

// Set CSS for the control border
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = '#fff';
controlUI.style.border = '2px solid #fff';
controlUI.style.cursor = 'pointer';
controlUI.style.marginBottom = '22px';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to recenter the map';
controlDiv.appendChild(controlUI);

// Set CSS for the control interior
var controlText = document.createElement('div');
controlText.style.color = 'rgb(25,25,25)';
controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText.style.fontSize = '16px';
controlText.style.lineHeight = '38px';
controlText.style.paddingLeft = '5px';
controlText.style.paddingRight = '5px';
controlText.innerHTML = 'Center Map';
controlUI.appendChild(controlText);

Обработка событий от пользовательских элементов управления

Чтобы элемент управления был полезен, он должен что-то делать. Что именно делает элемент управления – зависит от вас. Элемент управления может реагировать на действия пользователя или на изменения состояния объекта Map.

Для реагирования на действия пользователя Google Maps JavaScript API предоставляет кросс-браузерный метод обработки событий addDomListener(), позволяющий обрабатывать большинство поддерживаемых DOM-событий браузера. Следующий фрагмент кода добавляет блок прослушивания для события 'click' браузера. Следует отметить, что это событие получается от модели DOM, а не от карты.

// Setup the click event listener: simply set the map to center on Chicago
var chicago = {lat: 41.850, lng: -87.650};

google.maps.event.addDomListener(outer, 'click', function() {
  map.setCenter(chicago)
});

Позиционирование пользовательских элементов управления

Пользовательские элементы управления позиционируются на карте посредством их размещения на соответствующих позициях в свойстве controls объекта Map. Это свойство содержит массив элементов google.maps.ControlPosition. Пользовательский элемент управления можно добавить на карту, добавив элемент Node (обычно <div>) для соответствующей позиции ControlPosition. (Дополнительную информацию о позициях см. в разделе Позиционирование элементов управления выше.)

Каждый объект ControlPosition хранит массив MVCArray, который содержит элементы управления, отображаемые в этой позиции. Таким образом, при добавлении или удалении элементов управления для этой позиции API обновляет элементы управления соответствующим образом.

API помещает элементы управления в каждую позицию в порядке, определяемом свойством index. Элементы управления с меньшим значением этого свойства помещаются на позицию первыми. Например, два пользовательских элемента управления для позиции BOTTOM_RIGHT будут отображаться в соответствии со значениями свойства index, и элемент с меньшим значением этого свойства будет иметь приоритет. По умолчанию все пользовательские элементы управления размещаются после размещения стандартных элементов управления API. Это можно изменить, установив для элемента управления отрицательное значение свойства index. Пользовательские элементы управления нельзя помещать слева от логотипа или справа от уведомления об авторских правах.

Следующий код используется для создания нового пользовательского элемента управления (его конструктор не показан) и добавления его на карту в позицию TOP_RIGHT.

var map = new google.maps.Map(document.getElementById('map'), mapOptions);

// Construct your control in whatever manner is appropriate.
// Generally, your constructor will want access to the
// DIV on which you'll attach the control UI to the Map.
var controlDiv = document.createElement('div');
var myControl = new MyControl(controlDiv);

// We don't really need to set an index value here, but
// this would be how you do it. Note that we set this
// value as a property of the DIV itself.
controlDiv.index = 1;

// Add the control to the map at a designated control position
// by pushing it on the position's array. This code will
// implicitly add the control to the DOM, through the Map
// object. You should not attach the control manually.
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);

Пример пользовательского элемента управления

Следующий простой (хотя не особенно полезный) элемент управления иллюстрирует описанные выше правила. Он реагирует на события 'click' модели DOM, выравнивая карту по центру вокруг определенной точки, заданной по умолчанию:

var map;
var chicago = {lat: 41.85, lng: -87.65};

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 * This constructor takes the control DIV as an argument.
 * @constructor
 */
function CenterControl(controlDiv, map) {

  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = '3px';
  controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlUI.style.cursor = 'pointer';
  controlUI.style.marginBottom = '22px';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to recenter the map';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '16px';
  controlText.style.lineHeight = '38px';
  controlText.style.paddingLeft = '5px';
  controlText.style.paddingRight = '5px';
  controlText.innerHTML = 'Center Map';
  controlUI.appendChild(controlText);

  // Setup the click event listeners: simply set the map to Chicago.
  controlUI.addEventListener('click', function() {
    map.setCenter(chicago);
  });

}

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: chicago
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map);

  centerControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
var map;
var chicago = {lat: 41.85, lng: -87.65};

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 * This constructor takes the control DIV as an argument.
 * @constructor
 */
function CenterControl(controlDiv, map) {

  // Set CSS for the control border.
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = '#fff';
  controlUI.style.border = '2px solid #fff';
  controlUI.style.borderRadius = '3px';
  controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlUI.style.cursor = 'pointer';
  controlUI.style.marginBottom = '22px';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to recenter the map';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlText.style.fontSize = '16px';
  controlText.style.lineHeight = '38px';
  controlText.style.paddingLeft = '5px';
  controlText.style.paddingRight = '5px';
  controlText.innerHTML = 'Center Map';
  controlUI.appendChild(controlText);

  // Setup the click event listeners: simply set the map to Chicago.
  controlUI.addEventListener('click', function() {
    map.setCenter(chicago);
  });

}

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: chicago
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map);

  centerControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

Просмотр примера (control-custom.html).

Добавление состояния элементов управления

Элементы управления также могут иметь состояние. Следующий пример похож на приведенный выше, однако здесь элемент управления содержит дополнительную кнопку Set Home, которая задает новую исходную точку для этого элемента управления. Для этого в элементе управления создается свойство home_, где хранится это состояние, и обеспечиваются средства получения и установки этого состояния.

var map;
var chicago = {lat: 41.85, lng: -87.65};

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 * @constructor
 * @param {!Element} controlDiv
 * @param {!google.maps.Map} map
 * @param {?google.maps.LatLng} center
 */
function CenterControl(controlDiv, map, center) {
  // We set up a variable for this since we're adding event listeners
  // later.
  var control = this;

  // Set the center property upon construction
  control.center_ = center;
  controlDiv.style.clear = 'both';

  // Set CSS for the control border
  var goCenterUI = document.createElement('div');
  goCenterUI.id = 'goCenterUI';
  goCenterUI.title = 'Click to recenter the map';
  controlDiv.appendChild(goCenterUI);

  // Set CSS for the control interior
  var goCenterText = document.createElement('div');
  goCenterText.id = 'goCenterText';
  goCenterText.innerHTML = 'Center Map';
  goCenterUI.appendChild(goCenterText);

  // Set CSS for the setCenter control border
  var setCenterUI = document.createElement('div');
  setCenterUI.id = 'setCenterUI';
  setCenterUI.title = 'Click to change the center of the map';
  controlDiv.appendChild(setCenterUI);

  // Set CSS for the control interior
  var setCenterText = document.createElement('div');
  setCenterText.id = 'setCenterText';
  setCenterText.innerHTML = 'Set Center';
  setCenterUI.appendChild(setCenterText);

  // Set up the click event listener for 'Center Map': Set the center of
  // the map
  // to the current center of the control.
  goCenterUI.addEventListener('click', function() {
    var currentCenter = control.getCenter();
    map.setCenter(currentCenter);
  });

  // Set up the click event listener for 'Set Center': Set the center of
  // the control to the current center of the map.
  setCenterUI.addEventListener('click', function() {
    var newCenter = map.getCenter();
    control.setCenter(newCenter);
  });
}

/**
 * Define a property to hold the center state.
 * @private
 */
CenterControl.prototype.center_ = null;

/**
 * Gets the map center.
 * @return {?google.maps.LatLng}
 */
CenterControl.prototype.getCenter = function() {
  return this.center_;
};

/**
 * Sets the map center.
 * @param {?google.maps.LatLng} center
 */
CenterControl.prototype.setCenter = function(center) {
  this.center_ = center;
};

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: chicago
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor
  // passing in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map, chicago);

  centerControlDiv.index = 1;
  centerControlDiv.style['padding-top'] = '10px';
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#goCenterUI, #setCenterUI {
  background-color: #fff;
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  cursor: pointer;
  float: left;
  margin-bottom: 22px;
  text-align: center;
}
#goCenterText, #setCenterText {
  color: rgb(25,25,25);
  font-family: Roboto,Arial,sans-serif;
  font-size: 15px;
  line-height: 25px;
  padding-left: 5px;
  padding-right: 5px;
}
#setCenterUI {
  margin-left: 12px;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
var map;
var chicago = {lat: 41.85, lng: -87.65};

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 * @constructor
 * @param {!Element} controlDiv
 * @param {!google.maps.Map} map
 * @param {?google.maps.LatLng} center
 */
function CenterControl(controlDiv, map, center) {
  // We set up a variable for this since we're adding event listeners
  // later.
  var control = this;

  // Set the center property upon construction
  control.center_ = center;
  controlDiv.style.clear = 'both';

  // Set CSS for the control border
  var goCenterUI = document.createElement('div');
  goCenterUI.id = 'goCenterUI';
  goCenterUI.title = 'Click to recenter the map';
  controlDiv.appendChild(goCenterUI);

  // Set CSS for the control interior
  var goCenterText = document.createElement('div');
  goCenterText.id = 'goCenterText';
  goCenterText.innerHTML = 'Center Map';
  goCenterUI.appendChild(goCenterText);

  // Set CSS for the setCenter control border
  var setCenterUI = document.createElement('div');
  setCenterUI.id = 'setCenterUI';
  setCenterUI.title = 'Click to change the center of the map';
  controlDiv.appendChild(setCenterUI);

  // Set CSS for the control interior
  var setCenterText = document.createElement('div');
  setCenterText.id = 'setCenterText';
  setCenterText.innerHTML = 'Set Center';
  setCenterUI.appendChild(setCenterText);

  // Set up the click event listener for 'Center Map': Set the center of
  // the map
  // to the current center of the control.
  goCenterUI.addEventListener('click', function() {
    var currentCenter = control.getCenter();
    map.setCenter(currentCenter);
  });

  // Set up the click event listener for 'Set Center': Set the center of
  // the control to the current center of the map.
  setCenterUI.addEventListener('click', function() {
    var newCenter = map.getCenter();
    control.setCenter(newCenter);
  });
}

/**
 * Define a property to hold the center state.
 * @private
 */
CenterControl.prototype.center_ = null;

/**
 * Gets the map center.
 * @return {?google.maps.LatLng}
 */
CenterControl.prototype.getCenter = function() {
  return this.center_;
};

/**
 * Sets the map center.
 * @param {?google.maps.LatLng} center
 */
CenterControl.prototype.setCenter = function(center) {
  this.center_ = center;
};

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: chicago
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor
  // passing in this DIV.
  var centerControlDiv = document.createElement('div');
  var centerControl = new CenterControl(centerControlDiv, map, chicago);

  centerControlDiv.index = 1;
  centerControlDiv.style['padding-top'] = '10px';
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

Просмотр примера (control-custom-state.html).

Оставить отзыв о...

Текущей странице
Google Maps JavaScript API
Google Maps JavaScript API
Нужна помощь? Обратитесь в службу поддержки.