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 se 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 echelle
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, "<img src='tour-eiffel.jpg'>
La Tour Eiffel");

map.addOverlay(marker);



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



A 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.



43 visiteurs connectés