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
...
}
Таким образом, вы можете соответствующим образом отформатировать эту строку содержимого и заполнить информационное окно. Надеюсь, это поможет вам начать в правильном направлении.