web-dev-qa-db-fra.com

lier google places autocomplete sur textbox sans instancier une carte google

J'essaie d'ajouter la fonctionnalité de saisie semi-automatique Google Adresses sur mon site Web. J'ai un problème avec la liaison de ma zone de texte de recherche avec la saisie semi-automatique sans l'instanciation d'une carte Google. Ce que j'essaie de faire, c'est d'utiliser la saisie semi-automatique comme suggestion de texte dans mon champ de recherche. mais malheureusement, tous les tutoriels que j'ai vus utilisaient la fonction de saisie semi-automatique et une carte google. Y at-il un moyen de contourner cela?

Merci d'avance.

javascriptjquerygoogle-mapsgoogle-places
10
MeepMerp

Les gars, vous pouvez utiliser le code suivant. 

 <!DOCTYPE html>
    <html>
      <head>
        <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
        <script>
            var autocomplete;
            function initialize() {
              autocomplete = new google.maps.places.Autocomplete(
                  /** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
                  { types: ['geocode'] });
              google.maps.event.addListener(autocomplete, 'place_changed', function() {
              });
            }
        </script>
      </head>
      <body onload="initialize()">
        <div id="locationField">
          <input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text"></input>
        </div>
      </body>
    </html>

Modifier: Google Maps nécessite désormais une clé API pour que cela fonctionne.

21
Mohit

C'est un très vieux fil de discussion, mais Google a maintenant besoin d'une API pour tous ses services basés sur des cartes et j'ai pensé que l'exemple de code pourrait être un peu simplifié.

Élément intérieur d'en-tête (code de mise à jour avec votre attribut id d'élément d'entrée):

<script type="text/javascript">
  function initAutocomplete() {
    // Create the autocomplete object, restricting the search to geographical
    // location types.
    autocomplete = new google.maps.places.Autocomplete(
        /** @type {!HTMLInputElement} */(document.getElementById('YOUR_INPUT_ELEMENT_ID')),
        {types: ['geocode']});

    // When the user selects an address from the dropdown, populate the address
    // fields in the form.
    autocomplete.addListener('place_changed', fillInAddress);
  }

  function fillInAddress() {
    // Get the place details from the autocomplete object.
    var place = autocomplete.getPlace();

  }
    </script>

Dans votre page, confirmez que vous avez entré du texte avec un attribut ID correspondant au script ci-dessus:

<input type="text" id="YOUR_INPUT_ELEMENT_ID" />

Juste avant la fermeture de votre balise body, ajoutez ce script (mettez à jour avec votre propre clé API):

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete" async defer></script>

Autres notes:

  • Ceci est une version légèrement modifiée de l'article original d'aide/exemple Trouvé ici
  • Vous avez besoin d'une clé d'API active pour le service Web Google Places API et pour activer l'API Javascript de Google Maps à partir de console Google Developer .
6
user2309181

Il suffit de remplacer la clé secrète par votre clé API.

<head>
  <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
  <script src="https://maps.googleapis.com/maps/api/js?key=Secretkey&libraries=places" async defer></script>
  <script>
    var autocomplete;
    function initialize() {
      autocomplete = new google.maps.places.Autocomplete(
        /** @type {HTMLInputElement} */
        (document.getElementById('autocomplete')),
        { types: ['geocode'] }
      );
      google.maps.event.addListener(autocomplete, 'place_changed', function() {});
    }
  </script>
</head>

<div id="locationField">
  <input id="autocomplete" name="location" placeholder="Enter your address" onFocus="geolocate()" type="text"></input>
</div>

Pour obtenir votre clé d'api https://developers.google.com/maps/documentation/javascript/get-api-key

6
Aravind Srinivas

Consultez cet article de blog sur Google Geo Dev: http://googlegeodevelopers.blogspot.com/2012/05/faster-address-entry-with-google-places.html

Il contient des liens vers les méthodes appropriées, notamment Autocomplete.getPlace().

"Vous êtes libre d'utiliser la saisie semi-automatique dans n'importe quelle application, même si vous n'affichez pas de carte. Tout ce que nous vous demandons, c'est d'afficher le logo" powered by Google "dans le champ de texte lorsque vous utilisez la saisie semi-automatique sans carte ".

4
Bryan

essayez ceci aussi 

<script>
  google.maps.event.addDomListener(window, 'load', initialize);
    function initialize() {
      var input = document.getElementById('autocomplete_search');
      var autocomplete = new google.maps.places.Autocomplete(input);
      autocomplete.addListener('place_changed', function () {
      var place = autocomplete.getPlace();
      // place variable will have all the information you are looking for.
      $('#lat').val(place.geometry['location'].lat());
      $('#long').val(place.geometry['location'].lng());
    });
  }
</script>

exemple complet disponible ici

0
Devendra Dode
function initialize()
    {
        var input = document.getElementById('location');
        var autocomplete = new google.maps.places.Autocomplete(
                /** @type {HTMLInputElement} */(input),
                {
                    types: ['(cities)'],
                });
        google.maps.event.addListener(autocomplete, 'place_changed', function() {
            var place = autocomplete.getPlace();
            if (!place.geometry) {
                return;
            }
            //document.getElementById('fLat').value = place.geometry.location.lat();
            //document.getElementById('fLong').value = place.geometry.location.lng();

            var address = '';
            if (place.address_components)
            {
                address = [
                    (place.address_components[0] && place.address_components[0].short_name || ''),
                    (place.address_components[1] && place.address_components[1].short_name || ''),
                    (place.address_components[2] && place.address_components[2].short_name || '')
                ].join(' ');
            }
            LoadEventCategory();
            LoadYelpData();
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
0
Alpesh Trivedi