Все готово!

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

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

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

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

Наземные наложения

  1. Введение
  2. Добавление наземного наложения
  3. Удаление наземного наложения

Введение

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

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

Добавление наземного наложения

Конструктор объекта GroundOverlay указывает URL-адрес и параметры LatLngBounds для изображения. Изображение будет выведено на карту в указанных границах с учетом проекции карты.

// This example uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.

var historicalOverlay;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 40.740, lng: -74.18}
  });

  var imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655
  };

  historicalOverlay = new google.maps.GroundOverlay(
      'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
      imageBounds);
  historicalOverlay.setMap(map);
}
<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 uses a GroundOverlay to place an image on the map
// showing an antique map of Newark, NJ.

var historicalOverlay;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 40.740, lng: -74.18}
  });

  var imageBounds = {
    north: 40.773941,
    south: 40.712216,
    east: -74.12544,
    west: -74.22655
  };

  historicalOverlay = new google.maps.GroundOverlay(
      'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
      imageBounds);
  historicalOverlay.setMap(map);
}

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

Удаление наземного наложения

Чтобы удалить наложение с карты, вызовите его метод setMap() и передайте в него значение null. Следует отметить, что при вызове этого метода само наложение не удаляется. Метод просто убирает наложение с карты. Если наложение нужно удалить полностью, его следует убрать с карты и установить для самого наложения значение null.

function removeOverlay() {
  historicalOverlay.setMap(null);
}

Просмотр примера (overlay-remove.html).

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

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