Google Maps sur votre page web

Introduction du cours

Bienvenue dans mon premier tutoriel ! :)

Je vais ici vous expliquer comment intégrer une carte Google Maps à votre site et vous décrire les fonctions que vous pouvez ajouter à votre carte. Pour aborder le tutoriel, il faut connaître un minimum le PHP…

Google a une API JavaScript pour Google Maps : dans ce tutoriel, on ne la verra pas, mais on étudiera une classe PHP qui génère ce JavaScript. J'ai retravaillé cette classe PHP pour que le code généré soit aux normes W3C.
Donc si vous ne connaissez rien au JavaScript et que vous voulez quand même une belle carte de Google Maps, alors ce tutoriel est pour vous. ;)

J'espère que ce tutoriel vous plaira et qu'il vous sera utile. N'hésitez pas à donner vos avis et vos conseils dans les commentaires pour que je puisse l'améliorer.

C'est parti !

Présentation de Google Maps

On va commencer de zéro en voyant ensemble ce qu'est Google Maps et ce que l'on peut réussir à réaliser à la fin de ce tutoriel.

Tout d'abord, Google Maps est une plate-forme, développée par le géant américain Google, qui génère une carte mondiale. Vous pouvez rechercher un lieu dans le monde entier ou encore tracer des trajets entre deux lieux. Mais il ne s'arrête pas là, en proposant des vues différentes comme :

• la vue plan ;

• la vue satellite ;

• la vue relief.

Vous l'aurez compris, Google Maps possède de nombreuses compétences intégrées à sa plate-forme et ce tutoriel va vous expliquer comment intégrer une carte à votre site web. Vous pourrez ainsi placer des pointeurs à partir d'une latitude et d'une longitude, ou mieux encore, à partir d'une adresse postale ! Il est fort, ce Google !

Voici ci-dessous une carte de Google Maps. C'est ce genre de carte que vous pourrez intégrer à vos sites :

Les cartes de Google Maps peuvent vous être d'une grande utilité pour rendre dynamique votre site et « gadgeter » un peu votre page web !

Il faut savoir que Google Maps n'est pas à la base de cette API PHP, et que pour créer une carte il faut utiliser le JavaScript.

Quoi ? Mais je ne connais pas le JavaScript…

C'est pour cela que cette API PHP a été développée. Elle a pour but de générer pour vous le code JavaScript sans que vous vous en rendiez compte. :)

Voici quand même la documentation de l'API JavaScript de Google, qui peut servir pour les fans du langage !

Votre première carte

Comme je vous l'ai dit précédemment, nous allons utiliser une classe PHP de Google Maps appelée « GoogleMapAPI V2.5 ».

Euh... c'est quoi, cette classe PHP ?

Cette classe va nous permettre d'appeler des méthodes (quasi similaires à des fonctions PHP, pour faire simple) et celles-ci vont s'occuper de tout pour générer un code JavaScript qui sera votre belle carte !

Pour cela, il faut télécharger cette classe PHP : « GoogleMapAPI V2.5 ».

La seconde étape consiste à obtenir la clef de Google pour utiliser ce script.

C'est payant, tu aurais pu nous le dire !

Absolument pas ! Google a juste créé cette protection pour que vous validiez les conditions générales d'utilisation de cette API.

Il vous suffit d'aller sur la page de Google Maps qui va générer gratuitement votre clef Google en fonction de l'adresse URL que vous aurez entrée.

Remarque : si vous mettez une adresse se terminant dans un dossier, par exemple : http://www.siteduzero.com/dossier/
la carte Google pourra être affichée dans tous les fichiers de ce dossier, dans notre exemple :
http://www.siteduzero.com/dossier/super.php ou http://www.siteduzero.com/dossier/index.php

Cette remarque pourra être utile pour toutes les personnes qui désirent afficher des cartes dans différentes pages ! ;)

Vous allez donc vous retrouver avec une clef unique à votre site une fois que vous aurez entré l'URL du site et accepté les conditions générales d'utilisation.

Conservez cette clef, nous l'intégrerons dans le code dans quelques instants.

Allez : c'est parti, on s'attaque au code. On va donc simplement suivre cinq étapes décrites ci-dessous et reportées en commentaire de code plus bas :

1. inclure la classe PHP : GoogleMapAPI.class.php ;

2. démarrer une nouvelle carte ;

3. déclarer la fameuse clef de Google ;

4. donner des caractéristiques à notre carte (largeur, hauteur…) ;

5. afficher le code XHTML avec les quelques fonctions obligatoires pour que la carte fonctionne.

<?php //(1) On inclut la classe de Google Maps pour générer ensuite la carte. require('GoogleMapAPI.class.php'); //(2) On crée une nouvelle carte; Ici, notre carte sera $map. $map = new GoogleMapAPI('map'); //(3) On ajoute la clef de Google Maps. $map->setAPIKey('<ici la clef Google Maps>'); //(4) On ajoute les caractéristiques que l'on désire à notre carte. $map->setWidth("800px"); $map->setHeight("500px"); $map->setCenterCoords ('2', '48'); $map->setZoomLevel (5); //(5) On applique la base XHTML avec les fonctions à appliquer ainsi que le onload du body. ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>Ma première carte Google Maps</title> <?php $map->printHeaderJS(); ?> <?php $map->printMapJS(); ?> </head> <body onload="onLoad();"> <?php $map->printMap(); ?> </body> </html>

Et voilà, votre première carte Google Maps est intégrée à votre site web ! ;)

Euh… j'ai quelques petites questions sur les caractéristiques de la carte…

Ah oui ! J'allais oublier de vous donner des précisions sur les caractéristiques :
<?php $map->setWidth("800px"); ?> : on définit une largeur de 800 px.
<?php $map->setHeight("500px"); ?> : on définit une hauteur de 500 px.
<?php $map->setCenterCoords ('2', '48'); ?> : on centre la carte sur la France qui a pour longitude 2 et pour latitude 48.
<?php $map->setZoomLevel (5); ?> : le zoom à appliquer sur la carte compris entre 0 et 17.

Certes, pour le moment, il n'y a pas grand-chose, mais la partie suivante vous donnera toutes les caractéristiques possibles à intégrer à votre carte (pointeur, zoom, style de vue par défaut, échelle, distance entre deux points…).

Les caractéristiques applicables à votre carte

Voici ci-dessous des caractéristiques permettant de faire varier votre carte en fonction de vos besoins. Vous connaissez déjà quatre caractéristiques paramétrables de Google Maps, que j'ai été obligé de vous donner pour que vous puissiez voir votre carte : la largeur, la hauteur, le centrage, le zoom ! :p

Vous l'aurez donc compris, toutes les caractéristiques de votre carte Google Maps doivent être définies entre la création d'une nouvelle carte, soit <?php $map = new GoogleMapAPI('map'); ?> et l'affichage de la carte <?php $map->printMap(); ?> .

Vous allez trouver ci-dessous un tableau composé de caractéristiques applicables à votre carte Google Maps, il ne vous restera plus qu'à les déclarer comme bon vous semblera ! :)

Dans ce tableau, j'applique les méthodes (fonctions ;) ) à ma carte déclarée sous le nom de <?php $map; ?> . La déclaration de la carte se fait au début : <?php $map = new GoogleMapAPI('map'); ?> , donc n'oubliez pas de changer de nom si nécessaire.

Structure de votre carteClef Google Maps

Pour faire fonctionner votre carte, vous devez préciser la clef que vous a générée Google Maps.
Bien sûr, vous remplacez : <votre clef api Google Maps> par votre clef :
<?php $map->setAPIKey('<votre clef api Google Maps>'); ?>

Largeur de la carte

Pour que la carte possède une largeur définie, vous pouvez déclarer la largeur en pixels, ou en pourcentage :
<?php $map->SetWidth ('800 px'); //ou $map->SetWidth ('100%'); ?>

Hauteur de la carte

Pour que la carte possède une hauteur de définie
Vous pouvez déclarer la hauteur en pixels :
<?php $map->SetHeight ('800 px'); ?>

Ajuster la carte par rapport à une longitude et une latitude

Cette fonction permet à votre carte d'être centrée par rapport à une longitude et une latitude.
Longitude et latitude sont des nombres (exemple : 2.45678) :
<?php $map->setCenterCoords(longitude,latitude); ?>

ZoomPossibilité de zoomer

Pour que le visiteur puisse avoir ou non accès au curseur du zoom sur la carte.
Pour que le curseur du zoom apparaisse (activé par défaut) :
<?php $map->enableMapControls(); ?>
Pour que le curseur du zoom soit masqué :
<?php $map->disableMapControls(); ?>

Niveau de zoom à l'affichage de la carte

Cette fonction vous permet de préciser le niveau de zoom que vous voulez attribuer à votre carte à son affichage sur la page web. Ce niveau doit être compris entre 0 et 17 (par défaut, il est à 16) :
<?php $map->setZoomLevel(5); ?>

Bouton de zoom

Google Maps vous propose deux possibilités pour afficher un zoom sur la carte. Soit sous forme d'échelle, sur laquelle chaque barreau correspond à un niveau de zoom. Soit un simple + et - sans l'échelle au milieu.
Pour afficher l'échelle (activé par défaut) :
<?php $map->setControlSize('large'); ?>
Pour afficher un simple + et - :
<?php $map->setControlSize('small'); ?>

Niveau du zoom en fonction des pointeurs

Cette fonction va vous permettre de laisser Google Maps décider du niveau du zoom nécessaire pour parvenir à voir tous les pointeurs de la carte. Attention tout de même, si vous désactivez la fonction, pensez à mettre <?php $map->setZoomLevel(6);?> , sinon vous vous retrouverez au barycentre de vos points.
Pour que le zoom soit automatique en fonction des pointeurs (activé par défaut) :
<?php $map->enableZoomEncompass(); ?>
Pour que le zoom ne dépende pas des pointeurs :
<?php $map->disableZoomEncompass(); ?>

Type de vuePossibilité d'affichage des boutons des types de vues

Cette fonction vous permettra d'afficher ou non les boutons « Vue Plan » et « Vue Satellite », ainsi l'association des deux vues.
Pour afficher les boutons des vues (activé par défaut) :
<?php $map->enableTypeControls(); ?>
Pour masquer les boutons des vues :
<?php $map->disableTypeControls(); ?>

Type de vue présélectionnée

Cette fonction vous permettra de choisir le type de vue que vous voulez utiliser sur votre carte.
La vue Plan (activée par défaut) :
<?php $map->setMapType('map'); ?>
La vue Satellite :
<?php $map->setMapType('satellite'); ?>
L'association des vues Plan et Satellite :
<?php $map->setMapType('hybrid'); ?>

L'échelle et la vue d'ensemblePossibilité d'affichage de l'échelle

Cette fonction vous permettra d'afficher ou non l'échelle de la carte, en bas à gauche.
Pour afficher l'échelle (activé par défaut) :
<?php $map->enableScaleControl(); ?>
Pour masquer l'échelle :
<?php $map->disableScaleControl(); ?>

Possibilité d'affichage du repère cartographique en bas à droite

Cette fonction vous permettra d'afficher ou non une petite carte du monde, en bas à droite.
Pour afficher le repère cartographique :
<?php $map-> enableOverviewControl(); ?>
Pour masquer le repère cartographique (activé par défaut) :
<?php $map-> disableOverviewControl(); ?>

Les pointeursAjouter un pointeur avec l'adresse postale

Cette fonction va vous permettre de placer automatiquement un point sur la carte en précisant seulement l'adresse postale complète.
La fonction est constituée de 4 éléments.

• Le premier est l'adresse postale complète à renseigner.

• Le second est le titre de l'infobulle qui s'ouvrira.

• Le troisième est le texte de l'infobulle, il peut contenir du HTML et donc ajouter des images, liens…

• Le quatrième est le texte qui apparaîtra quand on passera le curseur sur un pointeur. C'est comme le « title » d'une image.

<?php $map->addMarkerByAddress( "<addresse_postale>", "<titre de l'infobulle>", "<em>contenu</em> de l'infobulle", "<Title du pointeur>"); ?>

Ajouter un pointeur avec les coordonnées géographiques (longitude et latitude)

Cette fonction va vous permettre de placer automatiquement un point sur la carte en précisant seulement les coordonnées géographiques (longitude et latitude).
La fonction est constituée de 5 éléments.

• Le premier est la longitude à renseigner.

• Le second est la latitude à renseigner.

• Le troisième est le titre de l'infobulle qui s'ouvrira.

• Le quatrième est le texte de l'infobulle, il peut contenir du HTML et donc ajouter des images, liens…

• Le cinquième est le texte qui apparaîtra quand on passera le curseur sur un pointeur. C'est comme le « title » d'une image.