Google Places HTML/Javascript List

Работает ниже. -Это показывает «магазины» на карте в пределах 500 метров от предопределенного местоположения. -Он показывает маркеры с информацией о магазине на карте. - Он показывает список мест с картой, но только с именем места не детали (я бы хотел детали).Google Places HTML/Javascript List

Если я хочу вывести список HTML/Javascript выше, а не показывать карту, как узнать, как это сделать?

API Google Places API фокусируется на том, как выводить на карту, но я не хочу выводить информацию о магазине только на карте. Если у вас есть ЛЮБАЯ подсказка, пожалуйста, дайте мне знать. Мне просто нужны предложения.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Place searches</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     html, body, #map-canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
    </style> 
    <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 = { 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>'; 
} 



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

    </script> 
    <style> 
     #results { 
     font-family: Arial, Helvetica, sans-serif; 
     position: absolute; 
     right: 5px; 
     top: 50%; 
     margin-top: -195px; 
     height: 380px; 
     width: 500px; 
     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: 321px; 
     width: 500px; 
     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; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
    <div id="results"> 
     <h2>Results</h2> 
     <ul id="places"></ul> 
     <button id="more">More results</button> 
    </div> 
    </body> 
</html>

источник

2014-11-17 Benjamin Jones

Я вижу, вы уже заполняете список сайтов html, почему этого недостаточно?

Что касается деталей места, вместо того чтобы пытаться получить информацию о каждом найденном месте, я попытался установить прослушиватель на соответствующем маркере. Если кто-нибудь нажмет этот маркер, то я буду стрелять вверх детали просить и открыть InfoWindow соответственно

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 }; 

    google.maps.event.addListener(marker, 'click', function() { 
     service.getDetails(request, function(details, status) { 
     console.log(details,status); 
     infowindow.setContent(details.name + "<br />" + details.formatted_address +"<br />" + details.website + "<br />" + details.rating + "<br />" + details.formatted_phone_number); 
     infowindow.open(map, marker); 
     }); 
    }); 

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

делать это наоборот приведет к «OVER QUERY LIMIT» ошибка, потому что вы будете стрелять 500 одновременные запросы getDetails.

Обновление: here's a brief example, используя jQuery для обнаружения щелчков по списку html и запуска запроса getDetails.

источник

2014-11-17 21:53:26 amenadiel

Нет, я хочу, чтобы детали инфоиндуста на местеList.innerHTML. Я понял, что placeList.innerhtml выходит за рамки. Также я считаю, что мне нужно использовать placeList.setContent (details.name + "
" + details.formatted_address + "
" + details.website + "
" + details.rating + "
" + details.formatted_phone_number); infowindow.open (карта, маркер); , Я пробую это прямо сейчас. –

Я бы предпочел, чтобы список загружал имя магазина с каждым маркером, как только имя будет нажато в списке. Как я уже сказал, я пытаюсь получить детали каждого магазина в списке. –

Итак, при нажатии на элемент списка вы хотите добавить детали места в элемент списка? – amenadiel

Google Places HTML/Javascript List

ответ

Смежные вопросы