Все готово!

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

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

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

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

Карты для зарегистрированных пользователей

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

Обзор

Каждый посетитель вашего сайта будет видеть карту Google Maps, настроенную специально для него. Если пользователь вошел в систему, используя свою учетную запись Google, сохраненные им места, домашние и рабочие адреса, а также прочие сведения о местоположениях встраиваются непосредственно в отображаемую карту. Это также означает сохранение действий пользователя на карте (например, отметки местоположений звездочкой), что упрощает просмотр Google Maps на стационарном компьютере или мобильном устройстве, а также других карт Google Maps, которые пользователь просматривает в Интернете.

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

Полный пример кода приведен ниже.

Включение входа в систему

Чтобы включить вход в систему на карте, созданной с помощью Google Maps JavaScript API, нужно загрузить API версии 3.18 или выше с дополнительным параметром signed_in=true.

<script
  src="https://maps.googleapis.com/maps/api/js?callback=initMap&signed_in=true&key=YOUR_API_KEY" async defer>
</script>

В правом верхнем углу карты отображается поле входа или ваш аватар в Google.

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

Сохранение с использованием атрибутов

Вы можете помочь пользователям запомнить наиболее важные для них места, разрешив сохранение мест на Google Maps. Сохраненные места будут отображаться на других картах Google Maps при их просмотре на веб-страницах или мобильных устройствах. Когда пользователь сохраняет место с помощью SaveWidget или InfoWindow, вы можете добавить в него данные об авторстве и ссылки на свое приложение.

Вы можете добавлять данные об авторстве при сохранении двумя способами:

  • Добавьте к маркеру информацию о месте, позволяющую выполнять сохранение из объекта InfoWindow, прикрепленного к этому маркеру.
  • Создайте собственный виджет SaveWidget.

Впоследствии для доступа к сохраненному месту достаточно будет выбрать его на карте.

Сохранение в Google Maps с помощью информационного окна

Добавьте к маркеру информацию о месте, чтобы включить элемент управления Save to Google Maps в стандартное информационное окно. Этот элемент управления будет автоматически добавляться во все информационные окна, связанные с этим маркером. Также вы можете указать при сохранении ссылку на свое приложение для напоминания пользователям об источнике данных.

Включение возможности сохранения в Google Maps из информационного окна:

  1. Создайте новый объект Marker.
  2. В параметрах MarkerOptions укажите свойства map, place и attribution. Обратите внимание, что свойство position можно не использовать, если указано свойство place.
  3. В объекте place укажите свойство location и один из следующих параметров:
    • placeId для уникальной идентификации места. Узнайте подробнее о том, как ссылаться на место по его идентификатору.
    • Текстовую строку query для поиска мест рядом с местоположением. Строки поисковых запросов должны быть максимально конкретными. Например: 'Измайловский парк Москва'.
  4. В объекте attribution укажите следующее:
    • Источник (source) сохранения. Обычно это название вашего сайта или приложения.
    • Необязательное свойство webUrl, содержащее ссылку на ваш сайт.
    • Необязательное свойство iosDeepLinkId (указывается как схема URL), отображается вместо webUrl при просмотре в iOS.
  5. Создайте новый объект InfoWindow.
  6. Добавьте блок прослушивания событий, открывающий объект InfoWindow при нажатии на объект Marker.

Это включит возможность сохранения в Google Maps при нажатии маркера.

Ниже приведен пример, в котором текстовая строка query используется для поиска места.

Полный пример кода приведен ниже.

// [START script-body]
      // When you add a marker using a Place instead of a location, the Maps
      // API will automatically add a 'Save to Google Maps' link to any info
      // window associated with that marker.
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 17,
          center: {lat: -33.8666, lng: 151.1958}
        });

        var marker = new google.maps.Marker({
          map: map,
          // Define the place with a location, and a query string.
          place: {
            location: {lat: -33.8666, lng: 151.1958},
            query: 'Google, Sydney, Australia'

          },
          // Attributions help users find your site again.
          attribution: {
            source: 'Google Maps JavaScript API',
            webUrl: 'https://developers.google.com/maps/'
          }
        });

        // Construct a new InfoWindow.
        var infoWindow = new google.maps.InfoWindow({
          content: 'Google Sydney'
        });

        // Opens the InfoWindow when marker is clicked.
        marker.addListener('click', function() {
          infoWindow.open(map, marker);
        });
      }
// [END script-body]

Сохранение в Google Maps с помощью виджета SaveWidget

Вы можете использовать элемент управления SaveWidget для создания собственного пользовательского интерфейса сохранения мест. Используя SaveWidget, вы можете указать дополнительные данные об авторстве, которые напомнят пользователю об источнике данных и позволят ему легко вернуться в ваше приложение.

Для добавления виджета SaveWidget в приложение вы должны выполнить следующие действия.

  1. Добавьте элемент div на страницу, содержащую карту Google Maps.
  2. Отметьте сохраняемое место маркером, чтобы пользователи понимали, какие места они сохраняют.
  3. Создайте объект SaveWidgetOptions, включающий литералы объектов place и attribution.
  4. Создайте новый объект SaveWidget, передайте в него элемент div и добавленные параметры.

Ниже приведен пример виджета, сохраняющего данные об офисе Google в Сиднее. В этом примере мы создали элемент div за пределами границ карты и использовали Google Maps JavaScript API, чтобы добавить этот элемент div в качестве элемента управления.

Полный пример кода приведен ниже.

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Save Widget</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      /* 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;
      }
      #save-widget {
        width: 300px;
        box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
        background-color: white;
        padding: 10px;
        font-family: Roboto, Arial;
        font-size: 13px;
        margin: 15px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="save-widget">
      <strong>Google Sydney</strong>
      <p>We’re located on the water in Pyrmont, with views of the Sydney Harbour Bridge, The
          Rocks and Darling Harbour. Our building is the greenest in Sydney. Inside, we have a
          "living wall" made of plants, a tire swing, a library with a nap pod and some amazing
          baristas.</p>
    </div>
    <script>
      /*
       * This sample uses a custom control to display the SaveWidget. Custom
       * controls can be used in place of the default Info Window to create a
       * custom UI.
       * This sample uses a Place ID to reference Google Sydney. Place IDs are
       * stable values that uniquely reference a place on a Google Map and are
       * documented in detail at:
       * https://developers.google.com/maps/documentation/javascript/places#placeid
       */

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 17,
          center: {lat: -33.8666, lng: 151.1958},
          mapTypeControlOptions: {
            mapTypeIds: [
              'roadmap',
              'satellite'
            ],
            position: google.maps.ControlPosition.BOTTOM_LEFT
          }
        });

        var widgetDiv = document.getElementById('save-widget');
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(widgetDiv);

        // Append a Save Control to the existing save-widget div.
        var saveWidget = new google.maps.SaveWidget(widgetDiv, {
          place: {
            // ChIJN1t_tDeuEmsRUsoyG83frY4 is the place Id for Google Sydney.
            placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4',
            location: {lat: -33.866647, lng: 151.195886}
          },
          attribution: {
            source: 'Google Maps JavaScript API',
            webUrl: 'https://developers.google.com/maps/'
          }
        });

        var marker = new google.maps.Marker({
          map: map,
          position: saveWidget.getPlace().location
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap">
    </script>
  </body>
</html>

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

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