Все готово!

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

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

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

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

Подсказки мест для адресов и поисковых запросов

Введение

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

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

Перед использованием библиотеки Places в Google Maps JavaScript API убедитесь, что в консоли Google API Console включен Google Places API Web Service в том же проекте, который вы установили для Google Maps JavaScript API.

Чтобы просмотреть список включенных API:

  1. Перейдите в Google API Console.
  2. Нажмите кнопку Select a project, затем выберите тот же проект, который вы установили для Google Maps JavaScript API, и нажмите Open.
  3. В списке API на странице Dashboard найдите Google Places API Web Service.
  4. Если этот API присутствует в списке – все установлено. Если этого API в списке нет, включите его:
    1. Вверху страницы выберите ENABLE API, чтобы открыть вкладку Library. В качестве альтернативы можно выбрать пункт Library в меню слева.
    2. Найдите Google Places API Web Service и выберите его из списка результатов.
    3. Нажмите ENABLE. Когда процесс завершится, Google Places API Web Service появится в списке API на панели Dashboard.

Загрузка библиотеки

Служба Places – самодостаточная библиотека, используемая отдельно от основного кода Maps JavaScript API. Чтобы использовать функции из этой библиотеки, необходимо предварительно загрузить ее с помощью параметра libraries в загрузочном URL-адресе Google Maps API:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

Подробные сведения см. в документе Обзор библиотек.

Правила и ограничения на использование

Квоты

На использование Google Places API Web Service и подсказок мест Google установлена единая квота, описанная на странице Ограничения на использование для Google Places API Web Service. Ограничения на использование также могут применяться при работе с Places Library in the Google Maps JavaScript API. Ежедневное использование рассчитывается как сумма запросов на стороне клиента и на стороне сервера.

Политики

Служба Places Library in the Google Maps JavaScript API должна использоваться в соответствии с правилами, описанными для Google Places API Web Service.

Краткий обзор классов

API содержит два типа виджетов подсказки мест, которые можно добавлять с помощью классов Autocomplete и SearchBox соответственно. Кроме того, вы можете использовать класс AutocompleteService для получения результатов подсказки мест программным способом.

Ниже приведена сводная информация по доступным классам:

  • Autocomplete – на веб-страницу добавляется поле текстового ввода и отслеживаются символы, вводимые в это поле. Когда пользователь начинает вводить текст, функция подсказки мест выводит подсказки в виде выпадающего списка. Когда пользователь выбирает место из списка, информация о соответствующем месте возвращается в объект подсказки мест, и ваше приложение может получить эту информацию. Подробные сведения см. ниже.
  • SearchBox – добавляет на веб-страницу поле текстового ввода, примерно так же, как и класс Autocomplete. Их отличия описаны ниже.
    • Основное отличие заключается в том, какие результаты выводятся в выпадающем списке. SearchBox выводит расширенный список подсказок, в который могут входить как места (в соответствии с определением Google Places API), так и предлагаемые фразы для поиска. Например, если пользователь вводит текст "Пицца в Северном", в списке подсказок может быть выведена фраза "пицца в Северном Измайлово", а также названия различных пиццерий.
    • Класс SearchBox имеет меньше параметров, ограничивающих результаты поиска, чем класс Autocomplete. В первом случае вы можете указать определенные границы (LatLngBounds) для ограничения результатов поиска. Во втором случае помимо границ вы можете ограничить результаты поиска определенной страной и определенным типом мест.
    Подробные сведения см. ниже.
  • Вы можете создать объект AutocompleteService для получения подсказок программным способом. Используйте вызов метода getPlacePredictions() для получения списка совпадающих мест или вызов метода getQueryPredictions() для получения списка совпадающих мест и предлагаемых фраз поиска. Примечание. Объект AutocompleteService не добавляет элементы управления пользовательского интерфейса. Вместо этого вышеуказанные методы возвращают массив объектов подсказок. Каждый объект подсказок содержит текст подсказки, а также справочную информацию и данные о том, как результат соответствует вводимым пользователем данным. Подробные сведения см. ниже.

Далее на этой странице приведены примеры и подробные данные по использованию вышеуказанных классов.

Использование подсказки мест

В этом видеоролике рассказывается об использовании виджета подсказки мест Autocomplete, а также демонстрируются примеры приложений и кода.

Пример: подсказки мест для форм адресов

Содержит ли ваше приложение форму адреса, например, адрес доставки заказа через Интернет, адрес для выставления счета при оплате кредитной картой или форму заказа такси? Функция подсказки мест может упростить ввод данных.

На рисунке 1 показано текстовое поле подсказки мест и список подсказок мест, отображаемый при вводе поискового запроса пользователем:

Текстовое поле подсказки мест и список подсказок мест, отображаемый при вводе поискового запроса пользователем.
Рисунок 1: Текстовое поле подсказки мест и список подсказок

Когда пользователь выбирает адрес из выпадающего списка, ваше приложение может заполнить форму адреса:

Заполненная форма адреса.
Рисунок 2: Заполненная форма адреса

Посмотрите, как работает заполнение формы адреса: Просмотр примера (places-autocomplete-addressform.html).

Далее вы можете узнать, как добавить функцию подсказки мест на веб-страницу.

Пример: подсказки мест для элементов управления картой

Функция подсказки мест применяется для запрашивания информации у пользователей в приложении с картой, как показано на рисунке 3.

Текстовое поле подсказки мест, показывающее частичный поисковый запрос города и соответствующие места.
Рисунок 3: Текстовое поле подсказки мест и список подсказок

Посмотрите, как это работает: Просмотр примера (places-autocomplete-hotelsearch.html).

Далее вы можете узнать, как добавить функцию подсказки мест на веб-страницу.

Добавление подсказки мест для мест и адресов

Класс Autocomplete создает на вашей веб-странице поле текстового ввода, выдает подсказки мест в списке пользовательского интерфейса и возвращает данные о месте в ответ на запрос getPlace(). Каждая запись в списке соответствует одному месту (в соответствии с определением Google Places API).

Конструктор Autocomplete принимает два аргумента:

  • HTML-элемент input типа text. Это поле ввода, которое отслеживает служба подсказки мест, и к которому она прикрепляет результаты.
  • Аргумент options, который может содержать следующие свойства:
    • Массив types, указывающий явный тип или коллекцию типов из числа перечисленных ниже. Если опустить этот параметр, в результатах поиска возвращаются все типы. Обычно разрешается только один тип. Исключение составляют типы geocode и establishment, которые можно указывать вместе, однако это равносильно отсутствию указанных типов. Поддерживаются следующие типы:
      • geocode – указывает службе Places, что возвращать нужно только результаты геокодирования, а не названия организаций.
      • address – ограничивает результаты поиска службы Places геокодами с точными адресами.
      • establishment – ограничивает результаты поиска службы Places организациями.
      • (regions) – групповое указание типа, которое ограничивает результаты поиска местами, соответствующими указанным ниже типам:
        • locality,
        • sublocality,
        • postal_code,
        • country,
        • administrative_area1,
        • administrative_area2.
      • (cities) – групповое указание типа, которое ограничивает результаты поиска местами с заданным значением locality или administrative_area3.
    • bounds – объект google.maps.LatLngBounds, указывающий область для поиска мест. В результатах отдается предпочтение местам из этой области, но они не ограничиваются этими местами.
    • componentRestrictions – может использоваться для ограничения результатов определенными группами. В настоящее время в качестве значения параметра componentRestrictions можно использовать только страны. Страна должна указываться в виде кода страны из двух символов, совместимого со стандартом ISO 3166-1 Alpha-2.
    • placeIdOnly можно использовать для того, чтобы дать виджету Autocomplete команду извлекать только идентификаторы мест. При вызове метода getPlace() для объекта Autocomplete, полученный PlaceResult будет иметь следующий набор свойств: place id, types и name. Возвращенный идентификатор места можно использовать в обращениях к службам Places, Geocoding, Directions и Distance Matrix.

Установка предпочтений и границ области поиска для подсказки мест

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

  • Установить границы при создании объекта Autocomplete.
  • Изменить границы существующего объекта Autocomplete.
  • Установить в качестве границы область просмотра карты.
  • Ограничить поиск определенной страной.

Более подробная информация приведена в разделах ниже.

Установка границ при создании объекта Autocomplete

В примере ниже параметры bounds и types используются для поиска заведений типа establishment (организация), преимущественно расположенных в указанной географической области.

var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902, 151.1759),
  new google.maps.LatLng(-33.8474, 151.2631));

var input = document.getElementById('searchTextField');
var options = {
  bounds: defaultBounds,
  types: ['establishment']
};

autocomplete = new google.maps.places.Autocomplete(input, options);

Изменение границ существующего объекта Autocomplete

Вызовите метод setBounds(), чтобы изменить область поиска для существующего объекта Autocomplete.

// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}

Просмотр примера (places-autocomplete-addressform.html).

Установка в качестве границы области просмотра карты

Используйте метод bindTo(), чтобы установить предпочтение для результатов, расположенных в области просмотра карты, даже во время изменения этой области.

autocomplete.bindTo('bounds', map);

Просмотр примера (places-autocomplete.html).

Ограничение поиска определенной страной

Используйте параметр componentRestrictions, чтобы ограничить определенной страной поиск, выполняемый функцией подсказки мест. В следующем примере кода результаты поиска ограничиваются городами Франции.

var input = document.getElementById('searchTextField');
var options = {
  types: ['(cities)'],
  componentRestrictions: {country: 'fr'}
};

autocomplete = new google.maps.places.Autocomplete(input, options);

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

// Set the country restriction based on user input.
// Also center and zoom the map on the given country.
function setAutocompleteCountry() {
  var country = document.getElementById('country').value;
  if (country == 'all') {
    autocomplete.setComponentRestrictions([]);
    map.setCenter({lat: 15, lng: 0});
    map.setZoom(2);
  } else {
    autocomplete.setComponentRestrictions({'country': country});
    map.setCenter(countries[country].center);
    map.setZoom(countries[country].zoom);
  }
  clearResults();
  clearMarkers();
}

Просмотр примера (places-autocomplete-hotelsearch.html).

Настройка замещающего текста для подсказки мест

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

<input id="searchTextField" type="text" size="50" placeholder="Anything you want!">

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

Получение информации о месте при подсказке мест

Когда пользователь выбирает место из подсказок, прикрепленных к текстовому полю подсказки мест, служба создает событие place_changed. Вы можете вызвать метод getPlace() для объекта Autocomplete, чтобы получить объект PlaceResult.

По умолчанию функция подсказки мест выдает полный адрес в виде одной строки текста. Для формы адреса более удобно получать адрес в структурированном формате. Вы можете использовать метод Autocomplete.getPlace() для получения полной информации по каждой подсказке функции подсказки мест, включая структурированный адрес.

Если пользоваться вариантом placeIdOnly, объект Autocomplete не получит подробных сведений о месте, поскольку объект PlaceResult имеет только следующий набор свойств: place_id, types, name.

Чтобы получить подробные сведения о месте, получите объект PlaceResult путем вызова метода getPlace() на объекте Autocomplete, когда происходит событие place_changed. После этого можно использовать геокодирование для получения координат местоположения, а также службу Places, чтобы получить больше сведений о выбранном месте.

Дополнительную информацию об объекте PlaceResult см. в документации по результатам запроса данных о месте.

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

function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}

Просмотр примера (places-autocomplete-addressform.html).

SearchBox позволяет пользователям выполнять текстовый поиск в географическом контексте, например "пицца в Химках" или "обувной магазин на улице Ленина". Вы можете прикрепить объект SearchBox к текстовому полю, и во время ввода текста служба будет возвращать подсказки в виде выпадающего списка.

SearchBox выводит расширенный список подсказок, в который могут входить как места (в соответствии с определением Google Places API), так и предлагаемые фразы для поиска. Например, если пользователь вводит текст "Пицца в Северном", в списке подсказок может быть выведена фраза "пицца в Северном Измайлово", а также названия различных пиццерий. Когда пользователь выбирает место из списка, информация о соответствующем месте возвращается в объект SearchBox, откуда она может быть получена вашим приложением.

Конструктор SearchBox принимает два аргумента:

  • HTML-элемент input типа text. Это поле ввода, которое отслеживает служба SearchBox, и к которому она прикрепляет результаты.
  • Аргумент options, который может содержать свойство bounds. bounds – объект google.maps.LatLngBounds, указывающий область для поиска мест. В результатах отдается предпочтение местам из этой области, но они не ограничиваются этими местами.

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

var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902, 151.1759),
  new google.maps.LatLng(-33.8474, 151.2631));

var input = document.getElementById('searchTextField');

var searchBox = new google.maps.places.SearchBox(input, {
  bounds: defaultBounds
});

Изменение области поиска для объекта SearchBox

Чтобы изменить область поиска для существующего объекта SearchBox, нужно вызвать метод setBounds() для объекта SearchBox и передать в него соответствующий объект LatLngBounds.

Просмотр примера (places-searchbox.html).

Получение информации объекта SearchBox

Когда пользователь выбирает место из подсказок, прикрепленных к полю поиска, служба создает событие places_changed. Вы можете вызвать метод getPlace() для объекта SearchBox, чтобы получить массив, содержащий несколько подсказок, каждая из которых представляет собой объект PlaceResult.

Дополнительную информацию об объекте PlaceResult см. в документации по результатам запроса данных о месте.

// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
  var places = searchBox.getPlaces();

  if (places.length == 0) {
    return;
  }

  // Clear out the old markers.
  markers.forEach(function(marker) {
    marker.setMap(null);
  });
  markers = [];

  // For each place, get the icon, name and location.
  var bounds = new google.maps.LatLngBounds();
  places.forEach(function(place) {
    if (!place.geometry) {
      console.log("Returned place contains no geometry");
      return;
    }
    var icon = {
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25)
    };

    // Create a marker for each place.
    markers.push(new google.maps.Marker({
      map: map,
      icon: icon,
      title: place.name,
      position: place.geometry.location
    }));

    if (place.geometry.viewport) {
      // Only geocodes have viewport.
      bounds.union(place.geometry.viewport);
    } else {
      bounds.extend(place.geometry.location);
    }
  });
  map.fitBounds(bounds);
});

Просмотр примера (places-searchbox.html).

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

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

Иллюстрация классов CSS для виджетов подсказки мест и поля поиска
Классы CSS для виджетов подсказки мест и поля поиска
Класс CSS Описание
pac-container Графический элемент со списком подсказок, возвращаемых службой Place Autocomplete. Этот выпадающий список отображается под виджетом Autocomplete или SearchBox.
pac-icon Значок, отображаемый слева от каждого элемента в списке подсказок.
pac-item Элемент в списке подсказок, предоставляемых виджетом Autocomplete или SearchBox.
pac-item:hover Отображение элемента при наведении курсора мыши.
pac-item-selected Отображение элемента при его выборе с помощью клавиатуры. Примечание. Выбранные элементы будут входить в этот класс и в класс pac-item.
pac-item-query Часть элемента pac-item, представляющая собой основную часть подсказки. Для географических местоположений содержит название места (например, "Москва") или название улицы и номер дома (например, Ленинский проспект, 21). Для текстового поиска (например, "пицца в Химках") содержит полный текст запроса. По умолчанию элемент pac-item-query имеет черный цвет. Если в элементе pac-item имеется дополнительный текст, он не входит в состав элемента pac-item-query и наследует стиль от элемента pac-item. По умолчанию он имеет серый цвет. Обычно дополнительный текст представляет собой адрес.
pac-matched Часть возвращаемой подсказки, соответствующая введенным данным. По умолчанию этот совпадающий текст выделяется полужирным шрифтом. Совпадающий текст может находиться в любой части элемента pac-item. Он не обязательно должен быть частью элемента pac-item-query и может частично входить в состав элемента pac-item-query, а частично в остальной текст элемента pac-item.

Получение подсказок от службы подсказки мест

Для получения подсказок программным способом нужно использовать класс AutocompleteService. Объект AutocompleteService не добавляет элементы управления пользовательского интерфейса. Вместо этого она возвращает массив объектов подсказок, каждый объект в котором содержит текст подсказки, а также справочную информацию и данные о том, как результат соответствует вводимым пользователем данным. Это полезно, если вы хотите иметь больше контроля над пользовательским интерфейсом, чем обеспечивают виджеты Autocomplete и SearchBox, описанные выше.

Служба AutocompleteService использует следующие методы:

  • getPlacePredictions() – возвращает подсказки мест. Примечание. В соответствии с определением Google Places API, "местом" может быть заведение, географическая точка или достопримечательность.
  • getQueryPredictions() – возвращает расширенный список подсказок, в который могут входить как места (в соответствии с определением Places API), так и предлагаемые фразы для поиска. Например, если пользователь вводит текст "Пицца в Северном", в списке подсказок может быть выведена фраза "пицца в Северном Измайлово", а также названия различных пиццерий.

Оба вышеуказанных метода возвращают массив из пяти объектов подсказок, имеющих следующую форму:

  • description – совпавшая подсказка.
  • id – содержит уникальный идентификатор места. Этот идентификатор не позволяет получить информацию о месте, но с его помощью можно объединять данные об этом месте и распознавать его в разных поисковых запросах. Поскольку идентификаторы могут со временем изменяться, рекомендуется сравнивать сохраненный идентификатор места с идентификатором, возвращенным в последующих ответах на запросы данных о том же объекте, и при необходимости обновлять его. Примечание. Идентификатор id заменен идентификатором place_id, как описано в уведомлении о прекращении использования на этой странице.
  • matched_substrings – содержит набор подстрок в описании, совпадающих с элементами введенных пользователем данных. Это поле применяется для выделения этих подстрок в вашем приложении. Во многих случаях запрос выглядит как подстрока поля description.
    • length – длина подстроки.
    • offset – смещение символа, измеряемое от начала строки description, в которой появляется совпадающая подстрока.
  • place_id – уникальный текстовый идентификатор места. Чтобы извлечь информацию о месте, передайте этот идентификатор в поле placeId запроса данных о месте. Узнайте подробнее о том, как ссылаться на место по его идентификатору.
  • reference – содержит токен, который в дальнейшем можно использовать для запроса дополнительных данных. Этот токен может отличаться от значения параметра reference, используемого в запросе данных. Сохраненные ссылки на места рекомендуется регулярно обновлять. Хотя токен однозначно определяет место, обратное утверждение неверно. Место может иметь несколько токенов с действительными ссылками. Примечание. Свойство reference заменено свойством place_id, как описано в уведомлении о прекращении использования свойства на этой странице.
  • terms – массив, содержащий элементы запроса. В запросах места каждый элемент обычно представляет собой часть адреса.
    • offset – смещение символа, измеряемое от начала строки description, в которой появляется совпадающая подстрока.
    • value – совпадающий элемент запроса.

Пример кода ниже выполняет запрос подсказки для фразы "пицца в" и отображает в списке результаты этого запроса.

// This example retrieves autocomplete predictions programmatically from the
// autocomplete service, and displays them as an HTML list.

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

function initService() {
  var displaySuggestions = function(predictions, status) {
    if (status != google.maps.places.PlacesServiceStatus.OK) {
      alert(status);
      return;
    }

    predictions.forEach(function(prediction) {
      var li = document.createElement('li');
      li.appendChild(document.createTextNode(prediction.description));
      document.getElementById('results').appendChild(li);
    });
  };

  var service = new google.maps.places.AutocompleteService();
  service.getQueryPredictions({ input: 'pizza near Syd' }, displaySuggestions);
}
<div id="right-panel">
  <p>Query suggestions for 'pizza near Syd':</p>
  <ul id="results"></ul>
</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;
}
#right-panel {
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#right-panel select, #right-panel input {
  font-size: 15px;
}

#right-panel select {
  width: 100%;
}

#right-panel i {
  font-size: 12px;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initService"
    async defer></script>
// This example retrieves autocomplete predictions programmatically from the
// autocomplete service, and displays them as an HTML list.

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

function initService() {
  var displaySuggestions = function(predictions, status) {
    if (status != google.maps.places.PlacesServiceStatus.OK) {
      alert(status);
      return;
    }

    predictions.forEach(function(prediction) {
      var li = document.createElement('li');
      li.appendChild(document.createTextNode(prediction.description));
      document.getElementById('results').appendChild(li);
    });
  };

  var service = new google.maps.places.AutocompleteService();
  service.getQueryPredictions({ input: 'pizza near Syd' }, displaySuggestions);
}

Просмотр примера (places-queryprediction.html).

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

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