le MEMO du WEB développeur
••• Divers •••  Liste des Mémos, astuces et bonnes pratiques

Afficher une carte Google Map sur son site Internet avec PHP / Javascript

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).

Vous trouverez un exemple de cette technique sur ce site de bonnes adresses à Marseille.

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;?>
                  ]
    }
 

 

publié le 01/08/2013 par Memo Web
Google Map
Commentaire :
quand j'ajoute une colone a la table et je fait l'appel elle apparait undefined
par inconnu, le 02/10/2013
Commenter le Mémo :

Vérifier la hierarchie de ses balises de titre h1, h2, h3 ... pour le référencement
Sécuriser l'accès à un répertoire avec un fichier .htpasswd
Enlever ou imposer les www de l'URL de mon site avec un fichier .htaccess
Etapes pour Installer Sencha Touch
Familles de polices avec un largeur de lettres fixe
Script pour jongler avec les octets - Convertir octet / ko / Mo / Go
Configurer l'encodage UTF-8 d'une base de données et des fichiers d'un site Internet
Personnaliser la page d'erreur 404
Rediriger un nom de domaine Gandi vers un hébergement 1&1
Imposer une taille max aux fichiers uploadés sur le serveur
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