le MEMO du WEB développeur
 

••• API Google Map •••   Liste des Mémos, astuces et bonnes pratiques

Tutoriel pour afficher et localiser une adresse sur Google Map - Divers

Tapez une adresse :

Voici un petit tutoriel pour apprendre à afficher sur son site Internet une carte Google Map et y insérer un marqueur de lieu.

Le lieu à insérer étant tapé dans un formulaire de recherche sur le site Internet (Voir exemple sur cette page), c'est l'API Google map qui cherche ses coordonnées latitude longitude pour ensuite afficher l'adresse sur la carte.

Déclarer le script de l'API Google Map

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&language=fr">
</script>

Créer le formulaire HTML de recherche d'une adresse ou d'un lieu sur Google Map

Ce code HTML comprend :

  • Un formulaire de recherche de lieu
  • Un conteneur div de la carte Google Map
  • Un <span></span>, qui contiendra les coordonnées latitude et longitude du lieu s'il est trouvé par l'API google map.
<form>
  <input type="text" id="adresse"/>
  <input type="button"  value="Localiser sur Google Map" onclick="TrouverAdresse();"/>
</form>
<span id="text_latlng"></span>
<div id="map-canvas" style="float:right;height:220px;width:45%"></div>

Code javascript d'appel à l'API de Google Map : Trouver une adresse sur la carte

Le code javascript comprend

  • la fonction de création de la carte google map initialiserCarte() avec des paramètres par défaut concernant le point sur lequel elle est centrée exprimé en (latitude, longitude) [Connaitre la latitude et longitude d'un point avec Google Map], le pourcentage de zoom sur la carte et le type de carte.
  • La fonction TrouverAdresse() lancée sur la validation du formulaire qui
              - Va rechercher les coordonnées GPS du lieu tapé dans le formulaire de recherche (input text d'identifiant "adresse")
              - Passe ensuite ces coordonnées en tant que centre de la carte google map
              - Affiche ces coordonnées dans le span  d'identifiant text_latlng 
            
      - Crée un marqueur (épingle) de lieu à l'emplacement du lieu trouvé
<script type="text/javascript">
var geocoder;
var map;
// initialisation de la carte Google Map de départ
function initialiserCarte() {
  geocoder = new google.maps.Geocoder();
  // Ici j'ai mis la latitude et longitude du vieux Port de Marseille pour centrer la carte de départ
  var latlng = new google.maps.LatLng(43.295309,5.374457);
  var mapOptions = {
    zoom      : 14,
    center    : latlng,
    mapTypeId : google.maps.MapTypeId.ROADMAP
  }
  // map-canvas est le conteneur HTML de la carte Google Map
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

function TrouverAdresse() {
  // Récupération de l'adresse tapée dans le formulaire
  var adresse = document.getElementById('adresse').value;
  geocoder.geocode( { 'address': adresse}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      // Récupération des coordonnées GPS du lieu tapé dans le formulaire
      var strposition = results[0].geometry.location+"";
      strposition=strposition.replace('(', '');
      strposition=strposition.replace(')', '');
      // Affichage des coordonnées dans le <span>
      document.getElementById('text_latlng').innerHTML='Coordonnées : '+strposition;
      // Création du marqueur du lieu (épingle)
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    } else {
      alert('Adresse introuvable: ' + status);
    }
  });
}
// Lancement de la construction de la carte google map
google.maps.event.addDomListener(window, 'load', initialiserCarte);
</script>

Vous trouverez un exemple d'utilisation de ce code mis en place sur ce site : citadineries.fr

 

publié le 01/08/2013 par Memo Web
Google Map
Commentaire :
Merci beaucoup, explications claires et pr�cises ! En plus cela fonctionne tr�s bien ! merci beaucoup. Balthus
par inconnu, le 19/11/2015
Bonjour, j'ai essay� d'int�grer votre code dans mon site wordpress mais cela ne marche pas. Auriez-vous plus d'informations sur comment adapter ce code pour la plateforme wordpress ? Merci d'avance. Voici mon email : quefsi@gmail.com.
par inconnu, le 26/07/2015
Excellent tuto, qui fonctionne du 1er coup ! Génial !
Ce qui serait encore mieux et c'est ce que je cherche, c'est la possibilité de déplacer le curseur après avoir indiqué une adresse ceci afin de rajouter une précision supplémentaire sur le lieux ... si quelqu'un a ça ? Je suis grandement preneur (pascalpujades@gmail.com).
Merci d'avance,
par inconnu, le 02/08/2014
Bonjour, merci pour ce super tutoriel cependant, j'ai intégré cette map dans une page ASP.Net et lorsque je clique sur le bouton, la map ne change pas, je pense que c'est dû au fait que la fonction initialiserCarte() et à chaque fois appelée, sûrement dû au PostBack. Avez-vous une solution ?
par inconnu, le 02/04/2014
Merci pour ce tuto, c'est vraiment intéressant pour mon petit projet! ;)
par inconnu, le 09/02/2014
Bonjour et mille merci pour ce tuto, j'aimerai savoir comment proceder pour mettre plusieurs marqueurs par defaut sur ma carte pour utiliser les coordonnées saisies dans le formulaire comme reference. merci
par inconnu, le 06/02/2014
Bonjour et mille merci pour ce tuto, j'aimerai svp savoir comme ajouter un certain nombre de marqueurs par defaut pour pouvoir me localiser par rapport a ces marqueurs là. Merci
par inconnu, le 06/02/2014
Bonjour, Merci pour ce tuto, je cherche à l'intégrer dans mon site mais je voudrais construire la carte en récupérant les coordonnées gps de l'adresse ip du visiteur en lui affichant l'endroit où il se trouve. Je galère avec geoplugin et maxmind, qui ne me renvoie pas des informations précises et correctes ! Auriez-vous une idée ?
par dom86, le 25/11/2013
Commenter le Mémo :

Afficher une carte Google Map sur son site Internet avec PHP / Javascript - Divers
Retrouver les coordonnées latitude longitude d'un endroit avec Google Map - Divers
Ajoutez vos propres Mémos sur MEMO-WEB

Il suffit de vous créer un compte sur le site

Vous pourrez choisir un thème parmis l'une des catégories proposées par MEMO-WEB.

Rédigez votre Mémo.
Après validation par MEMO-WEB, il sera mis en ligne.
Ajouter vos Mémos