google maps - multiple - google coloca la biblioteca sin mapa

infowindow google maps

Question

Intento usar la biblioteca de lugares de google para una solicitud de búsqueda cercana: https://developers.google.com/maps/documentation/javascript/places#place_search_requests

Solo quiero sacar la respuesta json y ponerla en una lista html, ahora quiero mostrar resultados en un mapa u otra cosa. No quiero usar el mapa en absoluto. Pero en la documentación dice que tiene que haber un mapa

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

para pasarlo como un argumento en la función PlacesService. Lo que hago ahora es agregar un mapa con height: 0 pero aún consume mucha cantidad de memoria (desarrollo una aplicación sencha touch 2 y la memoria es importante). ¿Hay alguna solución para usar solicitudes de búsqueda cercanas sin un mapa? No quiero utilizar la API de Google Places porque no admite solicitudes JSONP.

Answer 1

Acabo de ver Hombre preguntando en un comentario anterior ¿Cómo inicializar el servicio de lugares sin inicializar un mapa? así que pensé en agregarlo aquí.

placesService = new google.maps.places.PlacesService($(''#predicted-places'').get(0));

Sin embargo, primero tendrá que crear un elemento html con esa identificación.

Answer 2

Tal como se documenta, PlacesService acepta como argumento un mapa o un nodo donde representar las atribuciones para los resultados .

Entonces solo tiene que usar el nodo (un nodo es un elemento html) en lugar del mapa.

Tenga en cuenta que ocultar las atribuciones infringe los lugares-políticas (también se oculta el mapa cuando se usa como argumento, porque el mapa mostrará las atribuciones)

Esto también puede ser interesante para ti: Google places API ¿Esto viola el TOC?

Ejemplo: en pocas palabras

Si estás usando jQuery:

var service = new google.maps.places.PlacesService($(''#tag-id'').get(0));

Si Javascript simple:

var service = new google.maps.places.PlacesService(document.createElement(''div''));

Luego continúe como de costumbre https://developers.google.com/maps/documentation/javascript/places#place_search_requests :

 service.nearbySearch(request, callback);

Ejemplo: usando detalles devueltos

Demostración en vivo de este ejemplo en jsFiddle .

Nota: Este ejemplo usa jQuery .

<ul class="reviews__content" id="reviews__content">
</ul>
<div id="service-helper"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_API_KEY_HERE&libraries=places&callback=getRelevantGoogleReviews">
</script>
<script type="text/javascript">
window.getRelevantGoogleReviews = function(){
var service = new google.maps.places.PlacesService($(''#service-helper'').get(0)); // note that it removes the content inside div with tag ''#service-helper''
service.getDetails({
placeId: ''ChIJAwEf5VFQqEcRollj8j_kqnE'' // get a placeId using https://developers.google.com/places/web-service/place-id
}, function(place, status) {
if (status === google.maps.places.PlacesServiceStatus.OK) {
var resultcontent = '''';
for (i=0; i<place.reviews.length; ++i) {
//window.alert(''Name:'' + place.name + ''. ID: '' + place.place_id + ''. address: '' + place.formatted_address);
resultcontent += ''<li class="reviews__item">''
resultcontent += ''<div class="reviews__review-er">'' + place.reviews[i].author_name + ''</div>'';
var reviewDate = new Date(place.reviews[i].time * 1000);
var reviewDateMM = reviewDate.getMonth() + 1;
var reviewDateFormatted = reviewDate.getDate() + ''/'' + reviewDateMM + ''/'' + reviewDate.getFullYear();
resultcontent += ''<div class="reviews__review-date">'' + reviewDateFormatted + ''</div>'';
resultcontent += ''<div class="reviews__review-rating reviews__review-rating--'' + place.reviews[i].rating +''"></div>'';
if (!!place.reviews[i].text){
resultcontent += ''<div class="reviews__review-comment">'' + place.reviews[i].text + ''</div>'';
}
resultcontent += ''</li>''
}
$(''#reviews__content'').append(resultcontent);
}
});
}
</script>