Pour afficher une carte google Map sur son site Internet et ajouter des lieux sur la carte (vous savez, ces petits pins plantés dans la carte), nous allons utiliser l’API google Map ainsi que la technologie AJAX.

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;?>
                  ]
    }
0 réponses

Laisser un commentaire

Participez-vous à la discussion?
N'hésitez pas à contribuer!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.