Si jamais vous êtes en train de développer un site, vous aurez sans doute besoin d’utiliser la librairie « Google Places » afin de pouvoir récupérer des adresses et/ou coordonnées géographiques de certains point pour les localiser.
A travers cet article nous allons voir comment se servir de cette merveilleuse librairie Google.
Pour commencer nous allons donc inclure la librairie via cette ligne :
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
On va ensuite ajouter la carte Google sur notre page en y insérant ce code pour afficher la div contenant la map
<div id="map_canvas"></div>
Nous allons également lui donner un style, mettez dans le début de votre fichier ceci
<style>
#map_canvas {
height: 400px;
width: 600px;
margin-top: 0.6em;
}
</style>
Il nous faut également créer une balise input qui va permettre de créer l’autocomplet
<input type="text" name="city" id="city_form_affinage" placeholder="Lieu" />
Et maintenant on va mettre le script qui permet de faire tourner Google et son autocomplete
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-33.8688, 151.2195),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var input = document.getElementById('city_form_affinage');
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
});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
// Inform the user that the place was not found and return.
input.className = 'notfound';
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.
}
var image = new google.maps.MarkerImage(
place.icon,
new google.maps.Size(71, 71),
new google.maps.Point(0, 0),
new google.maps.Point(17, 34),
new google.maps.Size(35, 35));
marker.setIcon(image);
marker.setPosition(place.geometry.location);
});
}
google.maps.event.addDomListener(window, 'load', initialize)
Et voilà, après libre à vous d’en extraire les données qui vous intéresse afin de coller au mieux à votre cahier des charges.
Si jamais vous avez besoin d’aide, la documentation de Google est très bien fourni, la voici
https://google-developers.appspot.com/maps/documentation/
Salut,
ton tuto est bien détaillé, cependant la map je l’ai testé de mon côté et la map n’apparait pas. En revanche l’autocomplete semble fonctionner.
Voici le code assemblé :
Google Maps JavaScript API v3 Example: Places Autocomplete
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-33.8688, 151.2195),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(‘map_canvas’),
mapOptions);
var input = document.getElementById(‘city_form_affinage’);
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
});
google.maps.event.addListener(autocomplete, ‘place_changed’, function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
// Inform the user that the place was not found and return.
input.className = ‘notfound’;
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.
}
var image = new google.maps.MarkerImage(
place.icon,
new google.maps.Size(71, 71),
new google.maps.Point(0, 0),
new google.maps.Point(17, 34),
new google.maps.Size(35, 35));
marker.setIcon(image);
marker.setPosition(place.geometry.location);
});
}
google.maps.event.addDomListener(window, ‘load’, initialize)
Salut,
Il ne faut pas oublier de mettre le CSS pour faire afficher la div qui contient ta carte google map
question simple mais reponse introuvable
Bonjour je cherche a mettre en vente mon appart et je voudrais faire la meme chose que sur ce site avec la possibilité au gens de recherches leur points d interet a proximité de mon appartement en un clic
http://www.efficity.com/bien-montreuil-sous-bois/maison-montreuil-sous-bois-93100_2458519/
Est ce facile et surtout réalisable?
Merci Charles
Bonjour,
Tout est possible tout dépends de votre niveau de programmation dans le langage dont vous souhaitez le faire et l’endroit où vous souhaitez l’implémenter
Cordialement,
Frederique
Bonjour et merci pour le Tuto!
Je voulais savoir si l’autocomplete de Google était payant? D’après mes premiers tests il n’y a que 1000 requêtes gratuites / jour avant la version payante. Or chaque lettre équivalant à une requête ça nous laisse peu de marche de manœuvre. As-tu déjà rencontré ce problème? Y a-t-il un moyen de le contourner?
Merci d’avance!
@ntoine
bonjour Fredods je voudrais faire un autocomplete qui recherche dans toutes les tables de ma base de donnée et affiche le résultat en fonction de la saisie de l’utilisateur, jusque la je ne peut que recherche dans une seule table
merci de m’aider
Bonjour Carl,
Il te suffit simplement de revoir ta requête SQL pour lui permettre de rechercher dans plusieurs tables à la fois le terme que l’utilisateur aura saisie.
Tu rajoutes tes autres tables dans le FROM
Et dans la requête WHERE tu as dois avoir
table1.champs1 LIKE % »[SAISIE_UTILISATEUR] »% OR table2.champs2 LIKE % »[SAISIE_UTILISATEUR] »% OR table3.champs3 LIKE % »[SAISIE_UTILISATEUR] »% OR table4.champs4 LIKE % »[SAISIE_UTILISATEUR] »% OR table5.champs5 LIKE % »[SAISIE_UTILISATEUR] »%