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;?> ] }
Laisser un commentaire
Participez-vous à la discussion?N'hésitez pas à contribuer!