API Google map : Etape 1 – Création et affichage d’une carte
Googlemap propose à travers son API libre d’intégrer toutes les fonctions de l’application à vos sites web. Je vais essayer à travers ce tutoriel de vous expliquer dans un premier temps comment mettre en place Googlemap sur votre site web, puis nous verrons comment gérer les interactions entre une base de données ( ici MySQL ) et l’API.
1. Création des fichiers necessaires
Voici la liste des fichiers qui seront nécessaires dans ce tutoriel :
- index.php – Notre index, il contiendra les fonctions nécessaires et appellera les différentes pages.
- geolocalisation_javascript.php – Ce fichier contiendra les fonctions javascript pour le fonctionnement de l’API.
- geolocalisation.php – Notre carte.
- ajout.php – Cette page permettra l’ajout à la base de données de nouvelles adresses.
- mysql_connect.php – Notre fichier de connexion à la base de données MySQL.
Vous pouvez directement télécharger les sources ici.
2. Générer une "API key" pour son site
Pour utiliser librement Googlemap sur votre site, vous devez dans un premier temps générer une clé ici. Cette clé nous servira a "authentifier" notre site lors de l’initialisation de l’API. Commençons donc par rajouter le javascript permettant d’utiliser l’api à notre fichier "index.php" entre les balises <head> et </head> :
<script src="http://maps.google.com/maps?file=api&v=2.x&sensor=false&key=YOURKEY" type="text/javascript"></script>
Remplacez YOURKEY par la clé que nous avons généré.
On va également en profiter pour inclure la page qui contiendra tout le code javascript :
<?php include("geolocalisation_javascript.php");?>
Pour terminer, on va ajouter un moyen de naviguer entre nos deux pages principales ( Ajout d’un point via « ajout.php » & Affichage de la carte via "geolocalisation.php" ) entre les balises <body> et </body> :
<ul>
<li><a href="index.php?page=geolocalisation">Geolocalisation</a></li>
<li><a href="index.php?page=ajout">Ajout</a></li>
</ul>
<?php
if ($_GET['page'] == 'geolocalisation') { include("geolocalisation.php"); }
elseif ($_GET['page'] == 'ajout') { include("ajout.php"); }
else { }
?>
Rien de bien compliqué ici, c’est assez basique, si vous possédez déjà un site et que vous procédez à une intégration de googlemap, vous pouvez sauter cette étape.
3. Initialisation et affichage de la carte
Pour le moment, vous ne voyez rien et c’est tout à fait normal. On va voir comment initialiser la carte une fois l’authentification avec la key reussie.
On va commencer par le fichier "geolocalisation.php" qui je vous le rappelle est le fichier ou la carte sera affichée. Editez donc ce fichier et collez y le code suivant :
<h1>Géolocalisation</h1> <h2>Carte</h2> <div id="map_canvas" style="width: 700px; height: 350px;margin-top:5px;"></div>
Je vous passe le détail de la ligne 1 et 2 c’est de la simple mise en page.
Passons a la ligne
<div id="map_canvas" style="width: 700px; height: 350px;margin-top:5px;"></div>
On créer une div avec comme id "map_canvas", cette id indiquera a la fonction JS d’afficher la map dans cette div. On lui attribue ensuite une taille, ici 700px de large pour 350px de haut. Une petite marge au dessus pour la mise en page et c’est terminé !
Passons ensuite aux choses serieuses. Ouvrez votre fichier "geolocalisation_javascript.php" et collez y le code suivant je vous l’expliquerai juste en dessous :
<script type="text/javascript">
var map = null;
var geocoder = null;
var marker;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
geocoder = new GClientGeocoder();
map.setUIToDefault();
}
</script>
Explications :
<pre> var map = null; var geocoder = null; var marker;
Simple initialisation de variables qui nous serviront dans les fonctions JS.
function initialize() {
On créer une nouvelle fonction que l’on appelle "initialize()"
if (GBrowserIsCompatible()) {
Vérification si le browser est compatible… Si ce n’est pas le cas, je vous laisse gérer l’affichage d’un petit message d’erreur 
.
map = new GMap2(document.getElementById("map_canvas"));
C’est ici que l’on va demander au code JS de créer la carte de de l’afficher dans la div que l’on a créer précédemment, d’où l’importance de définir une ID à notre div.
geocoder = new GClientGeocoder();
Créer une nouvelle instance de Geocoder, cela nous permettra d’envoyer des requêtes aux serveurs Google Map.
map.setUIToDefault();
Utilisation de l’interface de navigation de base de Google Map.
Voila ! Rendez-vous sur votre index.php, cliquez sur géolocalisation et si tout va bien, vous devriez obtenir le résultat suivant :
Félicitations ! Nous verrons dans la prochaine étape comment ajouter un champ de recherche afin de zoomer sur une partie de la carte. D’ici la, n’hésitez pas à consulter les sources!
Pas de commentaire »
Pas encore de commentaire.
Laisser un commentaire