Mot-clé - GoogleMaps - Jean Christophe Duvivier - Blog

Ils nous l'annonçaient depuis pas mal de temps, et c'est finalement aujourd'hui que Tout le Monde en Blogue a mis en ligne la nouvelle version de son site Internet !

Quels sont les changements majeurs ? (en espérant que les changements que je vais annoncer sont bien nouveaux, et que ce ne sont pas des fonctionnalités que je n'avais pas remarqué sur l'ancienne version).

Tout d'abord vous l'aurez rapidement remarqué, un habillage totalement remanié, aucun rapport avec le précédent. Alors que c'était jusqu'à présent un fond noir et un texte blanc, on a aujourd'hui l'inverse. Vous aurez aussi remarqué un changement de leur icône "publicitaire" (voir la sidebar). Un screenshot vaut mieux qu'un long discours :

Site Internet Tout le Monde en Blogue

Ensuite on remarquera un nouveau bloc : "Qui pointe vers ce blogue ?". Il recense quelques liens externes ou internes qui pointent vers l'adresse du blog. Une source d'information rapide, qui ne concurrent pas un Google Analytics certes, mais qui reste bien pratique.

Géolocalisation Tout le Monde en Blogue On a toujours le bloc de géolocalisation, mais celui de cette nouvelle version propose apparemment de localiser aussi les blogs voisins du blog en concerné. Cependant je ne vois que mon blog sur la carte... Peut-être est-ce encore en développement, ou alors ais-je mal compris ?

Palmarès Tout le Monde en Blogue Ensuite, quelque-chose de tout nouveau (ou alors j'étais passé à côté) : la possibilité d'être fan d'un blog. Tout le monde en Blogue propose donc à ses internautes de s'inscrire en tant que blogueur, mais aussi en tant que fan. Les fans peuvent dès maintenant choisir leur(s) blog(s) préféré(s) et surtout le faire savoir ! Et apparemment, un widget qui permettra de dévoiler les fans de chaque blog est en cours de développement.

À ce titre, Tout le Monde en Blogue cherche des testeurs afin d'améliorer ce futur widget. Si vous êtes intéressés, n'hésitez pas à contacter l'équipe ;)

Enfin, et je terminerai la dessus, nous disposons maintenant de notre palmarès personnel dans les différentes catégories, régions, pays etc. Cela nous donne vite une idée de notre évolution dans le plus grand classement de blogs du web =)

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