Projet Webmaster PHP

Portail Php

Intégrer l'API Google Maps

Le service de cartographie présenté dans l'article Cartographie et Google Maps peut être intégré sur un site web.

Pour ce faire il est nécessaire d'obtenir une licence d'utilisation de l'API auprès de google et de l'utiliser pour le répertoire du site web ainsi déclaré. Cette licence se matérialise par une clé.

Le code source de la page qui utilisera l'API devra ainsi contenir votre clé

L'ensemble de la programmation est réalisé en javascript, avec possibilité d'utiliser les balises XML. Le tout peut être intégré dans du php pour pouvoir utiliser les variables. L'ensemble peut également faire l'objet d'url rewriting pour obtenir des url propres.

Au niveau du rendu de la carte google, il est possible de jouer avec les contrôles pour permettre ou interdire, afficher ou non certaines options.
Dans les principaux contrôles, nous trouvons :
- un zoom simple ou avec échelle

map.addControl(new GLargeMapControl());

- le choix dans le type de carte plan, satellite ou mixte

map.setMapType(G_SATELLITE_MAP); // Vue satelite
map.setMapType(G_NORMAL_MAP); // Vue carte
map.setMapType(G_HYBRID_MAP); // Vue mixte

- l'affichage ou non de l'échelle des distances

map.addControl(new GScaleControl()) ;

Dans les autres possibilités
GSmallMapControl() Navigation dans les 4 directions et zoom (+) zoom (-)
GLargeMapControl() Navigation dans les 4 directions et zoom (+) zoom (-) avec échelle
GSmallZoomControl() Les zoom (+) zoom (-) .

L'API permet de modifier des valeurs, mais également de pouvoir les interroger pour récupérer leur statut.
Les principales possibilités unitaires de l'API google maps sont ainsi :
- Affichage de la carte en un point donné
Il s'agit à partir des coordonnées en latitude longitude de centrer la carte sur ce point avec un certain niveau de zoom.

map.setMapType(G_SATELLITE_MAP);
map.setCenter(new GLatLng(2.2944259643554688, 48.85817876694892), 3); //Position sur la Tour Eiffel

- Matérialisation de points sur la carte sous forme d'icônes
Il s'agit d'afficher des icônes sur la carte, avec différentes coordonnées. Les icônes peuvent être distinguées par forme, par couleur.

// Création de mini icones
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);

// Fonction de création de points et utilisation des icones
function createMarker(point) {
var marker = new GMarker(point, icon);
return marker;
}

var eiffel = new GPoint(2.2944259643554688, 48.85817876694892);
var marker = createMarker(eiffel);
map.addOverlay(marker);

- Affichage de légende sous forme de bulle de bande dessinée et dont le contenu peut être du texte, ou du code HTML.
Il s'agit d'afficher une bulle d'information lorsque une balise est cliquée (par exemple). Un des plus étant de permettre du HTML et donc d'illustrer le lieu par une image.

// Fonction de création de point avec légende et utilisation des icones
function createMarker(point, legende) {
var marker = new GMarker(point, icon);
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(legende);
});
return marker;
}

var eiffel = new GPoint(2.2944259643554688, 48.85817876694892);
var marker = createMarker(eiffel, "
La Tour Eiffel");
map.addOverlay(marker);

- Traçage de traits.
Il s'agit de relier par un trait deux points distincts. La couleur, l'épaisseur et l'opacité du trait sont modifiables.
La liste des points pouvant être encodée, c'est un réel service de tracé d'itinéraire qu'il est possible de mettre en oeuvre.

var polyline = new GPolyline([
new GLatLng(48.8581, 2.2944),
new GLatLng(48.8681, 2.2844)
], "#FF6600", 10);
map.addOverlay(polyline);

À partir de ces différents éléments et contrôles que l'on peut intégrer avec l'API Google Maps, il est possible de réaliser des fonctions très intéressantes voire de réels services web.