Google Orte Bibliothek ohne Karte

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

Ich möchte nur die JSON-Antwort abrufen und in eine HTML-Liste einfügen. Ich möchte jetzt die Ergebnisse auf einer Karte oder etwas anderem anzeigen. Ich möchte die Karte überhaupt nicht 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 der Höhe: 0, aber sie verbraucht immer noch viel Speicher (ich entwickle eine Sencha Touch 2-App und 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 sie keine JSONP-Anforderungen unterstützt.

Wie dokumentiert, akzeptiert der PlacesService als Argument entweder eine Karte oder einen Knoten, auf dem die Zuordnungen für die Ergebnisse gerendert werden sollen .

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

Bitte beachten Sie: Das Ausblenden der Zuordnungen verstößt gegen die Ortsrichtlinien (auch das Ausblenden der Karte, wenn sie als Argument verwendet wird, da auf der Karte die Zuordnungen angezeigt werden).

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

Beispiel: auf den Punkt gebracht

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'));

Fahren Sie dann wie gewohnt mit dem Rest des Beispielcodes fort :

  service.nearbySearch(request, callback);

Beispiel: Verwenden der zurückgegebenen Details

Live-Demo dieses Beispiels auf jsFiddle .

Hinweis: In diesem Beispiel wird verwendet 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>

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

Ich habe gerade gesehen, wie ein Mann in einem Kommentar oben gefragt hat, wie man den Ortsdienst initialisiert, 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.

Hat eine benutzerdefinierte Adresse automatisch für ein Anmeldeformular ausgefüllt.

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

Im Grunde genommen richten Sie den Autocomplete-Aufruf ein und erhalten die Vorhersageergebnisse in Ihrem lokalen Status zurück.

Von dort aus können Sie die Ergebnisse mit einem Klick-Handler zuordnen und anzeigen, der die Folgeanforderung an die Ortsdienste mit Zugriff auf die Methode getDetails für das vollständige Adressobjekt oder die gewünschten Felder ausführt.

Sie speichern diese Antwort dann in Ihrem lokalen Bundesstaat und los geht's.

Ich bin auf das gleiche Problem gestoßen.

Warum Maps Javascript Api verwenden, wenn Places Api bereits aktiviert ist? Ist es ein zusätzlicher Preis für diese einfache Aufgabe?

Die 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 einem lokalen PC funktioniert. Meistens wird der Fehler 403 angezeigt, wenn ich versucht habe, ihn auf einem lokalen PC-Speicher auszuführen und begrenzte Anforderungen zu verwenden, die von der Google API-Konsole bereitgestellt werden.

Erwerben Sie einen API-Schlüssel von der Google-Entwicklerkonsole und fügen Sie ihn in den Steckplatz YOUR_API_KEY am Skript-Tag des Codes ein. Versuchen Sie nicht, den Code hier auszuführen. Offensichtlich. 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>