Google Places API- адрес и номер телефона?

Я пытаюсь создать список и карту через Google Places. Ниже отображаются производители и список местных магазинов. Прямо сейчас он показывает только название магазина. Как бы я включил адрес и телефон? Буду ли я добавить другую спецификацию объекта?

ОБНОВЛЕНИЕ: По этой ссылке: Google Places API - запрос информации о местах не определен

place.getDetails() должен быть добавлен. Однако мой сценарий сейчас показывает только один рынок, а не детали. Что здесь происходит?

ОБНОВЛЕНИЕ ОБНОВЛЕНИЕ:

Пример HTML здесь: http://simplecomputerblog.com/searchtest1.html

  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
    <script>
var map, placesList;
var infowindow;
var service; //declare globally


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

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

  var request = {
    location: pyrmont,
    radius: 500,
    types: ['store']
  };
  infowindow = new google.maps.InfoWindow();
   placesList = document.getElementById('places');
 service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);
service.getDetails(request, callback);

}

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

function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
  map: map,
  position: place.geometry.location
 });

var request = { reference: place.place_id };
service.getDetails(request, function(details, status) {
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(details.name + "<br />" + details.formatted_address +"<br />" + details.website + "<br />" + details.rating + "<br />" + details.formatted_phone_number);
    infowindow.open(map, this);
   });
 });
 placesList.innerHTML += '<li>' + place.name + '</li>';
}



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

    </script>

1 ответ

Решение

Из документации вы можете легко получить number а также address места, которые вы выбираете, выполнив:

  function createMarker(place) {
   var placeLoc = place.geometry.location;
   var marker = new google.maps.Marker({
     map: map,
     position: place.geometry.location
   });

   google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(place.name+place.formatted_address+place.formatted_phone_number);
    infowindow.open(map, this);
   });
   placesList.innerHTML += '<li>' + place.name + '</li>';
 }

Опять из документов:

Содержимое InfoWindow может содержать строку текста, фрагмент HTML или элемент DOM. Чтобы установить содержимое, либо укажите его в InfoWindowOptions, либо явно вызовите setContent() в InfoWindow.

РЕДАКТИРОВАТЬ- Как правильно указано результаты для nearbySearch не возвращайся formatted_address а также formatted_phone_number в result объект и для этого вам придется сделать еще один getdetails запрос, как вы уже включили в свой код. Это может выглядеть примерно так (не проверено):

 function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
  map: map,
  position: place.geometry.location
 });

var request = { placeId: place.place_id };
service.getDetails(request, function(details, status) {
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(details.name + "<br />" + details.formatted_address +"<br />" + details.website + "<br />" + details.rating + "<br />" + details.formatted_phone_number);
    infowindow.open(map, this);
   });
 });
 placesList.innerHTML += '<li>' + place.name + '</li>';
}

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

var service; //declare globally
function intialize(){
   ...
   service = new google.maps.places.PlacesService(map); //initialize here

   ...
}

Таким образом, вы можете соответствующим образом отформатировать эту строку содержимого и заполнить информационное окно. Надеюсь, это поможет вам начать в правильном направлении.

Другие вопросы по тегам