web-dev-qa-db-fra.com

bibliothèque de lieux Google sans carte

J'essaie d'utiliser la bibliothèque Google Places pour une requête 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 souhaite maintenant afficher les résultats sur une carte ou quelque chose d'autre. Je ne veux pas utiliser la carte du tout. 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: 0 mais elle 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 de rechange aux demandes de recherche à proximité sans carte? Je ne souhaite pas utiliser l'API Google Adresses, car elle ne prend pas en charge les requêtes JSONP.

google-mapsgoogle-places
51
user985409

Comme indiqué dans la documentation, PlacesService accepte en argument une carte ou un nœud où les attributs doivent être affichés 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.

Remarque: masquer les attributions enfreint les règles de lieu (masquer également la carte lorsqu'il est utilisé comme argument, car la carte affichera les attributions).

Cela peut aussi vous intéresser: L'API Google Places est-ce une violation de la table des matières?

Exemple: en quelques mots

Si vous utilisez 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'));

Continuez ensuite comme d'habitude avec le reste de l'exemple de code :

  service.nearbySearch(request, callback);

Exemple: utilisation des détails retournés

Démo en direct de cet exemple sur jsFiddle .

Remarque: 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>
67
Dr.Molle

Je viens de voir Man demandant dans un commentaire ci-dessus Comment initialiser le service de lieux sans initialiser une carte? alors j'ai pensé que je l'ajouterais ici.

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

Cependant, vous devrez d'abord créer un élément HTML avec cet identifiant.

1
slajma

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

0
Giovanni Bertoncelli

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

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

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

Il suffit de vérifier si cela fonctionne sur un PC local. La plupart du temps, il donne l'erreur 403 lorsque j'ai essayé de l'exécuter sur un stockage local sur PC et en utilisant des requêtes limitées fournies par la console de Google API.

acquérez une clé API à partir de la console de développement Google et insérez-la dans l'emplacement YOUR_API_KEY à la balise script du code N'essayez pas d'exécuter le code ici.videntement.La clé d'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>
0
Adrian Perera