it-swarm.com.de

google Places-Bibliothek ohne Karte

Ich versuche, die Google Places-Bibliothek für eine nahegelegene Suchanfrage zu verwenden: https://developers.google.com/maps/documentation/javascript/places#place_search_requests

ich möchte nur die Antwort von Json ziehen und in eine HTML-Liste aufnehmen. Jetzt möchte ich die Ergebnisse auf einer Karte oder etwas anderem anzeigen. Ich möchte überhaupt keine Karte verwenden. In der Dokumentation heißt es jedoch, dass es eine Karte geben muss

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

um es als Argument in der PlacesService-Funktion zu übergeben. Was ich jetzt mache, ist das Hinzufügen einer Karte mit height: 0, die aber immer noch viel Speicher verbraucht (ich entwickle eine sencha touch 2 app und der Speicher ist wichtig). Gibt es eine Problemumgehung für die Verwendung von Suchanfragen in der Nähe ohne Karte? Ich möchte die Google Places-API nicht verwenden, da JSONP-Anfragen nicht unterstützt werden.

51
user985409

Der PlacesService akzeptiert als Dokument entweder eine Karte oder einen Knoten , wo die Attributionen für die Ergebnisse gerendert werden sollen.

Sie müssen also nur den Knoten (ein Knoten, der ein HTML-Element ist) anstelle der Map verwenden.

Bitte beachten Sie: Das Ausblenden der Attributionen verstößt gegen die Ortsrichtlinien (auch wenn die Karte als Argument verwendet wird, da die Map die Attributionen anzeigt)

Das könnte auch für Sie interessant sein: Google Places API verstößt dies gegen das Inhaltsverzeichnis?


Beispiel: kurz gesagt

Wenn Sie jQuery verwenden: 

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

Wenn einfaches Javascript:

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

Dann weiter wie gewohnt mit dem Rest des Beispielcodes :

  service.nearbySearch(request, callback);

Beispiel: Verwendung der zurückgegebenen Details

Live-Demo dieses Beispiels auf jsFiddle .

Hinweis: In diesem Beispiel wird jQuery verwendet.

<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

Gerade gesehen Mann fragt in einem Kommentar oben Wie kann man den Ortsdienst initialisieren, ohne eine Karte zu initialisieren? Also dachte ich, ich würde es hier hinzufügen.

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

Sie müssen jedoch zuerst ein HTML-Element mit dieser ID erstellen.

1
slajma

Wenn Sie Ortsdaten von einer place_id erhalten möchten, können Sie dies mit der Geolocator-Klasse tun: Hier die Dokumentation . Mit dieser Klasse können Sie der Methode geocode () eine place_id übergeben und Koordinaten und andere Standortdaten abrufen.

Ich bin auf dasselbe Problem gestoßen.

Warum Google Maps-Javascript-API verwenden, wenn Google Places-API bereits aktiviert ist? Ist dies ein zusätzlicher Preis für diese einfache Aufgabe?

Maps Javascript API wird in diesem Code nicht verwendet. Alle google.maps.Map API-Methoden werden entfernt. Es funktioniert gut auf jsfiddle .

Überprüfen Sie einfach, ob es auf dem lokalen PC funktioniert. In den meisten Fällen wird der Fehler 403 angezeigt, als ich versuchte, es auf dem lokalen PC-Speicher auszuführen und begrenzte Anforderungen zu verwenden, die von der Google API-Konsole bereitgestellt wurden.

Erwerben Sie einen API-Schlüssel von der Google-Entwicklerkonsole und fügen Sie ihn in den Bereich YOUR_API_KEY am Skript-Tag des Codes ein Versuchen Sie nicht, den Code hier auszuführen. Der API-Schlüssel muss ersetzt werden.

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