bibliothèque google places sans carte

Question

J'essaie d'utiliser la bibliothèque google places pour une demande de recherche à proximité : https://developers.google.com/maps/documentation/javascript/places#place_search_requests

Je veux juste extraire la réponse json et la mettre dans une liste html, je ne veux pas montrer les résultats sur une carte ou autre chose. Je ne veux pas du tout utiliser map. Mais dans la documentation, il est indiqué qu'il doit y avoir une carte.

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

afin de le passer comme argument dans la fonction PlacesService. Ce que je fais maintenant, c'est d'ajouter une carte avec une hauteur de 0, mais cela consomme encore beaucoup de mémoire (je développe une application Sencha Touch 2 et la mémoire est importante). Existe-t-il une solution pour utiliser les requêtes de recherche à proximité sans carte ? Je ne veux pas utiliser l'API Google Places car elle ne supporte pas les requêtes JSONP.

Answer 1

Comme documenté, le PlacesService accepte comme argument soit une carte, soit un nœud où rendre les attributions pour les résultats .

Il suffit donc d'utiliser le nœud (un nœud étant un élément html) au lieu de la carte.

Attention : cacher les attributions viole la politique des lieux (cacher aussi la carte lorsqu'elle est utilisée comme argument, car la carte montrera les attributions).

Ceci peut également vous intéresser : L'API de Google places constitue-t-elle une violation de la COT ?

---

Exemple : en bref

Si vous utilisez jQuery :

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

Si c'est du simple Javascript :

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

Alors continuez comme d'habitude avec le reste du code de l'exemple :

  service.nearbySearch(request, callback);

---

Exemple : utilisation des détails retournés

Démonstration en direct de cet exemple sur jsFiddle .

Note : Cet exemple utilise 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>

Answer 2

Si vous voulez obtenir des données de localisation à partir d'un place_id, vous pouvez le faire en utilisant la classe Geocoder : Voici la documentation . Avec cette classe, vous pouvez passer un place_id à la méthode geocode() et obtenir des coordonnées et d'autres données de localisation.

Answer 3

Je faisais un autocomplétion d'adresse personnalisé pour un formulaire d'inscription.

import {useState, useRef, useEffect } from 'React'

function AutoCompleteInput(){

const [predictions, setPredictions] = useState([]);
const [input, setInput] = useState('');
const [selectedPlaceDetail, addSelectedPlaceDetail] = useState({})
const predictionsRef = useRef();

useEffect(
()=>{
      try {
        autocompleteService.current.getPlacePredictions({ input }, predictions => {
          setPredictions(predictions);
        });
      } catch (err) {
       // do something
      }
    }
}, [input])

const handleAutoCompletePlaceSelected = placeId=>{
 if (window.google) {
      const PlacesService = new window.google.maps.places.PlacesService(predictionsRef.current);
      try {
        PlacesService.getDetails(
          {
            placeId,
            fields: ['address_components'],
          },
         place => addSelectedPlaceDetail(place)
        );
      } catch (e) {
        console.error(e);
      }
    }
}

return (
  <>
   <input onChange={(e)=>setInput(e.currentTarget.value)}
    <div ref={predictionsRef}
     { predictions.map(prediction => <div onClick={ ()=>handleAutoCompletePlaceSelected(suggestion.place_id)}> prediction.description </div> )
   }
   </div>
  <>
 )
}

En gros, vous configurez l'appel de l'autocomplétion et récupérez les résultats des prédictions dans votre état local.

à partir de là, mappez et affichez les résultats avec un gestionnaire de clics qui effectuera la demande de suivi aux services des lieux avec un accès à la méthode getDetails pour l'objet adresse complète ou les champs que vous voulez.

vous enregistrez ensuite cette réponse dans votre état local et c'est parti.

Answer 4

Je viens de voir l'homme demander dans un commentaire ci-dessus Comment initialiser le service des lieux sans initialiser une carte ? alors j'ai pensé l'ajouter ici.

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

Vous devrez cependant d'abord créer un élément html avec cet identifiant.

Answer 5

J'ai rencontré le même problème.

Pourquoi utiliser l'Api Maps javascript alors que l'Api Places est déjà activée, est-ce un prix supplémentaire à payer pour cette simple tâche ?

L'API Javascript Maps n'est pas utilisée dans ce code et toutes les méthodes de l'API google.maps.Map sont supprimées. Cela fonctionne bien sur jsfiddle .

La plupart du temps, il donne l'erreur 403 lorsque j'ai essayé de l'exécuter sur le stockage local du PC et en utilisant les demandes limitées fournies par la console API de Google.

acquérir une clé API depuis la console google developer et l'insérer dans l'emplacement YOUR_API_KEY de la balise script du code N'essayez pas d'exécuter le code ici, évidemment. La clé API doit être remplacée.

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

function initMap() {

  var input = document.getElementById('pac-input');

  var options = {
    types: ['establishment']
  };

  var autocomplete = new google.maps.places.Autocomplete(input, options);

  autocomplete.setFields(['place_id', 'geometry', 'name', 'formatted_address', 'formatted_phone_number', 'opening_hours', 'website', 'photos']);

  autocomplete.addListener('place_changed', placechange);

  function placechange() {

    var place = autocomplete.getPlace();
    var photos = place.photos;

    document.getElementById('place_name').textContent = place.name;
    document.getElementById('place_id').textContent = place.place_id;
    document.getElementById('place_address').textContent = place.formatted_address;
    document.getElementById('phone_no').textContent = place.formatted_phone_number;
    document.getElementById('open_time').textContent = place.opening_hours.weekday_text[0];
    document.getElementById('open_now').textContent = place.opening_hours.open_now;
    document.getElementById('photo').src = photos[0].getUrl();
    document.getElementById('photo').style = "width:50%;";
    document.getElementById('website').textContent = place.website;

  }
}

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

.controls {
  background-color: #fff;
  border-radius: 2px;
  border: 1px solid transparent;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  height: 29px;
  margin-left: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
  outline: none;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 400px;
}

.controls:focus {
  border-color: #4d90fe;
}

.title {
  font-weight: bold;
}

#infowindow-content {
  display: none;
}

#map #infowindow-content {
  display: inline;
}

<div>
  <input id="pac-input" class="controls" type="text" placeholder="Enter a business">
</div>

<div id="info-table">
  Name: <span id="place_name"></span><br> Place id: <span id="place_id"></span><br> Address :<span id="place_address"></span><br> Phone : <span id="phone_no"></span><br> Openhours: <span id="open_time"></span><br> Open Now : <span id="open_now"></span><br>  website : <span id="website"></span><br> photo :<br> <img id="photo" src="" style="display:none;" />
</div>

<div id="map"></div>
<div id="infowindow-content">
  <span id="place-name" class="title"></span><br>
  <strong>Place ID:</strong> <span id="place-id"></span><br>
  <span id="place-address"></span>
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap">
</script>