Наложение на карту изображения

by Denis Tverdokhlebov

HTML

<div id="map"></div>
<!-- Заменить ключ. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

CSS

/* Всегда устанавливайте высоту карты явно, чтобы определить размер div
 * элемент, содержащий карту. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

// В этом примере создается пользовательское наложение USGSOverlay, содержащее
// изображение Геологической службы США (USGS) соответствующего района на карте.

// Установите прототип пользовательского объекта наложения в новый экземпляр
// из OverlayView. По сути, это будет подкласс класса наложения, поэтому
// проще загрузить API синхронно, используя
// погуглить.карты.событие.addDomListener().
// Обратите внимание, что мы устанавливаем прототип в экземпляр, а не
// сам родительский класс, потому что мы не хотим изменять родительский класс.

var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();

// Инициализация карты и пользовательского наложения.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 62.323907, lng: -150.109291},
    mapTypeId: 'satellite'
  });

  var bounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(62.281819, -150.287132),
      new google.maps.LatLng(62.400471, -150.005608));

  // Фотография предоставлена Геологической службой США.
  var srcImage = 'https://developers.google.com/maps/documentation/' +
      'javascript/examples/full/images/talkeetna.png';

  // Пользовательский объект USGSOverlay содержит изображения Геологической службы США ,
  // границы изображения и ссылка на карту.
  overlay = new USGSOverlay(bounds, srcImage, map);
}

/** @constructor */
function USGSOverlay(bounds, image, map) {

  // Инициализировать все свойства.
  this.bounds_ = bounds;
  this.image_ = image;
  this.map_ = map;

  // Определите свойство для хранения div изображения. Мы будем
 	// фактически создать этот div после получения onAdd()
 	// метод, поэтому мы оставим его null на данный момент.
  this.div_ = null;

  // Явно вызовите setMap на этом наложении.
  this.setMap(map);
}

 /**
 * onAdd вызывается, когда панели карты готовы и наложение завершено.
 * добавлено на карту.
 */
USGSOverlay.prototype.onAdd = function() {

  var div =...