Tutoriel pour afficher et localiser une adresse sur Google Map

}); })(jQuery, this);

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>