Partage

Menu autocomplet Ville de france et lieu attractif

1 juillet 2015 à 16:59:53

Bonjour

je recherche une solution pour avoir un champs text qui s'autocomplete en fonction du texte saisie et qui comporte les villes ou les centre d''interet .

j'ai vue sur certain site , une solution "powered by google" mais je ne trouve aucune information la dessus

est ce que quelqu’un peux m'aider ?

On estime à environ 550 millions le nombre d'armes à feu actuellement en circulation. Autrement dit il y a un homme sur douze qui est armé sur cette planète. La seule question c'est … comment armer les onze autres ?

nightmat

1 juillet 2015 à 17:10:24

https://developers.google.com/places/javascript/ ?

Ce n'est pas parce que vous ne savez pas vous servir d'un marteau qu'il faut planter des clous au tournevis.

Oldaric

1 juillet 2015 à 18:59:45

j'ai trouvé le menu qui s'autocomplete mais je ne veux pas la carte

<!DOCTYPE html>
<html>
  <head>
    <title>Place Autocomplete</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>

      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      .controls {
        margin-top: 16px;
        border: 1px solid transparent;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        height: 32px;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
      }

      #pac-input {
        background-color: #fff;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        margin-left: 12px;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: 400px;
      }

      #pac-input:focus {
        border-color: #4d90fe;
      }

      .pac-container {
        font-family: Roboto;
      }

      #type-selector {
        color: #fff;
        background-color: #4d90fe;
        padding: 5px 11px 0px 11px;
      }

      #type-selector label {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 300;
      }

    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>

    <script>
function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(-33.8688, 151.2195),
    zoom: 13
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  var input = /** @type {HTMLInputElement} */(
      document.getElementById('pac-input'));

  var types = document.getElementById('type-selector');
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);

  var autocomplete = new google.maps.places.Autocomplete(input);
  autocomplete.bindTo('bounds', map);

  var infowindow = new google.maps.InfoWindow();
  var marker = new google.maps.Marker({
    map: map,
    anchorPoint: new google.maps.Point(0, -29)
  });

  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    infowindow.close();
    marker.setVisible(false);
    var place = autocomplete.getPlace();
    if (!place.geometry) {
      window.alert("Autocomplete's returned place contains no geometry");
      return;
    }

    // If the place has a geometry, then present it on a map.
    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(17);  // Why 17? Because it looks good.
    }
    marker.setIcon(/** @type {google.maps.Icon} */({
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(35, 35)
    }));
    marker.setPosition(place.geometry.location);
    marker.setVisible(true);

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

    infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
    infowindow.open(map, marker);
  });

  // Sets a listener on a radio button to change the filter type on Places
  // Autocomplete.
  function setupClickListener(id, types) {
    var radioButton = document.getElementById(id);
    google.maps.event.addDomListener(radioButton, 'click', function() {
      autocomplete.setTypes(types);
    });
  }

  setupClickListener('changetype-all', []);
  setupClickListener('changetype-address', ['address']);
  setupClickListener('changetype-establishment', ['establishment']);
  setupClickListener('changetype-geocode', ['geocode']);
}

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

    </script>
  </head>
  <body>
    <input id="pac-input" class="controls" type="text"
        placeholder="Enter a location">
    <div id="type-selector" class="controls">
      <input type="radio" name="type" id="changetype-all" checked="checked">
      <label for="changetype-all">All</label>

      <input type="radio" name="type" id="changetype-establishment">
      <label for="changetype-establishment">Establishments</label>

      <input type="radio" name="type" id="changetype-address">
      <label for="changetype-address">Addresses</label>

      <input type="radio" name="type" id="changetype-geocode">
      <label for="changetype-geocode">Geocodes</label>
    </div>
    <div id="map-canvas"></div>
  </body>
</html>

impossible de supprimer la carte

-
Edité par Oldaric 1 juillet 2015 à 19:10:47

nightmat

1 juillet 2015 à 19:04:41

Ce n'est pas ça que tu veux : https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete ?

Ce n'est pas parce que vous ne savez pas vous servir d'un marteau qu'il faut planter des clous au tournevis.

Oldaric

4 juillet 2015 à 0:00:11

Si mais sans la carte justement

nightmat

4 juillet 2015 à 0:17:42

Wow tu voulais vraiment faire aucun effort.

https://developers.google.com/maps/documentation/javascript/3.exp/reference#Autocomplete

Ce n'est pas parce que vous ne savez pas vous servir d'un marteau qu'il faut planter des clous au tournevis.

Oldaric

4 juillet 2015 à 23:10:57

c'est pas que je fais aucun effort , c'est que je comprend psa ...

stefde3

5 juillet 2015 à 12:00:55

Alors tu as pas utilisé le bon terme

autocomplete va aller rechercher une information existante soit dans une BDD ou un fichier XML dans lequel tu auras le nom de tes villes, et par requête jQuery/ Ajax et PHP ou XML au lieu de PHP, tu aura les réponses qui correspondront au moment ou tu tape une lettre dans la barre.

En gros il va pas aller chercher on ne sait quoi on ne sait où il n'existe pas une BDD sur laquelle tout le monde peut se connecter pour accéder à toutes les variables éxistantes.

Tu dois te les créer

Si tu veux y a des tutos pour ça comme par exemple faire un système de barre de recherche comme google avec suggestions au moment de taper :

ici par exemple

Le CSS ça peut craindre -->Conférence CSS3.CREATE

nightmat

5 juillet 2015 à 12:42:59

L'Autocompleter de Google va chercher ses données chez Google, c'est exactement ce qu'il lui faut, avec des exemples complets et une doc' simple.

Après faut lire par contre.

Ce n'est pas parce que vous ne savez pas vous servir d'un marteau qu'il faut planter des clous au tournevis.

Oldaric

9 juillet 2015 à 13:06:48

Effectivement vous avais raison sur un point nightmat , lautocompleter de google est exactement ce que je recherche , par contre

je n'arrive pas a la mettre en oeuvre , pourtant je peux t'assurer que j'essaye de comprendre

je voudrai juste un type 'input' qui s'autocomplete , sans carte qui s'affiche sans rien , voila et j'ai vraiment du mal

voila mon code html

<!DOCTYPE html>
<html>
  <head>
    <title>Place Autocomplete</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
  </head>
  <body>
    <input id="pac-input" class="controls" type="text"
        placeholder="Enter a location">
   </body>
</html>

https://jsfiddle.net/p4ru2a1v/

je souhaite juste le champs qui s'autocomplete , mais coté javascript script , meme avec la doc de google , je calle

Oldaric

12 juillet 2015 à 21:22:01

je n'ai pas encore trouvé comment faire , je suis perdu dans cette doc

voila mon code html

<!DOCTYPE html>
<html>
  <head>
    <title>Place Autocomplete</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>



    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
	<script>
	
	
	
	var options = {
   types: ['(cities)'],
   componentRestrictions: {country: 'fr'}
};
var input = document.getElementById('where');
autocomplete = new google.maps.places.Autocomplete(input, options);



</script>
  </head>
  <body>
    <input  type="text" id="where" placeholder="Enter a location">
  </body>
</html>

cela ne fonctionne pas

-
Edité par Oldaric 12 juillet 2015 à 21:46:52

Anonyme

28 août 2016 à 13:20:36

up, j'ai un problème similaire

j'ai fait un fichier pour tester la fonction, cela fonctionne.

mais quand je l’intègre dans un autre projet là plus rien ne fonctionne.

Voici mon code qui fonctionne dans le fichier teste.html

 <body>

      <input id="autocomplete" placeholder="Votre adresse"
          name="street"    onFocus="geolocate()" type="text"></input>
        <label class="label">Ville</label>
        <input  id="locality">
    
  
        <label>Régions Etat</label>
        <input class="field"
              id="administrative_area_level_1" >
        <label>Zip code</label>
        <input  id="postal_code"></td>
 

        <label>pays</label>
        <input id="country" ></input>

    <script>
var placeSearch, autocomplete;
var componentForm = {
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};

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

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

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

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}

function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}
// [END region_geolocation]

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=[My API KEy]&signed_in=true&libraries=places&callback=initAutocomplete"
        async defer></script>