Все готово!

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

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

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

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

Отображение KML

Обзор

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

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

var map;
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';

/**
 * Initializes the map and calls the function that loads the KML layer.
 */
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-19.257753, 146.823688),
    zoom: 2,
    mapTypeId: 'terrain'
  });
  loadKmlLayer(src, map);
}

/**
 * Adds a KMLLayer based on the URL passed. Clicking on a marker
 * results in the balloon content being loaded into the right-hand div.
 * @param {string} src A URL for a KML file.
 */
function loadKmlLayer(src, map) {
  var kmlLayer = new google.maps.KmlLayer(src, {
    suppressInfoWindows: true,
    preserveViewport: false,
    map: map
  });
  google.maps.event.addListener(kmlLayer, 'click', function(event) {
    var content = event.featureData.infoWindowHtml;
    var testimonial = document.getElementById('capture');
    testimonial.innerHTML = content;
  });
}
<div id="map"></div>
<div id="capture"></div>
html, body {
  height: 370px;
  padding: 0;
  margin: 0;
  }
#map {
 height: 360px;
 width: 300px;
 overflow: hidden;
 float: left;
 border: thin solid #333;
 }
#capture {
 height: 360px;
 width: 480px;
 overflow: hidden;
 float: left;
 background-color: #ECECFB;
 border: thin solid #333;
 border-left: none;
 }
 <!-- 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>

Попробуйте сделать это сами

Наведите указатель мыши на верхнюю правую часть блока кода, чтобы скопировать код или открыть его в JSFiddle.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>KML Click Capture Sample</title>
    <style>
      html, body {
        height: 370px;
        padding: 0;
        margin: 0;
        }
      #map {
       height: 360px;
       width: 300px;
       overflow: hidden;
       float: left;
       border: thin solid #333;
       }
      #capture {
       height: 360px;
       width: 480px;
       overflow: hidden;
       float: left;
       background-color: #ECECFB;
       border: thin solid #333;
       border-left: none;
       }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="capture"></div>
    <script>
      var map;
      var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';

      /**
       * Initializes the map and calls the function that loads the KML layer.
       */
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-19.257753, 146.823688),
          zoom: 2,
          mapTypeId: 'terrain'
        });
        loadKmlLayer(src, map);
      }

      /**
       * Adds a KMLLayer based on the URL passed. Clicking on a marker
       * results in the balloon content being loaded into the right-hand div.
       * @param {string} src A URL for a KML file.
       */
      function loadKmlLayer(src, map) {
        var kmlLayer = new google.maps.KmlLayer(src, {
          suppressInfoWindows: true,
          preserveViewport: false,
          map: map
        });
        google.maps.event.addListener(kmlLayer, 'click', function(event) {
          var content = event.featureData.infoWindowHtml;
          var testimonial = document.getElementById('capture');
          testimonial.innerHTML = content;
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Начало работы

Для создания карты и боковой панели, приведенной здесь в качестве примера, выполните следующие шаги.

  1. Настройте файл KML
  2. Отобразите слой KMLlayer
  3. Отобразите данные на боковой панели

Настройка файла KML для импорта

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

Если вы только учитесь и не имеете файла KML, у вас есть следующие возможности.

  • Использовать следующий файл KML для данного руководства:

    https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml

  • Найти файл KML в сети. Воспользуйтесь оператором filetype поисковой системы Google.

    Замените velodromes на любой поисковый запрос или опустите его, чтобы найти все файлы KML.

Если вы создаете свой собственный файл, код в этом примере предполагает, что:

  • Вы разместили файл в открытом доступе в Интернете. Это требование применимо ко всем приложениям, которые загружают KML в KMLLayer, чтобы серверы Google могли найти и извлечь его содержимое для отображения на карте.
  • Этот файл находится на странице, не защищенной паролем.
  • Ваши объекты имеют содержимое информационных окон. Это содержимое можно заключить в элемент description или включить с помощью элемента ExtendedData и замены объекта (подробнее см. ниже). Оба доступны как свойство функции infoWindowHtml.

Элементы ExtendedData

Файл KML в данном руководстве включает информацию об объектах в элементе ExtendedData. Для того чтобы передать эту информацию в описание объекта, используйте свойство замена объекта, которое фактически является переменной в теге BalloonStyle.

В следующей таблице поясняется пример кода в данном разделе.

Код и его описание 
<Style id="west_campus_style">
  <IconStyle>
    <Icon>
      <href>https://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png
      </href>
    </Icon>
  </IconStyle>
  <BalloonStyle>
    <text>$[video]</text>
  </BalloonStyle>
</Style>

Файл KML имеет одиночный элемент Style, который применяется ко всем меткам.
Этот элемент Style присваивает значение #[video] текстовому элементу BalloonStyle.
Формат $[x] дает команду синтаксическому анализатору KML найти элемент Data с именем video и использовать его в качестве всплывающей текстовой выноски.		 
<Placemark>
    <name>Google West Campus 1</name>
    <styleUrl>#west_campus_style</styleUrl>
    <ExtendedData>
      <Data name="video">
        <value><![CDATA[<iframe width="640" height="360"
          src="https://www.youtube.com/embed/ZE8ODPL2VPI" frameborder="0"
          allowfullscreen></iframe><br><br>]]></value>
      </Data>
    </ExtendedData>
    <Point>
      <coordinates>-122.0914977709329,37.42390182131783,0</coordinates>
    </Point>
</Placemark>

Каждая метка Placemark содержит элемент ExtendedData, где хранится элемент Data. Обратите внимание, что каждая метка Placemark имеет только один элемент Data с атрибутом имени video.
Файл для этого руководства в качестве содержимого всплывающей текстовой выноски для каждой метки использует встроенное видео YouTube.

Подробнее о замене объекта см. главу Добавление настраиваемых данных в документации по KML.

Отображение KMLLayer

Инициализация карты

В этой таблице поясняется пример кода в данном разделе.

Код и его описание 
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(-19.257753, 146.823688),
    zoom: 2,
    mapTypeId: 'terrain'
  });
}

Чтобы отобразить KML на карте, сначала необходимо создать её.
В этом коде создается новый объект Google Maps, ему сообщается, где центрироваться и масштабироваться, карта прикрепляется к контейнеру div.
Чтобы узнать подробнее об азах создания карты Google Maps см. руководство Добавление карты Google Maps на сайт.

Создание KMLLayer

В этой таблице поясняется пример кода, который создает KMLLayer.

Код и его описание 
var kmlLayer = new google.maps.KmlLayer();

Создает новый объект KMLLayer, чтобы отображать ваш KML.		 
var src = 'https://developers.google.com/maps/documentation/javascript/examples/kml/westcampus.kml';
var kmlLayer = new google.maps.KmlLayer(src, {
  suppressInfoWindows: true,
  preserveViewport: false,
  map: map
});

Конструктор KMLLayer присваивает URL-адрес файлу KML. Он также определяет свойства объекта KMLLayer, который выполняет следующие действия.
  • Дает команду слою не показывать информационное окно при нажатии.
  • Центрирует и масштабирует карту до ограничительной рамки содержимого этого слоя.
  • Привязывает карту к объекту Мар, созданному ранее.
В Google Maps JavaScript API справочном руководстве перечислены все имеющиеся возможности этого слоя.
Загрузите свой файл HTML, чтобы отобразить содержимое файла KML как слой поверх базовой карты. Однако, нажатие на какой-либо объект не приведет теперь ни к какому ответному действию.

Отображение данных на боковой панели

Этот раздел поясняет настройки, которые отображают содержимое информационного окна на боковой панели при нажатии объекта на карте. Это происходит путем:

  • отслеживания события нажатия какого-либо объекта слоя KMLLayer;
  • считывания данных нажатого объекта;
  • записи этих данных на боковую панель.

Добавление блока прослушивания событий

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

В следующей таблице поясняется пример кода в данном разделе.

Код и его описание 
google.maps.event.addListener(kmlLayer, 'click', function(event) {});

Блоком прослушивания событий google.maps.event.addListener учитывается следующая информация.
  • Объект отслеживания. В данном руководстве это объект kmlLayer.
  • Тип отслеживаемого события. В данном руководстве это событие click.
  • Вызываемая функция, когда происходит событие.
Подробнее о событиях см. в Руководстве для разработчиков.

Запись данных объекта KML на боковую панель

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

В следующей таблице поясняется пример кода в данном разделе.

Код и его описание 
var content = event.featureData.infoWindowHtml;

Записывает содержимое информационного окна в переменную. 
var testimonial = document.getElementById('capture');
testimonial.innerHTML = content;

Определяет контейнер div для записи и заменяет в нем код HTML на содержимое объекта. 
google.maps.event.addListener(kmlLayer, 'click', function(event) {
  var content = event.featureData.infoWindowHtml;
  var testimonial = document.getElementById('capture');
  testimonial.innerHTML = content;
});

Эти строки кода становятся функцией в конструкторе addListener.

Теперь каждый раз при нажатии объекта KML на карте боковая панель будет обновляться, чтобы отобразить содержимое его информационного окна.

Дополнительная информация

Подробнее об использовании файлов KML.

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

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