Все готово!

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

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

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

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

Информационные окна

  1. Введение
  2. Добавление информационного окна
  3. Открытие информационного окна
  4. Закрытие информационного окна
  5. Перемещение информационного окна

Введение

Объект InfoWindow используется для отображения контента (обычно текста или изображений) в виде всплывающих окон в указанной точке на карте. Информационное окно состоит из области контента и заостренного указателя. Конец указателя прикреплен к указанному местоположению на карте.

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

В более широком смысле информационные окна являются типом наложения. Информацию о других типах наложений см. в документе Рисование на карте.

Добавление информационного окна

Конструктор InfoWindow использует литерал объекта InfoWindowOptions, который указывает исходные параметры добавления информационного окна.

Литерал объекта InfoWindowOptions содержит следующие поля:

  • content – содержит текстовую строку или узел DOM, которые отображаются в информационном окне.
  • pixelOffset – содержит величину смещения от указателя информационного окна до точки, к которой прикреплено это окно. Обычно в этом поле не требуется указывать значение. В нем можно оставить значение по умолчанию.
  • position – содержит координаты LatLng, к которым крепится информационное окно. Примечание. Объект InfoWindow можно прикрепить к объекту Marker (в этом случае позиция зависит от местоположения маркера) или к самой карте в точке с указанными координатами LatLng. Одним из способов получения координат LatLng является использование службы Geocoding. При открытии информационного окна на маркере выполняется автоматическое обновление поля position.
  • maxWidth – определяет максимальную ширину информационного окна в пикселях. По умолчанию информационное окно расширяется так, чтобы полностью вмещать содержимое. Если информационное окно заполняет всю карту, содержащийся в нем текст автоматически подгоняется под размер окна. Если использовать параметр maxWidth, информационное окно автоматически настроит ширину текста и окна под указанное значение. Если при достижении максимальной ширины на экране останется свободное место для увеличения размеров окна по вертикали, этот размер может быть увеличен.

Объект InfoWindow может содержать текстовую строку, фрагмент кода HTML или элемент DOM. Содержание окна можно указать в параметрах InfoWindowOptions или с помощью явного вызова метода setContent() для объекта InfoWindow.

Если вы хотите явно определить размер содержимого, вы можете поместить его в элемент <div> и применить к этому элементу <div> стиль CSS. Также CSS можно использовать для обеспечения поддержки прокрутки. Если вы не включите режим прокрутки и если размер содержимого превысит доступный размер информационного окна, содержимое может выйти за пределы окна.

Открытие информационного окна

Созданное информационное окно не отображается на карте автоматически. Чтобы информационное окно стало видимым, нужно вызвать метод open() для объекта InfoWindow, передать ему объект Map карты, в которой должно быть открыто информационное окно, и (необязательно) объект Marker, к которому следует прикрепить информационное окно. Если не указывать маркер, информационное окно откроется в точке, определяемой свойством position.

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

  var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
      'Aboriginal people of the area. It has many springs, waterholes, '+
      'rock caves and ancient paintings. Uluru is listed as a World '+
      'Heritage Site.</p>'+
      '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}
<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>
// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });

  var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
      'Aboriginal people of the area. It has many springs, waterholes, '+
      'rock caves and ancient paintings. Uluru is listed as a World '+
      'Heritage Site.</p>'+
      '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}

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

В следующем примере устанавливается параметр maxWidth для информационного окна: Просмотр примера (infowindow-simple-max.html).

Закрытие информационного окна

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

Перемещение информационного окна

Существует несколько способов изменить расположение информационного окна.

  • Вызовите метод setPosition() для информационного окна.
  • Прикрепите информационное окно к новому маркеру, используя метод InfoWindow.open(). Примечание. Если вызвать метод open() и не передать ему маркер, объект InfoWindow будет использовать позицию, указанную при его создании в литерале объекта InfoWindowOptions.

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

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