Все готово!

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

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

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

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

Слой автомобильного, общественного и велосипедного транспорта

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

  1. Слой дорожной обстановки
  2. Слой общественного транспорта
  3. Слой велосипедного транспорта

Слой дорожной обстановки

Google Maps JavaScript API позволяет добавлять на карты информацию о дорожной обстановке в реальном времени (если поддерживается) с помощью объекта TrafficLayer. Информация о дорожной обстановке предоставляется на момент отправки запроса.

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

  var trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.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: 13,
    center: {lat: 34.04924594193164, lng: -118.24104309082031}
  });

  var trafficLayer = new google.maps.TrafficLayer();
  trafficLayer.setMap(map);
}

Просмотр примера слоя дорожной обстановки

Слой общественного транспорта

Google Maps JavaScript API позволяет отображать на карте сеть городского общественного транспорта, используя объект TransitLayer. Когда слой общественного транспорта активирован и в центре карты находится город, для которого имеется соответствующая информация, основные маршруты общественного транспорта отображаются на карте в виде толстых цветных линий. Цвет линии зависит от информации, предоставленной оператором маршрута общественного транспорта. При активации слоя общественного транспорта изменяется стиль базовой карты, чтобы маршруты общественного транспорта были более заметны.

Данные по общественному транспорту доступны не для всех городов. Перечень городов, для которых доступна информация по общественного транспорту, можно найти в этом списке.

Если вы представляете государственную службу общественного транспорта в вашем городе и хотите добавить свои данные в список, посетите сайт партнерской программы Google Transit.

В следующем примере показан слой общественного транспорта на карте Лондона (Великобритания):

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

  var transitLayer = new google.maps.TransitLayer();
  transitLayer.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: 13,
    center: {lat: 51.501904, lng: -0.115871}
  });

  var transitLayer = new google.maps.TransitLayer();
  transitLayer.setMap(map);
}

Просмотр примера слоя общественного транспорта

Слой велосипедного транспорта

Google Maps JavaScript API позволяет добавлять на карты информацию для велосипедистов с помощью объекта BicyclingLayer. BicyclingLayer отображает поверх карты слой велосипедных дорожек, рекомендуемых велосипедных маршрутов и других элементов, относящихся к движению на велосипеде. Кроме того, этот слой изменяет стиль базовой карты, выделяя улицы, на которых можно передвигаться на велосипеде, относительно улиц, не подходящих для такого движения.

В следующем примере показан слой велосипедного транспорта на карте Кембриджа (штат Массачусетс, США):

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

  var bikeLayer = new google.maps.BicyclingLayer();
  bikeLayer.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: 14,
    center: {lat: 42.3726399, lng: -71.1096528}
  });

  var bikeLayer = new google.maps.BicyclingLayer();
  bikeLayer.setMap(map);
}

Просмотр примера слоя велосипедного транспорта

Темно-зеленые линии означают велосипедные маршруты. Светло-зеленые линии означают улицы с велосипедными дорожками. Пунктирные линии означают другие улицы или маршруты, рекомендованные для велосипедистов.

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

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