Все готово!

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

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

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

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

Слои KML и GeoRSS

Слой KmlLayer выполняет прорисовку элементов KML и GeoRSS в мозаичном наложении Google Maps JavaScript API.

Обзор

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

Maps JavaScript API преобразует предоставленные географические данные XML в представление KML, которое отображается на карте с помощью мозаичного наложения Maps JavaScript API. Слой KML выглядит как знакомые элементы наложения Maps JavaScript API (и иногда имеет аналогичное поведение). Элементы KML <Placemark> и GeoRSS point прорисовываются как маркеры, например, отображение элементов <LineString> выполняется в виде ломаных линий, а прорисовка элементов <Polygon> – в виде многоугольников. Элементы <GroundOverlay> прорисовываются как прямоугольные изображения на карте. Следует отметить, что эти объекты не являются объектами Marker, Polyline, Polygon или GroundOverlay Google Maps JavaScript API, а прорисовываются в виде отдельного объекта на карте.

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

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

Параметры слоя KML

Конструктор KmlLayer() может передавать ряд параметров KmlLayerOptions:

  • map – указывает объект Map для прорисовки слоя KmlLayer. Вы можете скрыть слой KmlLayer, установив для этого параметра значение null с помощью метода setMap().
  • preserveViewport – указывает, что карту не следует подстраивать под границы содержимого KmlLayer при отображении слоя. По умолчанию при отображении слоя KmlLayer масштаб карты изменяется, а сама карта смещается так, чтобы все содержимое слоя отображалось полностью.
  • suppressInfoWindows – указывает, что поддерживающие нажатие элементы в слое KmlLayer не должны отображать объекты InfoWindow.

Кроме того, после прорисовки слой KmlLayer имеет постоянное свойство metadata, которое содержит название слоя, описание, фрагмент текста и данные автора в литерале объекта KmlLayerMetadata. Эту информацию можно просмотреть с помощью метода getMetadata(). Поскольку для прорисовки объекта KmlLayer требуется асинхронная связь с внешним сервером, вам понадобится отслеживать событие metadata_changed, указывающее на установку значения свойства.

В следующем примере создается слой KmlLayer по указанным данным GeoRSS:

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

  var georssLayer = new google.maps.KmlLayer({
    url: 'http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss'
  });
  georssLayer.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>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 49.496675, lng: -102.65625}
  });

  var georssLayer = new google.maps.KmlLayer({
    url: 'http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss'
  });
  georssLayer.setMap(map);
}

Просмотр примера GeoRSS

В следующем примере создается слой KmlLayer по указанным данным KML:

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

  var ctaLayer = new google.maps.KmlLayer({
    url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
    map: 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>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 41.876, lng: -87.624}
  });

  var ctaLayer = new google.maps.KmlLayer({
    url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
    map: map
  });
}

Просмотр примера KML

Детали элементов KML

Поскольку слой KML может содержать большое количество элементов, вы не можете получить их данные непосредственно из объекта KmlLayer. Вместо этого, по мере отображения объектов, они прорисовываются аналогично наложениям Maps JavaScript API, поддерживающим нажатия. По умолчанию при нажатии отдельных элементов выводится объект InfoWindow, который содержит данные KML <title> и <description> соответствующего элемента. Кроме того, при нажатии элемента KML генерируется событие KmlMouseEvent, которое передает следующую информацию:

  • position – указывает координаты (широту и долготу), к которым будет привязан объект InfoWindow для данного элемента KML. Эта позиция обычно соответствует точке нажатия для многоугольников, ломаных линий и наземных наложений, либо реальному местоположению для маркеров.
  • pixelOffset – указывает смещение относительно вышеуказанных координат position для привязки "указателя" объекта InfoWindow. Для многоугольных объектов это смещение обычно равно 0,0, а для маркеров оно включает высоту маркера.
  • featureData – содержит структуру JSON данных KmlFeatureData.

Пример объекта KmlFeatureData приведен ниже:

{
  author: {
    email: "nobody@google.com",
    name: "Mr Nobody",
    uri: "http://example.com"
  },
  description: "description",
  id: "id",
  infoWindowHtml: "html",
  name: "name",
  snippet: "snippet"
}

В следующем примере при нажатии элемента KML отображается соответствующий ему текст <Description> в боковой панели <div>:

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

  var kmlLayer = new google.maps.KmlLayer({
    url: 'http://googlemaps.github.io/kml-samples/kml/Placemark/placemark.kml',
    suppressInfoWindows: true,
    map: map
  });

  kmlLayer.addListener('click', function(kmlEvent) {
    var text = kmlEvent.featureData.description;
    showInContentWindow(text);
  });

  function showInContentWindow(text) {
    var sidediv = document.getElementById('content-window');
    sidediv.innerHTML = text;
  }
}
<div id="map"></div>
<div id="content-window"></div>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  float: left;
  height: 100%;
  width: 79%;
}
#content-window {
  float: left;
  font-family: 'Roboto','sans-serif';
  height: 100%;
  line-height: 30px;
  padding-left: 10px;
  width: 19%;
}
 <!-- 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: 37.06, lng: -95.68}
  });

  var kmlLayer = new google.maps.KmlLayer({
    url: 'http://googlemaps.github.io/kml-samples/kml/Placemark/placemark.kml',
    suppressInfoWindows: true,
    map: map
  });

  kmlLayer.addListener('click', function(kmlEvent) {
    var text = kmlEvent.featureData.description;
    showInContentWindow(text);
  });

  function showInContentWindow(text) {
    var sidediv = document.getElementById('content-window');
    sidediv.innerHTML = text;
  }
}

Просмотр примера KML

Ограничения размера и сложности отображения KML.

Google Maps JavaScript API имеет ограничения по размеру и сложности загружаемых файлов KML. Ниже приведена сводная информация по действующим ограничениям.

Примечание. Эти ограничения могут быть изменены в любое время.

Максимальный размер вызываемого файла (необработанный KML, необработанный GeoRSS или сжатый KMZ)
3 МБ
Максимальный размер несжатого файла KML
10 МБ
Максимальное количество сетевых ссылок
10
Максимальное количество объектов в документе
1 000
Количество слоев KML
Количество слоев KML, которое может быть показано на одной карте Google Maps, ограничено. Если вы превышаете этот лимит, ни один из ваших слоев на карте не появится, а в консоли JavaScript вашего браузера будет сообщаться об ошибке. Этим лимитом учитывается совокупное число созданных классов KMLLayer и общая длина всех URL-адресов, использованных для создания этих слоев. Для каждого нового слоя KMLLayer, который вы создаете, используется одна часть лимита для слоя и еще одна часть лимита для URL-адреса, откуда был загружен файл KML (зависит от длины адреса). Соответственно, количество слоев, которое можно добавить, будет варьироваться от приложения к приложению. В среднем, у вас должно получаться загружать от 10 до 20 слоев без превышения лимита. Если вы все же превышаете лимит, воспользуйтесь службой сокращения URL-адресов (например, https://goo.gl), чтобы сократить URL-адреса KML. Другой способ заключается в создании отдельного файла KML, состоящего из ссылок NetworkLinks на отдельные URL-адреса KML.

Поддерживаемые элементы KML

Google Maps JavaScript API поддерживает следующие элементы KML. Синтаксический анализатор KML, как правило, автоматически игнорирует те теги XML, которые он не понимает.

  • Метки
  • Значки
  • Поля
  • Описательный HTML – замена объекта через теги <BalloonStyle> и <text>
  • KMZ (сжатый KML, включая прикрепленные изображения)
  • Ломаные линии и многоугольники
  • Стили ломаных линий и многоугольников, включая цвет, заливку и прозрачность
  • Сетевые ссылки для динамического импорта данных
  • Наземные наложения и экранные наложения

В следующей таблице даны все подробности о поддерживаемых элементах KML.

Элемент KML Поддержка в API Примечание
<address> нет
<AddressDetails> нет
<Alias> Н/Д <Model> не поддерживается
<altitude> нет
<altitudeMode> нет
<atom:author> да
<atom:link> да
<atom:name> да
<BalloonStyle> частично Поддерживается только <text>
<begin> Н/Д <TimeSpan> не поддерживается
<bgColor> нет
<bottomFov> Н/Д <PhotoOverlay> не поддерживается
<Camera> нет
<Change> частично Поддерживаются только изменения стиля
<color> частично включает #AABBGGRR и #BBGGRR; не поддерживается в <IconStyle>, <ScreenOverlay> и <GroundOverlay>
<colorMode> нет
<cookie> нет
<coordinates> да
<Create> нет
<Data> да
<Delete> нет
<description> да Содержимое HTML допустимо, но проверяется с целью защиты от кроссбраузерных атак. Замена объектов вида $[dataName] не поддерживается.
<displayMode> нет
<displayName> нет
<Document> частично косвенно поддерживаются дочерние элементы; дочерние элементы других объектов не действуют
<drawOrder> нет
<east> да
<end> Н/Д <TimeSpan> не поддерживается
<expires> да подробнее см. раздел "Сводная информация"
<ExtendedData> частично поддерживается только <Data> без указания типа, <SimpleData> или <Schema>; замена элементов вида $[dataName] не поддерживается.
<extrude> нет
<fill> да
<flyToView> нет
<Folder> да
<geomColor> нет устаревшая возможность
<GeometryCollection> нет устаревшая возможность
<geomScale> нет устаревшая возможность
<gridOrigin> Н/Д <PhotoOverlay> не поддерживается
<GroundOverlay> да нельзя вращать
<h> да устаревшая возможность
<heading> да
подсказка да поддерживается target=...
<hotSpot> да
<href> да
<httpQuery> нет
<Icon> да нельзя вращать
<IconStyle> да
<ImagePyramid> Н/Д <PhotoOverlay> не поддерживается
<innerBoundaryIs> да Неявным образом из порядка <LinearRing>
<ItemIcon> Н/Д <ListStyle> не поддерживается
<key> Н/Д <StyleMap> не поддерживается
<kml> да
<labelColor> нет устаревшая возможность
<LabelStyle> нет
<latitude> да
<LatLonAltBox> да
<LatLonBox> да
<leftFov> Н/Д <PhotoOverlay> не поддерживается
<LinearRing> да
<LineString> да
<LineStyle> да
<Link> да
<linkDescription> нет
<linkName> нет
<linkSnippet> нет
<listItemType> Н/Д <ListStyle> не поддерживается
<ListStyle> нет
<Location> Н/Д <Model> не поддерживается
<Lod> да
<longitude> да
<LookAt> нет
<maxAltitude> да
<maxFadeExtent> да
<maxHeight> Н/Д <PhotoOverlay> не поддерживается
<maxLodPixels> да
<maxSessionLength> нет
<maxWidth> Н/Д <PhotoOverlay> не поддерживается
<message> нет
<Metadata> нет устаревшая возможность
<minAltitude> да
<minFadeExtent> да
<minLodPixels> да
<minRefreshPeriod> нет <NetworkLink>
<Model> нет
<MultiGeometry> частично прорисовывается, но отображается как отдельные объекты на панели слева
<name> да
<near> Н/Д <PhotoOverlay> не поддерживается
<NetworkLink> да  
<NetworkLinkControl> частично частично поддерживаются <Update> и <expires>. API игнорирует настройки окончания срока действия в заголовках HTTP, но использует те, что указаны в KML. В отсутствие настроек окончания срока действия или в течение периода достоверности Google Maps могут кэшировать данные, полученные из Интернета за неопределенный период. Принудительное получение данных из Интернета можно инициировать переименованием документа и его получением под другим URL-адресом, либо явным образом указав в документе соответствующие настройки окончания срока действия.
<north> да
<open> да
<Orientation> Н/Д <Model> не поддерживается
<outerBoundaryIs> да Неявным образом из порядка <LinearRing>
<outline> да
<overlayXY> нет
<Pair> Н/Д <StyleMap> не поддерживается
<phoneNumber> нет
<PhotoOverlay> нет
<Placemark> да
<Point> да
<Polygon> да
<PolyStyle> да
<range> да
<refreshInterval> частично только в <Link>; не в <Icon>
<refreshMode> да HTTP-заголовки не поддерживаются для режима "onExpire". См. примечание выше для <Update> и <expires>.
<refreshVisibility> нет
<Region> да
<ResourceMap> Н/Д <Model> не поддерживается
<rightFov> Н/Д <PhotoOverlay> не поддерживается
<roll> Н/Д <Camera> и <Model> не поддерживаются
<rotation> нет
<rotationXY> нет
<Scale> Н/Д <Model> не поддерживается
<scale> нет
<Schema> нет
<SchemaData> нет
<ScreenOverlay> да нельзя вращать
<screenXY> нет
<shape> Н/Д <PhotoOverlay> не поддерживается
<SimpleData> Н/Д <SchemaData> не поддерживается
<SimpleField> Н/Д <Schema> не поддерживается
<size> да
<Snippet> да
<south> да
<state> Н/Д <ListStyle> не поддерживается
<Style> да
<StyleMap> нет не поддерживаются эффекты наведения курсора (выделения)
<styleUrl> Н/Д <StyleMap> не поддерживается
<targetHref> частично поддерживается в <Update>, но не в <Alias>
<tessellate> нет
<text> да замена $[geDirections] не поддерживается
<textColor> нет
<tileSize> Н/Д <PhotoOverlay> не поддерживается
<tilt> нет
<TimeSpan> нет
<TimeStamp> нет
<topFov> Н/Д <PhotoOverlay> не поддерживается
<Update> частично только изменения стиля, но не <Create> или <Delete>
<Url> да устаревшая возможность
<value> да
<viewBoundScale> нет
<viewFormat> нет
<viewRefreshMode> частично поддерживается "onStop"
<viewRefreshTime> да
<ViewVolume> Н/Д <PhotoOverlay> не поддерживается
<visibility> частично да на <Folder> – дочерние метки наследуют их видимость
<w> да устаревшая возможность
<west> да
<when> Н/Д <TimeStamp> не поддерживается
<width> да
<x> да устаревшая возможность
<y> да устаревшая возможность

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

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