Nous voilà en route pour un tutoriel sur l'utilisation et la gestion d'une Google Map en ne manipulant que du code PHP. C'est pas génial ?! Vous le savez surement, et ça coule de source, l'API GoogleMaps est, à la base, géré principalement par du JavaScript. Etant donné que certains développeurs ont un peu de mal avec ce langage, et que celui utilisé par l'API GoogleMaps n'est pas du JavaScript de base, des classes PHP on vu le jour. Elles sont nombreuses sur la toile, nous allons nous intéresser à l'une d'entre elles : N/X API to Google Maps.
Pour la télécharger, ils vous suffit de vous rendre sur l'excellent site de PHP Classes, une immense bibliothèque de classes PHP qui vous simplifiera grandement la vie. L'enregistrement est nécessaire pour pouvoir accéder aux fichiers, cela ne prend que quelques secondes et cela vous fera gagner des jours ;) La classe est donc disponible ici : www.phpclasses.org
Une fois téléchargée, nous allons nous intéresser de près à cette classe. Pour ceux qui l'ont parcouru rapidement, vous aurez pu constater que ce sont des méthodes qui génèrent le code JavaScript nécessaire à l'affichage de la carte. Il nous suffit donc d'utiliser ses méthodes pour obtenir ce que l'on souhaite. Vous avez placé votre classe à la racine ou dans un répertoire de votre site ? Alors c'est parti !
La première chose à faire est de récupérer une clé (API Key) gentiment délivrée par Google à cette adresse : Google Maps API Key. Une fois que vous aurez lu l'intégralité de la page, vous devrez renseigner le champ "My web site URL". Il faut saisir l'adresse dans laquelle se trouvera votre GoogleMaps. Si elle est à la base : http://www.monsite.fr/, si elle est dans le répertoire toto : http://www.monsite.fr/toto. Il ne faut surtout pas la changer de place après l'obtention de votre clé, ou alors il vous faudra redemander une clé valide à Google.
Commencez par ouvrir votre classe php, et recherchez-y la ligne suivante (ligne 37 en principe) :
<?php define(GoogleMapsKey, '<your api key here>'); ?>
Remplacez <your api key here> par votre clé valide.
Créez ou ouvrez un fichier PHP dans lequel figurera votre carte. Nous allons commencer par une version de base pour bien assimiler les méthodes.
<?php require "nxgooglemapsapi.php"; // Inclusion de la classe $api = new NXGoogleMapsAPI(); // Création d'une instance de la classe $api->setWidth(800); // Définition de la largeur de la carte $api->setHeight(600); // Définition de la hauteur de la carte ?> <html> <head> <?php echo $api->getHeadCode(); ?> </head> <body onLoad="<?php echo $api->getOnLoadCode(); ?>"> <?php echo $api->getBodyCode(); ?> </body> </html>
Je pense que les commentaires suffisent à la bonne compréhension du script : après avoir créé une instance de la classe, on utilise une méthode chargée de fixer la largeur de la carte et une autre chargée de fixer sa hauteur. Dans le code HTML qui suit, on fait juste appel à des méthodes chargées d'écrire le code javascript nécessaire dans le HEAD, le BODY et les paramètres du BODY.
Et si nous procédions à une utilisation plus poussée de cette classe ? C'est parti !
<?php require "nxgooglemapsapi.php"; // Inclusion de la classe $api = new NXGoogleMapsAPI(); // Création d'une instance de la classe $api->setWidth(800); // Définition de la largeur de la carte $api->setHeight(600); // Définition de la hauteur de la carte $api->setZoomFactor(16); // Définition du zoom $api->addControl(GLargeMapControl); // Ajout des contrôleurs $api->addControl(GMapTypeControl); // Ajout des types de vue $api->addControl(GOverviewMapControl); // Ajout de la carte miniature ?> <html> <head> <?php echo $api->getHeadCode(); ?> </head> <body onLoad="<?php echo $api->getOnLoadCode(); ?>"> <?php echo $api->getBodyCode(); ?> </body> </html>
Quelques explications s'imposent pour ces nouvelles méthodes :
$api->setZoomFactor(16);
Permet de définir la valeur du zoom. Plus le zoom est important, plus la localisation sera précise. La valeur maximum est 17.
$api->addControl(GLargeMapControl);
Permet d'ajouter des contrôleurs pour régler le zoom, et se déplacer sur la carte. Il existe deux types de contrôleurs de tailles différentes. Ceux-ci sont les plus importants. Pour avoir les contrôleurs réduits, il suffit d'utiliser le code suivant :
$api->addControl(GSmallMapControl);
$api->addControl(GMapTypeControl);
Affiche 3 boutons qui vont permettre à l'utilisateur d'afficher la carte en format "plan", "satellite" ou bien "mixte".
$api->addControl(GOverviewMapControl);
Permet d'ajouter une miniature de la carte dans le coin inférieur droit. Cela permet de naviguer plus rapidement sur la carte.
Maintenant que tout cela est vu, nous allons passer à l'ajout d'adresses sur la carte.
<?php require "nxgooglemapsapi.php"; // Inclusion de la classe $api = new NXGoogleMapsAPI(); // Création d'une instance de la classe $api->setWidth(800); // Définition de la largeur de la carte $api->setHeight(600); // Définition de la hauteur de la carte $api->setZoomFactor(12); // Définition du zoom $api->addControl(GLargeMapControl); // Ajout des contrôles (zoom, déplacement...) $api->addControl(GMapTypeControl); // Ajout des types de vue $api->addControl(GOverviewMapControl); // Ajout de la carte miniature $api->addAddress("49 avenue des champs élysées Paris", "Haagen-dazs Paris", true); $api->addAddress("74 avenue des champs élysées Paris", "La Fnac", false); ?> <html> <head> <?php echo $api->getHeadCode(); ?> </head> <body onLoad="<?php echo $api->getOnLoadCode(); ?>"> <?php echo $api->getBodyCode(); ?> </body> </html>
Rien de compliqué. Nous faisons appel à la méthode "addAddress" et nous renseignons dans une premier temps l'adresse (avec rue, ville, CP...), dans un deuxième temps le contenu de l'infobulle et enfin le centrage automatique. Si la valeur est "TRUE", la carte se centrera automatiquement sur l'adresse. Si la valeur est "FALSE", la carte ne sera pas centrée sur l'adresse. À noter que si plusieurs adresses ont l'attribut "TRUE", la carte se centrera sur la dernière adresse ajoutée. De plus, il est possible de faire appel à une méthode de centrage par latitude/longitude :
$api->setCenter('latitude','longitude');
Pour en revenir à l'infobulle, il vous est possible d'y insérer du texte, mais aussi du code HTML avec insertion d'images etc.
Pour terminer ce tutoriel, nous allons implémenter une fonction de recherche sur notre carte avec zone de saisie et renseignement de la latitude et de la longitude.
<?php require "nxgooglemapsapi.php"; // Inclusion de la classe $api = new NXGoogleMapsAPI(); // Création d'une instance de la classe $api->setWidth(800); // Définition de la largeur de la carte $api->setHeight(600); // Définition de la hauteur de la carte $api->setZoomFactor(17); // Définition du zoom $api->addControl(GLargeMapControl); // Ajout des contrôleurs $api->addControl(GMapTypeControl); // Ajout des types de vue $api->addControl(GOverviewMapControl); // Ajout de la carte miniature $api->addAddress("49 avenue des champs élysées Paris", "Haagen-dazs Paris", true); $api->addAddress("74 avenue des champs élysées Paris", "La Fnac", false); ?> <html> <head> <?php echo $api->getHeadCode(); ?> </head> <body onLoad="<?php echo $api->getOnLoadCode(); ?>"> <?php echo $api->getBodyCode(); ?> <form> <input type="text" value="" name="address" id="address" /> <input type="button" value="Rechercher" onClick="moveToAddressDMarker(document.getElementById(’address’).value) ;" /> x : <input type="text" value="" id="coordX" /> y : <input type="text" value="" id="coordY" /> </form> </body> </html>
x représente donc la latitude, et y la longitude. On sort légèrement de la programmation en PHP je vous l'accorde, mais ça reste très abordable ;)
J'en reste là pour ce tuto, je vous laisse l'adapter à vos besoins ;)
05 nov. 2008
novembre 2011
