Intégrer l'API Google Maps - Programmation

Navigation: Pages Webmaster > Programmation

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.

Partager cette page sur :

         

Commentaires

Enfin une explication
Envoyé par le 18/01/2006

Merci pour ces explication qui permettent de décoder un peu..

coordonnées
Envoyé par le 18/01/2006

lorsque j'utilise " new GPoint(48.378145469762444, -4.371185302734375)" pour créer une ligne, avec la fonction "new GPolyline" la carte ne restitue pas la bonne localisation, il me faut indiquer long/lat pour obtenir quelque chose de correcte. Quel est mon probleme ?

==> Avec cette localisation là, vous êtes du coté de Brest, exactement à Plougastel-Daoulas (ou son voisinage).
Pour faire un new GPolyline à partir de ce point, il faut centrer la carte sur le Gpoint.

GPolyline
Envoyé par le 18/01/2006

merci pour ce rapide retour,
j'ai trouvé une solution, si j'utilise "new GPoint" le trait se retrouve sur l'afrique,

var trait1 = new GPolyline([
new GPoint(48.45835188280866, -1.7578125),
new GPoint(30.751277776257812, 24.609375)]," #FF0033",5, 0.5);
map.addOverlay(trait1);

par contre, si j'utilise "GLatLng" c'est correct !
var trait1 = new GPolyline([
new GLatLng(48.45835188280866, -1.7578125),
new GLatLng(30.751277776257812, 24.609375)]," #FF0033",5, 0.5);
map.addOverlay(trait1);

pourquoi lors de l'utilisation de "GPoint" dans "new GPolyline" les coordonées sont elles utilisées Longitude/Latitude ?

encore merci pour vos explications sur l'api de google maps.

reponse
Envoyé par le 18/01/2006

je viens de trouver ma réponse sur : http://www.econym.demon.co.uk/googlemaps/index.htm

"Le principal changement de la version 2 est que GPoint () n'est plus employé pour identifier un endroit géographique. GPoint () existe toujours, mais il est seulement employé pour indiquer des positions en Pixel sur l'écran. Les endroits géographiques sont indiqués avec le nouvel objet GLatLng (). Les paramètres pour GLatLng () sont dans l'ordre : latitude , longitude. C'est plus exact pour tracer, mais c'est opposée aux paramètres de GPoint (). Tout qui employait GPoint () pour indiquer un endroit géographique maintenant emploie un objet de GLatLng () à la place".

si cela peut servir :)

Existe t-il un service complet en Français ?
Envoyé par le 18/01/2006

Bonjour, et merci pour ces infos précises. Elles complètent un article sur le même sujet trouvé sur resau.erasme.org.

Question complémentaire : connaîtriez-vous un service "prêt à l'emploi" et en français qui permettrait d'utiliser Google map associé à une base. J'en ai seulement trouvé qu'en anglais (gmapez sur bluweb.com ; frappr.com)

Afficher les marqueurs automatiquement
Envoyé par le 18/01/2006

Bonjour,

j'aimerais intégrer Google Maps à mon site.
J'aimerais voir tous les casinos en france, comme si j'avais fait une recherche "caisno france" et que je voulais zommer sur certaines régions pour voir où ils se trouvent.
Vos astuces sont très intéressantes merci !

Autres publications Programmation

Ecrire dans une image à la volée (le 08/01/2010 - 219 lectures)

Redimensionner photo pour le web mobile (le 15/02/2009 - 2.252 lectures)

Passer au web version mobile (le 09/02/2009 - 2.477 lectures)

Structure pour web mobile (le 09/02/2009 - 2.362 lectures)

Faut il externaliser ses scripts (le 09/12/2008 - 1.748 lectures)

Reseau Social Friend connect (le 05/12/2008 - 1.453 lectures)

Feuilles de styles statiques (le 09/11/2008 - 1.120 lectures)

Optimiser ses scripts (le 05/10/2008 - 1.099 lectures)

Optimiser la lecture des feuilles de style (le 01/10/2008 - 1.067 lectures)

YSLOW : composant compressé (le 20/09/2008 - 1.302 lectures)

Yslow : les pages dynamiques ou statiques sont persitantes (le 12/09/2008 - 1.161 lectures)

YSLOW : Réduire le nombre de requêtes (le 31/08/2008 - 1.543 lectures)

Améliorer la vitesse d'un site coté serveur (le 30/08/2008 - 1.968 lectures)

GoogleEarth kml et flux rss (le 20/06/2008 - 1.972 lectures)

Annuaire thématique cartographié (le 05/12/2007 - 5.957 lectures)

Adapter son site à la résolution d'écran (le 23/11/2007 - 9.944 lectures)

L'API Google Maps Xml et Ajax sont sur un site web (le 19/11/2007 - 6.901 lectures)

Intégrer l'API Google Maps (le 18/01/2006 - 62.257 lectures)

Software 2.0 - Programmation en Java (le 04/04/2005 - 5.690 lectures)

Web phortail.org

• ETL domaine decisionnel
• Temoigner sur le stress au travail
• L'individu au coeur du bilan de compétences
• Nouveautés réseaux sociaux
• Présentation du livre les sept habitudes