Nous supposeront que les coordonnées GPS des points à indiquer sur la carte sont stockés dans une table de notre base de données.
Nous construisons donc notre carte, centrée sur un point précis à définir, et nous iront récupérer les coordonnées des lieux à afficher dans la base de données grâce au binôme AJAX / JQuery et nous créeront sur la carte et à la volée des marqueurs représentant chacun de ces points.
Il est possible d’ajouter du texte en légende de chacun de ces marqueurs qui apparait lorsqu’on clique sur le marqueur google map (titre_lieu dans l’exemple ci dessous) et de leur affecter un lien html (url_lieu).

Créez 3 fichiers :

• index-map.php
• index-map.js
• index-map-ajax.php

Vous pouvez relire le memo : Principe des requêtes Ajax en Jquery pour vous remettre les idées au claire concernant l’utilisation des appels Ajax en JQuery.

Mise en place du code HTML ,  conteneur de la carte Google map

index-map.php

<div id="carte" style="width:300px; height:300px"></div>

Déclaration du script de l’API Google Map

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

Code Javascript de création de la carte Google Map. Ajout de lieux sur la carte Google Map

Paramétrage des marqueurs (taille, couleur)
Création de l’objet Google Map new google.maps.Map() , paramétrage de ses options (zoom, point central, type de carte …)
Récupération en AJAX de données concernant les lieux et création de marqueurs associés à chaque lieu.

index-map.js

$(document).ready( function () {
    // Paramétrage des marqueurs
    var pinColor = "29aec3";// couleur des épingles google MAP
    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));
    var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
        new google.maps.Size(40, 37),
        new google.maps.Point(0, 0),
        new google.maps.Point(12, 35));
 
  function initialiser() {
    // Récupération de la latitude et longitude pour centrer notre carte
    var latlng = new google.maps.LatLng(43.295309,5.374457);

    //Objet contenant des les propriétés d'affichage de la carte Google MAP
    var options = {
          center    : latlng,
          zoom      : 14,
          mapTypeId : google.maps.MapTypeId.ROADMAP
                  };
  
    //Constructeur de la carte
    var carte = new google.maps.Map(document.getElementById("carte"), options);
  
    // Récupération en AJAX des données des lieux à épingler sur la carte Google map
    $.ajax({
       url   : 'index-map-ajax.php',
       error : function(request, error) { // Info Debuggage si erreur         
                 alert("Erreur sous genre - responseText: "+request.responseText);
                },                
    dataType : "json",  
    success  : function(data){
                  $("#carte").fadeIn('slow');
                  var infowindow = new google.maps.InfoWindow();    
                  var marker, i;   
                  // Parcours des données reçus depuis le fichier index-map-ajax.php
                  // Récupération de LatLng, Hint et Legende de chaque lieu et création d'un marqueur
                  $.each(data.items, function(i,item){
                     if (item) {
                        if (item.LatLng_lieu!=''){
                           // On sépare la latitude et la longitude
                           var strLatLng = item.LatLng_lieu.split(',');
                           marker = new google.maps.Marker({
                             position : new google.maps.LatLng(strLatLng[0], strLatLng[1]),
                             map      : carte,
                             icon     : pinImage,
                             shadow   : pinShadow,
                             title    : item.Titre_lieu
                            });          
                  google.maps.event.addListener(marker, 'click', (function(marker, i) {
                   return function() {
                   // Affichage de la légende de chaque lieu
                   infowindow.setContent('<a target="_blank" href="'+item.Url_lieu+'"><br/>'+item.Titre_lieu+' </a> ');
                   infowindow.open(carte, marker);
                  }
                })(marker, i));                              }         
                //alert('Vérification données reçues '+item.Titre_lieu+' -- '+item.Url_lieu+ ' -- '+item.LatLng_lieu);
              }
            });                        
          }
        }); 
      }initialiser();
  })

Récupération en AJAX  des lieux à afficher sur la carte Google Map

Nous chargerons dans ce fichier les données de localisation enregistrées en base de données et les afficherons sous forme de données JSON.

Nous supposerons donc ici que nous avons une table nommée lieux comprenant les champs

• latlng_lieu :  « latitude,longitude » du lieu. Doit être enregistré sous la forme « 43.295309,5.374457 »
• titre_lieu
• url_lieu

Mémo pour connaître la latitude et longitude d’un lieu

index-map.ajax.php

<?php
  // Accès à la base de données
  $serveur     = "monserveur.com";
  $utilisateur = "dbxxxxxx";
  $motDePasse  = "mon_mot_de_passe_BDD";
  $base        = "dbxxxxxxxx";
  mysql_connect($serveur, $utilisateur, $motDePasse);
  mysql_select_db($base) or die("Base de données inactive. ");
  // $items est la chaîne contenant l'objet JSON des données
  $items = '';

  // Parcours des lieux
  $result = mysql_query("SELECT* FROM lieux ");
  WHILE ($row = mysql_fetch_object($result)) {   
   // Ecriture des données sous format JSON   
$items .= <<<EOD
   { "LatLng_lieu" : "$row->latlng_lieu",
     "Titre_lieu"  : "$row->titre_lieu",
     "Url_lieu"    : "$row->url_lieu"},
EOD;
    }
    mysql_free_result($result);
 
  // On enlève la dernière virgule
  if ($items != ''){
     $items = substr($items, 0, -1);
  }
 
  // Ecriture de la liste des lieux en format JSON
    header('Content-type: application/json');
    ?>
    {   
        "items": [
                  <?php echo $items;?>
                  ]
    }

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>

Les coordonnées latitude longitude apparaissent dans la barre de recherche de google map.