Все готово!

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

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

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

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

Библиотека Places

Обзор

Функции библиотеки Google Places JavaScript Library позволяют приложению искать места (определяемые в этом API как заведения, географические пункты или достопримечательности) в определенной области, например, в границах карты или вокруг определенной точки.

Google Places 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.

Поиск мест

С помощью службы Places можно выполнять четыре вида поиска:

  • Поиск мест поблизости – возвращает список близлежащих мест в зависимости от местоположения пользователя.
  • Текстовый поиск – возвращает список близлежащих мест в зависимости от введенной текстовой строки, например: "Пицца".
  • Массовый поиск – возвращает большой список мест в указанном радиусе поиска, но с меньшим уровнем детализации по сравнению с поиском мест поблизости и текстовым поиском.
  • Запросы данных о месте – возвращают более подробную информацию о конкретном месте, в том числе отзывы пользователей.

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

Поиск мест поблизости

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

  • параметр LatLngBounds;
  • область внутри окружности, определяемой свойством location, которое задает центр окружности в виде объекта LatLng, и радиусом окружности в метрах.

Поиск мест поблизости инициируется посредством вызова метода nearbySearch() объекта PlacesService, который возвращает массив объектов PlaceResult. Начиная с версии 3.9, метод nearbySearch() заменяет метод search().

service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);

Этот метод принимает запрос со следующими полями:

  • Один из следующих вариантов:
    • bounds – объект google.maps.LatLngBounds, определяющий прямоугольную область поиска; или
    • поля location и radius, первое из которых содержит объект google.maps.LatLng, а второе – обычное целое число, представляющее радиус окружности в метрах. Максимальный допустимый радиус составляет 50 000 метров. Обратите внимание, что при rankBy со значением DISTANCE, необходимо указать location, но нельзя указать radius и bounds.
  • keyword (необязательное) – слово, по которому ведется поиск во всех доступных полях, включая название, тип, адрес, отзывы пользователей и сторонний контент.
  • minPriceLevel и maxPriceLevel (необязательные) – ценовой диапазон, ограничивающий результаты поиска. Допускаются значения от 0 (бесплатные) до 4 (самые дорогие) включительно.
  • name (необязательное) – слово, по которому ведется поиск в названиях мест. В результатах будут показаны только те места, названия которых содержат переданное значение name. Следует помнить, что у мест могут быть и другие названия, помимо официальных. API попытается сопоставить переданное значение name со всеми этими названиями. Поэтому в результатах поиска могут появляться места, названия которых, на первый взгляд, не соответствуют запросу.
  • openNow (необязательное) – логическое значение, указывающее, что служба Places должна ограничить результаты поиска только теми организациями либо заведениями, которые открыты в момент отправки запроса. Если в запросе указан этот параметр, то все места, для которых в базе данных Google Places не указаны часы работы, игнорируются. Если установить для поля openNow значение false, оно будет игнорироваться.
  • rankBy (необязательное) – указывает порядок вывода результатов. Возможны следующие значения:
    • google.maps.places.RankBy.PROMINENCE (по умолчанию). Результаты сортируются по известности. Приоритет в рейтинге отдается более известным местам, находящимся в заданной области, перед менее известными местами поблизости. На известность влияет рейтинг места в индексе Google, общая популярность и другие факторы. Если указано значение google.maps.places.RankBy.PROMINENCE, параметр radius является обязательным.
    • google.maps.places.RankBy.DISTANCE. Результаты сортируются в порядке близости к точке, заданной в параметре location (обязательный). Обратите внимание, что нельзя указать настраиваемый bounds или radius, если указано RankBy.DISTANCE. Когда указывается RankBy.DISTANCE, одно из следующий полей становится обязательным: keyword, name или type.
  • type – ограничивает результаты поиска только теми местами, тип которых соответствует хотя бы одному из указанных. Можно указать только один тип (если указано несколько типов, все типы, кроме первого, игнорируются). См. список поддерживаемых типов.
  • types (устарело) – массив, содержащий один или несколько поддерживаемых типов. Служба возвратит лучший набор результатов для заданного набора типов.

Также необходимо передать метод обратного вызова nearbySearch() для обработки объекта результатов и ответа google.maps.places.PlacesServiceStatus.

var map;
var service;
var infowindow;

function initialize() {
  var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);

  map = new google.maps.Map(document.getElementById('map'), {
      center: pyrmont,
      zoom: 15
    });

  var request = {
    location: pyrmont,
    radius: '500',
    types: ['store']
  };

  service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);
}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      var place = results[i];
      createMarker(results[i]);
    }
  }
}

Просмотр примера (place-search.html)

Текстовый поиск

Служба текстового поиска Google Places – это веб-служба, которая возвращает информацию о местах на основе введенной фразы, например "пиццерия Химки" или "магазины обуви рядом с г. Иваново". Служба возвращает список мест, соответствующий текстовой строке запроса и установленному предпочтительному местоположению. Ответ на поисковый запрос будет содержать список мест. Чтобы получить подробную информацию о любом из них, можно отправить запрос данных о месте.

Текстовый поиск запускается посредством вызова метода textSearch() службы PlacesService.

service = new google.maps.places.PlacesService(map);
service.textSearch(request, callback);

Этот метод принимает запрос со следующими полями:

  • query (обязательное) – текстовая строка, по которой выполняется поиск, например "ресторан". Служба Places возвращает подходящие варианты на основе этой строки. Результаты сортируются по релевантности. Этот параметр не обязателен, если в поисковом запросе также используется параметр type.
  • Дополнительно:
    • openNow – логическое значение, указывающее, что служба Places должна ограничить результаты поиска только теми организациями либо заведениями, которые открыты в момент отправки запроса. Если в запросе указан этот параметр, то все места, для которых в базе данных Google Places не указаны часы работы, игнорируются. Если установить для поля openNow значение false, оно будет игнорироваться.
    • minPriceLevel и maxPriceLevel – ценовой диапазон, ограничивающий результаты поиска. Допускаются значения от 0 (бесплатные) до 4 (самые дорогие) включительно.
    • Один из следующих вариантов:
      • bounds – объект google.maps.LatLngBounds, определяющий прямоугольную область для поиска; или
      • location и radius – вы можете отдать предпочтение результатам в пределах заданной окружности, передав параметры location и radius. Первыми в результатах будут отображаться места из указанной области, однако более отдаленные точки также могут быть включены в ответ. Поле location принимает объект google.maps.LatLng, а поле radius – обычное целое число, соответствующее радиусу окружности в метрах. Максимальный допустимый радиус составляет 50 000 метров.
    • type – ограничивает результаты поиска только теми местами, тип которых соответствует хотя бы одному из указанных. Можно указать только один тип (если указано несколько типов, все типы, кроме первого, игнорируются). См. список поддерживаемых типов.
    • types (устарело) – массив, содержащий один или несколько поддерживаемых типов. Служба возвращает результаты, соответствующие любому из указанных типов.

Также необходимо передать метод обратного вызова textSearch() для обработки объекта результатов и ответа google.maps.places.PlacesServiceStatus.

var map;
var service;
var infowindow;

function initialize() {
  var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);

  map = new google.maps.Map(document.getElementById('map'), {
      center: pyrmont,
      zoom: 15
    });

  var request = {
    location: pyrmont,
    radius: '500',
    query: 'restaurant'
  };

  service = new google.maps.places.PlacesService(map);
  service.textSearch(request, callback);
}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      var place = results[i];
      createMarker(results[i]);
    }
  }
}

Массовый поиск

Массовый поиск позволяет найти места в пределах указанного радиуса по ключевому слову, типу или названию. Массовый поиск возвращает больше результатов, чем поиск мест поблизости или текстовый поиск, однако возвращаемые результаты содержат меньше полей. Чтобы получить подробную информацию о любом из содержащихся в ответе мест, можно вызвать метод PlacesService.getDetails().

Объекты PlaceResult, возвращаемые методом radarSearch(), имеют только следующие свойства:

Массовый поиск инициируется вызовом метода radarSearch() службы PlacesService, который возвращает массив, содержащий до 200 объектов PlaceResult.

service = new google.maps.places.PlacesService(map);
service.radarSearch(request, callback);

Этот метод принимает запрос со следующими полями:

  • Один из следующих вариантов:
    • bounds – объект google.maps.LatLngBounds, определяющий прямоугольную область поиска; или
    • поля location и radius, первое из которых содержит объект google.maps.LatLng, а второе – обычное целое число, представляющее радиус окружности в метрах. Максимальный допустимый радиус составляет 50 000 метров.
  • Хотя бы одно из полей:
    • keyword (необязательное) – слово, по которому ведется поиск во всех доступных полях, включая название, тип, адрес, отзывы пользователей и сторонний контент.
    • name (необязательное) – слово, по которому ведется поиск в названиях мест. В результатах будут показаны только те места, названия которых содержат переданное значение name. Следует помнить, что у мест могут быть и другие названия, помимо официальных. API попытается сопоставить переданное значение name со всеми этими названиями. Поэтому в результатах поиска могут появляться места, названия которых, на первый взгляд, не соответствуют запросу.
    • type – ограничивает результаты поиска только теми местами, тип которых соответствует хотя бы одному из указанных. Можно указать только один тип (если указано несколько типов, все типы, кроме первого, игнорируются). См. список поддерживаемых типов.
    • types (устарело) – массив, содержащий один или несколько поддерживаемых типов. Служба возвратит лучший набор результатов для заданного набора типов.
  • Дополнительно:
    • minPriceLevel и maxPriceLevel (необязательно) – ценовой диапазон, ограничивающий результаты поиска. Допускаются значения от 0 (бесплатные) до 4 (самые дорогие) включительно.
    • openNow – логическое значение, указывающее, что служба Places должна ограничить результаты поиска только теми организациями либо заведениями, которые открыты в момент отправки запроса. Если в запросе указан этот параметр, то все места, для которых в базе данных Google Places не указаны часы работы, игнорируются. Если установить для поля openNow значение false, оно будет игнорироваться.

Также необходимо передать метод обратного вызова radarSearch() для обработки объекта PlaceResults и google.maps.places.PlacesServiceStatus.

// 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">

var map;
var infoWindow;
var service;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -33.867, lng: 151.206},
    zoom: 15,
    styles: [{
      stylers: [{ visibility: 'simplified' }]
    }, {
      elementType: 'labels',
      stylers: [{ visibility: 'off' }]
    }]
  });

  infoWindow = new google.maps.InfoWindow();
  service = new google.maps.places.PlacesService(map);

  // The idle event is a debounced event, so we can query & listen without
  // throwing too many requests at the server.
  map.addListener('idle', performSearch);
}

function performSearch() {
  var request = {
    bounds: map.getBounds(),
    keyword: 'best view'
  };
  service.radarSearch(request, callback);
}

function callback(results, status) {
  if (status !== google.maps.places.PlacesServiceStatus.OK) {
    console.error(status);
    return;
  }
  for (var i = 0, result; result = results[i]; i++) {
    addMarker(result);
  }
}

function addMarker(place) {
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location,
    icon: {
      url: 'https://developers.google.com/maps/documentation/javascript/images/circle.png',
      anchor: new google.maps.Point(10, 10),
      scaledSize: new google.maps.Size(10, 17)
    }
  });

  google.maps.event.addListener(marker, 'click', function() {
    service.getDetails(place, function(result, status) {
      if (status !== google.maps.places.PlacesServiceStatus.OK) {
        console.error(status);
        return;
      }
      infoWindow.setContent(result.name);
      infoWindow.open(map, marker);
    });
  });
}
<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 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=places,visualization" async defer></script>
// 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">

var map;
var infoWindow;
var service;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -33.867, lng: 151.206},
    zoom: 15,
    styles: [{
      stylers: [{ visibility: 'simplified' }]
    }, {
      elementType: 'labels',
      stylers: [{ visibility: 'off' }]
    }]
  });

  infoWindow = new google.maps.InfoWindow();
  service = new google.maps.places.PlacesService(map);

  // The idle event is a debounced event, so we can query & listen without
  // throwing too many requests at the server.
  map.addListener('idle', performSearch);
}

function performSearch() {
  var request = {
    bounds: map.getBounds(),
    keyword: 'best view'
  };
  service.radarSearch(request, callback);
}

function callback(results, status) {
  if (status !== google.maps.places.PlacesServiceStatus.OK) {
    console.error(status);
    return;
  }
  for (var i = 0, result; result = results[i]; i++) {
    addMarker(result);
  }
}

function addMarker(place) {
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location,
    icon: {
      url: 'https://developers.google.com/maps/documentation/javascript/images/circle.png',
      anchor: new google.maps.Point(10, 10),
      scaledSize: new google.maps.Size(10, 17)
    }
  });

  google.maps.event.addListener(marker, 'click', function() {
    service.getDetails(place, function(result, status) {
      if (status !== google.maps.places.PlacesServiceStatus.OK) {
        console.error(status);
        return;
      }
      infoWindow.setContent(result.name);
      infoWindow.open(map, marker);
    });
  });
}

Просмотр примера (place-radar-search.html).

Ответы на поисковые запросы

Коды состояния

Объект PlacesServiceStatus в ответе содержит данные о состоянии запроса и может содержать отладочную информацию, позволяющую выяснить причину сбоя. Возможные коды состояния:

  • ERROR: возникла проблема при связи с серверами Google.
  • INVALID_REQUEST: недопустимый запрос.
  • OK: ответ содержит корректный результат.
  • OVER_QUERY_LIMIT: веб-страница превысила квоту запросов.
  • REQUEST_DENIED: веб-странице не разрешено использовать службу PlacesService.
  • UNKNOWN_ERROR: не удалось выполнить запрос службы PlacesService из-за ошибки сервера. Если повторить попытку, запрос может оказаться успешным.
  • ZERO_RESULTS: для этого запроса не найдено результатов.

Результаты поиска мест

Функции nearbySearch() и textSearch() возвращают массив объектов PlaceResult. Функция radarSearch() возвращает частичный набор полей PlaceResult, как описано выше.

Каждый объект PlaceResult может включать следующие свойства:

  • formatted_address – строка, содержащая удобочитаемый адрес этого места. Часто это почтовый адрес. Свойство formatted_address возвращается только при текстовом поиске.
  • geometry: информация о геометрических характеристиках места. Включает:
    • location – широта и долгота места.
    • viewport – определяет предпочитаемую область карты при просмотре этого места.
  • html_attributions: массив указаний авторства, которые должны отображаться при выводе результатов поиска. Каждый элемент массива содержит текст HTML для одного указания. Примечание. Этот массив объединяет все указания авторства для всего поискового запроса. Все объекты PlaceResult в ответе могут содержать идентичные списки указаний авторства.
  • icon: URL ресурса, который можно использовать для представления типа места.
  • id: содержит уникальный идентификатор места. Этот идентификатор не позволяет получить информацию о месте, но с его помощью можно объединять данные об этом месте и распознавать его в разных поисковых запросах. Поскольку идентификаторы могут со временем изменяться, рекомендуется сравнивать сохраненный идентификатор места с идентификатором, возвращенным в последующих ответах на запросы данных о том же объекте, и при необходимости обновлять его. Примечание. Идентификатор id заменен идентификатором place_id, как описано в уведомлении о прекращении использования на этой странице.
  • name: название места.
  • opening_hours может содержать следующую информацию:
    • open_now – логическое значение, указывающее, работает ли организация в настоящий момент.
  • place_id – уникальный текстовый идентификатор места. Чтобы извлечь информацию о месте, передайте этот идентификатор в поле placeId запроса данных о месте. Узнайте подробнее о том, как ссылаться на место по его идентификатору.
  • rating – содержит рейтинг места на основе сводных отзывов пользователей (от 0,0 до 5,0).
  • reference – содержит токен, который в дальнейшем можно использовать для запроса дополнительных данных. Этот токен может отличаться от значения параметра reference, используемого в запросе данных. Сохраненные ссылки на места рекомендуется регулярно обновлять. Хотя токен однозначно определяет место, обратное утверждение неверно. Место может иметь несколько токенов с действительными ссылками. Примечание. Свойство reference заменено свойством place_id, как описано в уведомлении о прекращении использования свойства на этой странице.
  • types – массив типов для этого места (например, ["political", "locality"] или ["restaurant", "lodging"]).
  • vicinity: упрощенный адрес места, включая район, улицу и номер дома, но без указания области, почтового индекса или страны. Например, для офиса Google в Москве значением параметра vicinity будет Балчуг 7, ЦАО.

Отображение дополнительных результатов

По умолчанию для каждого запроса поиска мест возвращается до 20 результатов. Всего количество результатов может доходить до 60, и в таком случае они разбиваются на три страницы. Дополнительные страницы можно добавить с помощью объекта PlaceSearchPagination. Для доступа к дополнительным страницам необходимо захватить объект PlaceSearchPagination с помощью функции обратного вызова. Объект PlaceSearchPagination определяется следующим образом:

  • hasNextPage – логическое свойство, указывающее на доступность дополнительных результатов. Имеет значение true при наличии страницы с дополнительными результатами.
  • nextPage() – функция, возвращающая следующий набор результатов. После выполнения поиска нужно подождать две секунды, прежде чем станет доступна следующая страница результатов.

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

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

// 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">

var map;

function initMap() {
  var pyrmont = {lat: -33.866, lng: 151.196};

  map = new google.maps.Map(document.getElementById('map'), {
    center: pyrmont,
    zoom: 17
  });

  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch({
    location: pyrmont,
    radius: 500,
    type: ['store']
  }, processResults);
}

function processResults(results, status, pagination) {
  if (status !== google.maps.places.PlacesServiceStatus.OK) {
    return;
  } else {
    createMarkers(results);

    if (pagination.hasNextPage) {
      var moreButton = document.getElementById('more');

      moreButton.disabled = false;

      moreButton.addEventListener('click', function() {
        moreButton.disabled = true;
        pagination.nextPage();
      });
    }
  }
}

function createMarkers(places) {
  var bounds = new google.maps.LatLngBounds();
  var placesList = document.getElementById('places');

  for (var i = 0, place; place = places[i]; i++) {
    var image = {
      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)
    };

    var marker = new google.maps.Marker({
      map: map,
      icon: image,
      title: place.name,
      position: place.geometry.location
    });

    placesList.innerHTML += '<li>' + place.name + '</li>';

    bounds.extend(place.geometry.location);
  }
  map.fitBounds(bounds);
}
<div id="map"></div>
<div id="right-panel">
  <h2>Results</h2>
  <ul id="places"></ul>
  <button id="more">More results</button>
</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;
}
#right-panel {
  font-family: Arial, Helvetica, sans-serif;
  position: absolute;
  right: 5px;
  top: 60%;
  margin-top: -195px;
  height: 330px;
  width: 200px;
  padding: 5px;
  z-index: 5;
  border: 1px solid #999;
  background: #fff;
}
h2 {
  font-size: 22px;
  margin: 0 0 5px 0;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  height: 271px;
  width: 200px;
  overflow-y: scroll;
}
li {
  background-color: #f1f1f1;
  padding: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
li:nth-child(odd) {
  background-color: #fcfcfc;
}
#more {
  width: 100%;
  margin: 5px 0 0 0;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initMap" async defer></script>
// 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">

var map;

function initMap() {
  var pyrmont = {lat: -33.866, lng: 151.196};

  map = new google.maps.Map(document.getElementById('map'), {
    center: pyrmont,
    zoom: 17
  });

  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch({
    location: pyrmont,
    radius: 500,
    type: ['store']
  }, processResults);
}

function processResults(results, status, pagination) {
  if (status !== google.maps.places.PlacesServiceStatus.OK) {
    return;
  } else {
    createMarkers(results);

    if (pagination.hasNextPage) {
      var moreButton = document.getElementById('more');

      moreButton.disabled = false;

      moreButton.addEventListener('click', function() {
        moreButton.disabled = true;
        pagination.nextPage();
      });
    }
  }
}

function createMarkers(places) {
  var bounds = new google.maps.LatLngBounds();
  var placesList = document.getElementById('places');

  for (var i = 0, place; place = places[i]; i++) {
    var image = {
      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)
    };

    var marker = new google.maps.Marker({
      map: map,
      icon: image,
      title: place.name,
      position: place.geometry.location
    });

    placesList.innerHTML += '<li>' + place.name + '</li>';

    bounds.extend(place.geometry.location);
  }
  map.fitBounds(bounds);
}

Просмотр примера (place-search-pagination.html).

Данные о месте

Помимо перечня мест в определенной области служба Places также может возвращать подробную информацию об определенном месте. После того, как в ответе на запрос было получено место, его идентификатор можно использовать для запроса дополнительных данных об этом месте, таких как полный адрес, номер телефона, оценки пользователей, отзывы и т. д. (Поле reference также может использоваться для получения данных о месте, однако оно заменено полем place ID, как описано в уведомлении о прекращении использования свойства на этой странице.)

Запросы данных о месте

Данные о месте запрашиваются вызовом метода getDetails() службы Places.

service = new google.maps.places.PlacesService(map);
service.getDetails(request, callback);

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

Данный метод также принимает метод обратного вызова, который должен обработать код состояния, передаваемый в ответе google.maps.places.PlacesServiceStatus, а также объект google.maps.places.PlaceResult.

var request = {
  placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'
};

service = new google.maps.places.PlacesService(map);
service.getDetails(request, callback);

function callback(place, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    createMarker(place);
  }
}

Просмотр примера (place-details.html)

Ответы на запросы данных о месте

Коды состояния

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

  • ERROR: возникла проблема при связи с серверами Google.
  • INVALID_REQUEST: недопустимый запрос.
  • OK: ответ содержит корректный результат.
  • OVER_QUERY_LIMIT: веб-страница превысила квоту запросов.
  • NOT_FOUND – указанное место отсутствует в базе данных Google Places.
  • REQUEST_DENIED: веб-странице не разрешено использовать службу PlacesService.
  • UNKNOWN_ERROR: не удалось выполнить запрос службы PlacesService из-за ошибки сервера. Если повторить попытку, запрос может оказаться успешным.
  • ZERO_RESULTS: для этого запроса не найдено результатов.

Результаты запросов данных о месте

Успешный вызов метода getDetails() возвращает объект PlaceResult со следующими свойствами:

  • address_components: набор компонентов адресов для этого местоположения. Более подробную информацию см. в документе Типы компонентов адресов для службы геокодирования.
  • formatted_address: полный адрес места.
  • formatted_phone_number: номер телефона места в формате, соответствующем региональным нормам телефонных номеров.
  • geometry: информация о геометрических характеристиках места. Включает:
    • location – широта и долгота места.
    • viewport – определяет предпочитаемую область карты при просмотре этого места.
  • html_attributions: текст указания об авторстве, отображаемый для этого результата места.
  • icon: URL ресурса, который можно использовать для представления типа места.
  • id: содержит уникальный идентификатор места. Этот идентификатор не позволяет получить информацию о месте, но с его помощью можно объединять данные об этом месте и распознавать его в разных поисковых запросах. Поскольку идентификаторы могут со временем изменяться, рекомендуется сравнивать сохраненный идентификатор места с идентификатором, возвращенным в последующих ответах на запросы данных о том же объекте, и при необходимости обновлять его. Примечание. Идентификатор id заменен идентификатором place_id, как описано в уведомлении о прекращении использования на этой странице.
  • international_phone_number – содержит номер телефона места в международном формате. В международном формате указывается код страны и знак плюс (+) перед номером. Например, свойство international_phone_number для офиса Google в Москве выглядит так: +7 495 644 1400.
  • name: название места.
  • utc_offset – разница между временем текущего часового пояса и UTC (в минутах). Например, для объектов в г. Сидней (Австралия) при переходе на летнее время оно составит 660 (+11 часов от UTC), а для мест в Калифорнии без перехода на летнее время будет равным -480 (-8 часов от UTC).
  • opening_hours – содержит следующую информацию:
    • open_now – логическое значение, указывающее, работает ли организация в настоящий момент.
    • periods[] – массив с графиком работы на неделю в хронологическом порядке, начиная с воскресенья. Каждый период содержит следующую информацию.
      • Параметр open – включает пару объектов day и time, обозначающих время открытия.
        • day – число от 0 до 6, соответствующее дням недели, начиная с воскресенья. Например, 2 обозначает вторник.
        • time – время в 24-часовом формате (ччмм, значения в диапазоне 0000–2359). Значение time указывается по местному часовому поясу.
      • Параметр close – включает пару объектов day и time, обозначающих время закрытия. Примечание. Если место открыто постоянно, в ответе отсутствует раздел close. Можно уверенно считать, что место открыто постоянно, если период open содержит параметр day, имеющий значение 0, параметр time, имеющий значение 0000, и при этом отсутствует параметр close.
    • weekday_text – массив с семью строками, обозначающими время работы по дням недели в соответствующем формате. Если при запросе данных о месте был указан параметр language, время работы будет выведено на указанном языке в соответствующем ему формате. Порядок элементов в этом массиве зависит именно от параметра language. В некоторых странах неделя начинается с понедельника, а в других началом недели считается воскресенье.
  • permanently_closed – логический флаг, указывающий на то, что организация закрыта всегда (значение true). Если же организация закрыта не всегда, в полученном ответе этот флаг отсутствует.
  • photos[]: массив объектов PlacePhoto. Объект PlacePhoto можно использовать для получения фотографии с помощью метода getUrl(). Также можно проверить следующие значения для объекта:
    • height – максимальная высота изображения в пикселях.
    • width – максимальная ширина изображения в пикселях.
    • html_attributions: Текст указания об авторстве, отображаемый с этой фотографией места.
  • place_id: Уникальный текстовый идентификатор места, который можно использовать в запросах данных о месте. Узнайте подробнее о том, как ссылаться на место по его идентификатору.
  • rating: Рейтинг места от 0,0 до 5,0, определяемый по совокупности отзывов пользователей.
  • reference – содержит токен, который в дальнейшем можно использовать для запроса дополнительных данных. Этот токен может отличаться от значения параметра reference, используемого в запросе данных. Сохраненные ссылки на места рекомендуется регулярно обновлять. Хотя токен однозначно определяет место, обратное утверждение неверно. Место может иметь несколько токенов с действительными ссылками. Примечание. Свойство reference заменено свойством place_id, как описано в уведомлении о прекращении использования свойства на этой странице.
  • reviews – массив, содержащий до пяти отзывов. Каждый отзыв состоит из нескольких компонентов:
    • aspects[] – содержит массив объектов PlaceAspectRating с оценками организации по определенным критериям. Первый объект в массиве считается основным критерием. Каждый объект PlaceAspectRating определяется следующим образом:
      • type – оцениваемый критерий. Поддерживаются следующие типы: привлекательность, атмосфера, интерьер, удобства, кухня, общее впечатление, качество и сервис.
      • rating – пользовательская оценка по этому критерию, от 0 до 3.
    • author_name – имя пользователя, написавшего отзыв. Для анонимных рецензий в качестве автора будет указан "A Google user". Если установлен параметр language, фраза "A Google user" возвращает локализованную строку.
    • author_url – URL-адрес профиля пользователя в Google+ (если есть).
    • language – код IETF, указывающий язык, на котором написан отзыв. Это поле содержит только основной тег языка и не содержит дополнительный тег страны или региона. Например, все отзывы на английском языке имеют тег "en", но не "en-AU", "en-UK" и т. д.
    • rating – общая пользовательская оценка этого места. Она представляет собой целое число от 1 до 5.
    • text – текст отзыва пользователя. При рецензировании местоположения с помощью Google Places текстовые отзывы считаются необязательными, поэтому данное поле может быть пустым.
  • types – массив типов для этого места (например, ["political", "locality"] или ["restaurant", "lodging"]).
  • url: URL-адрес официальной страницы этого места в Google. Это страница Google, содержащая всю доступную информацию об этом месте. Приложения должны показывать пользователю встроенную страницу места или ссылку на нее на любом экране с подробным описанием этого места.
  • vicinity: упрощенный адрес места, включая район, улицу и номер дома, но без указания области, почтового индекса или страны. Например, для офиса Google в Москве значением параметра vicinity будет Балчуг 7, ЦАО. Свойство vicinity возвращается только при поиске мест поблизости.
  • website – содержит перечень официальных сайтов, связанных с этим местом, таких как адрес домашней страницы компании.

Не для всех мест могут быть даны оценки по каждому из критериев. Если отзывов слишком мало, в ответе на запрос данных будет возвращена либо прежняя оценка по шкале от 0,0 до 5,0 (при наличии), либо этот параметр будет отсутствовать.

Ссылка на место с использованием идентификатора

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

Чтобы воспользоваться идентификатором места в приложении, вам нужно предварительно найти нужный идентификатор, который содержится в объекте PlaceResult, возвращаемом на запрос поиска места или данных о месте. Впоследствии вы можете использовать этот идентификатор места для поиска данных о месте или для сохранения данных об авторстве в карте для зарегистрированного пользователя.

На идентификаторы мест не распространяются ограничения по кэшированию, указанные в пункте 10.5.d условий использования Google Maps API. Поэтому их можно хранить в течение неограниченного времени.

var map;

function initialize() {
  // Create a map centered in Pyrmont, Sydney (Australia).
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -33.8666, lng: 151.1958},
    zoom: 15
  });

  // Search for Google's office in Australia.
  var request = {
    location: map.getCenter(),
    radius: '500',
    query: 'Google Sydney'
  };

  var service = new google.maps.places.PlacesService(map);
  service.textSearch(request, callback);
}

// Checks that the PlacesServiceStatus is OK, and adds a marker
// using the place ID and location from the PlacesService.
function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    var marker = new google.maps.Marker({
      map: map,
      place: {
        placeId: results[0].place_id,
        location: results[0].geometry.location
      }
    });
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

Фотографии мест

Служба фотографий мест – удобный источник высококачественных снимков для вашего сайта. Она открывает доступ к миллионам фотографий, которые хранятся в базах данных Google Places и Google+ Local. Идентификаторы фотографий возвращаются автоматически при запросе данных о конкретном месте. При поиске мест поблизости и текстовом поиске для каждого места также возвращается один идентификатор фотографии (при наличии). С помощью службы фотографий вы можете показать фотографию с данным идентификатором пользователю в оптимальном для вашего приложения размере.

Массив объектов PlacePhoto возвращается в составе объекта PlaceResult для любых запросов getDetails(), textSearch() или nearbySearch() к службе PlacesService.

Примечание. Количество возвращаемых фотографий зависит от типа запроса.

  • В ответах на поиск мест поблизости или текстовый поиск возвращается не более одного объекта PlacePhoto.
  • Ответы на массовый поиск не содержат фотографий.
  • В ответах на запрос данных возвращается до десяти объектов PlacePhoto.

Вы можете запросить URL соответствующего изображения, вызвав метод PlacePhoto.getUrl() и передав ему корректный объект PhotoOptions. Объект PhotoOptions позволяет указать максимальные желаемые высоту и ширину изображения. Если указать значения max_height и max_width, служба фотографий изменит размер до наименьшего из указанных значений с сохранением исходного соотношения сторон.

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

function createPhotoMarker(place) {
  var photos = place.photos;
  if (!photos) {
    return;
  }

  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location,
    title: place.name,
    icon: photos[0].getUrl({'maxWidth': 35, 'maxHeight': 35})
  });
}

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

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