7
22 aoû 2008

attention_light.jpgL'API Google Maps v2 est dépréciée depuis le 19 mai 2010.

Introduction


L'API Google Maps permet d'intégrer une carte semblable à celle de Google dans ses pages Web en utilisant un peu de Javascript.

Appel à l'API grâce à la clé


Pour utiliser l'API Google Maps, il est nécessaire d'obtenir une clé gratuite à cette adresse. Et d'écrire cette ligne dans le de la page HTML qui contiendra la carte Google Maps :

  • v=2.x : ici on note la version de l'API utilisée dans notre projet : - 2.x correspond à la dernière version de l'API - 2.s correspond à la dernière version stable de l'API - 2 correspond à la version courante Détail des changements de l'API : http://mapki.com/wiki/Changelog

NB : Nous utiliserons par la suite toujours la version courante de l'API afin d'éviter les mauvaises surprises.

Code Javascript de déclaration de la carte


Nous déclarons la fonction initialize() qui sera chargée lors du chargement de la page Web. Cette fonction contient les instructions afin de déclarer la carte Google Maps. La structure conditionnelle 'if then else' permet d'alerter l'utilisateur si son navigateur n'accepte pas le JavaScript grâce à la fonction GBrowserIsCompatible(). Nous déclarons ensuite l'objet map qui sera affiché dans le bloc dont l'identifiant sera 'map_canvas' de la page HTML : var map = new GMap2(document.getElementById('map')); et définissons un centre et un niveau de zoom pour cet objet. map.setCenter(new GLatLng(43.57691664771851, 1.402451992034912),15);

Code HTML


Afin d'afficher la carte, il est nécessaire de déclarer un bloc div qui contiendra la carte :

Et il faut appeler la fonction initialize() lors du chargement de la page : La fonction GUnload() permet de libérer la mémoire lorsque l'on quitte la page Web.

Code complet


Code : [Google Maps] 1. Introduction à Google Maps


Démonstration


A propos de l'auteur: 

Commentaires

Bonjour,
Je suis nul de chez nul en informatique, alors pitié avant de me taper sur la tète.

Quel est l'intérêt de toute votre programmation sachant qu'il y a un lien copiable dans une page html en haut à droite de sa propre carte ?

Google map limite à 200 les marqueurs affichables par carte. Est ce que votre "bidouille" permet de s'affranchir de cette contrainte ? (j'ai besoin d'afficher une carte avec ~2000 marqueurs)

Merci (et pardon)

Bonjour,
l'intérêt de toute cette programmation, ce n'est pas de faire joli, mais essayer d'exploiter les possibilités qu'offrent les API - que ce soit Google Maps ou OpenLayers.
Il est certain que pour afficher une carte simple avec quelques marqueurs il est inutile d'avoir recours à tout ce qui est écrit dans ce site.
Par contre, pour des demandes un peu plus spécifiques - afficher 2000 marqueurs par exemple - il devient nécessaire de comprendre les concepts des API offertes à l'utilisateur.
Il est donc tout à fait possible d'afficher plusieurs centaines de marqueurs avec ce 'code bidouille :-)' - mais il convient de réfléchir à la manière de représenter les données : 2000 marqueurs sur une carte, ça devient vite illisible et gourmand pour le client (ie. le navigateur). C'est pourquoi, il faudrait aller voir du côté des tutoriaux spécifiques à l'affichage d'un grand nombre de données :
- Google Maps : Clusterisation côté serveur - Ajax, PHP et PostGIS
- OpenLayers (cluster strategy) : Utiliser la fonctionnalité Strategy d'OpenLayers 2.7

Bon courage et surtout n'hésitez pas à aller poser vos questions sur des forums dédiés à ces technologies : ForumSIG et GeoRezo.

Bonjour, je trouve ce howto super bien fait.
Je voudrais faire la même chose sauf que je voudrais permettre à l'utilisateur de marquer des lieux juste en saisissant une adresse.
Je vais essayer d'expliquer vite fait ce que je dois faire,je suis entrain de créer un site pour une association et les administrateurs (non informaticiens ) veulent pouvoir rajouter par eux même des adresse de sites touristiques en France accessibles aux personnes handicapées (faut dire que j'utilise un CMS (drupal) qui leur permet pas mal de chose et donc ils veulent ça aussi).Si c'était moi qui référencé ces sites je les chercherais sur google map et je collerais le code qu'il donne dans le lien nommé "lien" et ça serait vite fait et je listerais mes liens vers les carte montrant l'emplacement du site grace au module view de drupal.
merci de me mettre sur une piste si vous voyez une solution.

Bonjour et merci pour ce tuto bien expliqué.

J'ai inséré une carte google maps sur la page d'accueil de mon site (créé avec drupal) pour afficher tous les circuits de france. Tous les marqueurs s'affichent sauf ceux de l'ouest de la France. Est-ce du a une limitation du nombre de marqueur? (je dois en afficher plus de 600)

Merci d'avance pour votre aide.

Bonjour,
mon avis est qu'il y a un problème dans les coordonnées des circuits dont la latitude est négative ...

Par contre, je ne sais pas quel tuto vous avez regardé. Mais en regardant vite fait votre code, il s'avère que c'est l'API Google Maps v2 que vous utilisez. Or cette dernière est 'deprecated', je vous conseille d'utiliser la version 3 et ce tuto : http://geotribu.net/node/204
Ca ne change pas fondamentalement les choses mais c'est plus à jour.
Ou alors, peut-être utilisez-vous un module Google Maps pour Drupal auquel cas, vous n'avez pas trop la main sur le code ?

Au fait, attention à l'affichage de cette page d'accueil dans Chrome, c'est pas mal décalé vers le bas.

Fabien

Bonjour,
Franco chapeau bas (ça sonne bien en plus lool), votre tuto m'a vraiment plu et c exactement ce que je cherchais, c super bien expliqué !!!
Allez trêve de remerciements, revenons en au fait :D

J'ai suivi le tuto step by step mais quand j'exécute le resultat sur mon navigateur : le titre de la page s'affiche mais la page est toute blanche :(
NB: Dans la barre d'etat, je vois que la page se connecte a google et tout mais resultat rien :( , sachant que j'ai une clé pour localhost (vu que j'utilise Eclipse J2EE et Tomcat comme serveur local).
SVP vous pourriez m'orrientez, voici le code de googgle maps qu'on m'a affilié :

Bonjour Jarod,
merci pour les remerciements, c'est bien sympathique.

Je peux vous orienter sans problème, mais il me faut un peu de code à me mettre sous la dent.
Sinon l'API v3 est quand même plus appropriée maintenant : http://www.geotribu.net/node/124

Fabien