1: Afficher une carte avec Google Maps

Par Pascal MARTIN le lundi 7 janvier 2008 08:00 - Lien permanent 25 commentaires

Cet article est le premier d’une série traitant de l’utilisation de l’API Google Maps pour enrichir votre site à l’aide d’informations de cartographie.

Pour consulter la liste des autres articles de cette série, vous pouvez passer par le sommaire.

Nous allons ici étudier les bases nécessaires pour afficher une Google Map sur votre site :

Création de la page accueillant la carte,
utilisation d’une clef d’API Google Ajax,
inclusion des fichiers Javascript nécessaires,
et affichage de la carte en elle-même.

Et vous trouverez en pièce jointe à cet article un exemple complet, regroupant la page HTML et le source JavaScript nécessaire à l’affichage d’une carte telle que celles présentées ici.

Pré-requis

Avant de commencer, profitons du fait que cet article est le premier de la série traitant de Google Maps pour dresser une brève liste de pré-requis nécessaires à la bonne compréhension de celle-ci :

Tous ces articles ont pour but de présenter l’utilisation de l’API Google Maps pour afficher une carte sur votre site. Ils pré-supposent :

Que vous maîtrisez les bases de (X)HTML,
Que vous êtes à l’aise avec le langage de programmation JavaScript, y compris orienté objet,
Que vous avez conscience de quelques limitations que vous pouvez rencontrer en programmation JavaScript (contraintes de sécurité, requêtes asynchrones, compatibilité, …)
Que vous avez quelques notions de programmation en PHP - mes exemples de scripts côté serveur seront écrits en PHP.

Ces pré-requis resteront valables pour tous les articles de cette série ; et chaque article supposera que vous ayez lu et compris l’ensemble des articles précédents.

Création d’une page contenant la map

Pour afficher une carte avec Google Maps, la première chose à faire est, bien entendu, de créer une page HTML qui contiendra celle-ci.
Dans l’idéal, Google recommande que vos pages soient conformes au standard XHTML, en particulier pour limiter les différences d’interprétation et de rendu entre les différents navigateurs.

Dans le principe, aucune différence par rapport à ce à quoi vous devez être habitués.
Par exemple :

<?php header('Content-type: text/html; charset=UTF-8'); ?>
<?php echo '<?xml version="1.0" encoding="UTF-8"?>'; ?>
<!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">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Découverte de l'API Google Maps</title>
</head>
<body>

</body>
</html>

(Pour tous mes exemples au long de cette série, j’utiliserai, côté serveur, le langage PHP - sur cet exemple précis, ce n’est pas nécessaire, mais vous verrez un peu plus loin pourquoi je ne me suis pas limité à du HTML statique)

Création d’un élément qui contiendra la carte

Maintenant que vous avez un squelette de page HTML, il faut lui ajouter un élément HTML qui sera utilisé comme conteneur pour la carte.

Une simple balise <div>, avec un identifiant explicite, convient très bien.
Par exemple :

<div id="map" style="border: 1px solid black;
               width: 400px; height: 400px;
               margin-left: 30px; margin-top: 30px;">
</div>

L’identifiant utilisé ici pour le bloc destiné à contenir notre carte est map.
C’est donc à l’aide de celui-ci que nous accéderons à la google-maps.

Obtention d’une Clef d’API

Pour pouvoir utiliser les services de Google Maps, vous devez posséder une Clef d’API, qui permet à Google Maps de vous identifier.

Pour obtenir une clef d’API Google, vous devez avoir un compte Google (Un compte gmail, par exemple), et vous devez en faire la demande - gratuite : Obtenir une clef d’API Google Maps.

Notez qu’une clef d’API est associée à un répertoire (et à tous ses sous-répertoires) de votre serveur Web.
Par exemple, une clef enregistrée pour “www.monsite.com/carte/” ne sera donc pas valide sur “www.monsite.com”, alors qu’elle sera valide sur “www.monsite.com/carte/lyon”.
Connaître la structure de votre site avant de créer une clef d’API peut donc être judicieux.

Pour la même raison, il vous sera probablement nécessaire de posséder plusieurs clefs d’API Google Maps.
Par exemple :

Une pour votre environnement de développement,
Une autre pour votre environnement d’intégration,
Une troisième pour votre environnement de recette,
Et une dernière pour votre serveur de production.

Inclure le fichier JavaScript GoogleMaps

Une fois que vous avez obtenu une clef d’API, vous devez inclure à votre page HTML le fichier JavaScript permettant d’interagir avec les services Ajax de Google.

Nouvelle méthode d’accès aux API Ajax Google

Note : depuis quelques mois, les différentes API Javascript de Google sont regroupées, et accessibles via un point d’entrée unique.
En même temps, côté code Javascript, elles ont été regroupées au sein d’un seul namespace, nommé, assez logiquement, google.
Cet article se conforme à cette nouvelle organisation, et à ce namespace regroupant toutes les API Ajax de Google.

Intégration du fichier Javascript permettant l’accès à l’API Google

Le fichier JavaScript permettant d’accéder aux API Ajax de Google se trouve sur les serveurs… de Google, et il est accessible à l’adresse suivante : http://www.google.com/jsapi?key=VOTRE_CLEF_API.
“VOTRE_CLEF_API” étant bien entendu à remplacer par… Votre clef d’API.

Par exemple, j’ai rajouté à la partie <head> de ma page de tests la ligne suivante :

<script type="text/javascript"
    src="http://www.google.com/jsapi?key=<?php echo $apiKey; ?>">
</script>

Pour faciliter le déploiement et la configuration d’un serveur à un autre, la clef d’API utilisable pour le serveur sur lequel est déployée l’application est déterminée côté serveur (en PHP, pour cet article), et stockée dans la variable $apiKey.

Chargement des fonctionnalités “maps”

Une fois que vous avez inclus le fichier Javascript permettant d’accéder aux API Ajax Google, il faut charger le composant “maps”.
Cela se fait à l’aide du code suivant :

google.load("maps", "2");

Le premier paramètre de la méthode google.load indique quel composant vous souhaitez charger, et le second, le numéro de version de l’API à utiliser - en l’occurrence, pour Google Maps, l’API est actuellement en version 2.

Une fois le composant “maps” chargé, son API est accessible via l’espace de noms google.maps.

Ancienne méthode d’accès à l’API Google Maps

Ce paragraphe est présent au sein de cet article uniquement pour information, du fait que de nombreux tutoriaux utilisent encore cette ancienne méthode.
Il peut donc être bon que vous connaissiez, ne serait-ce que rapidement, ce qui peut changer.

L’ancienne méthode d’accès à l’API Google Maps passait par un fichier Javascript spécifique à Google Maps, ne permettant pas d’accéder simultanément aux autres services proposés par Google.
Vous trouverez encore de nombreuses allusions à cette “ancienne méthode” - y compris dans la documentation en ligne de l’API Google Maps…
L’accès au service Google Maps se faisait via l’URL http://maps.google.com/maps?file=api&v=2&key=VOTRE_CLEF_API.

Les classes exposant les fonctionnalités Google Maps portaient auparavant des noms de la forme “GXyz”.
Par exemple : GMap2, GClientGeocoder, …

A présent, ces classes ont été regroupées au sein de l’espace de nom google.maps, en perdant le “G” qui les identifiaient.
Elles sont donc devenues, par exemple : google.maps.Map2, google.maps.ClientGeocoder, …

Vous aurez probablement souvent à effectuer cette traduction, lorsque vous lirez des exemples sur le Net ; souvenez-vous en.

Indiquer les coordonnées à afficher

Si vous affichez la page telle qu’elle, rien ne sera affiché dans votre conteneur “map”.
Pour corriger cela, deux choses :

Tout d’abord, il faut instancier un objet google.maps.Map2, en lui indiquant quel sera le conteneur utilisé pour afficher la carte :

var map = new google.maps.Map2(document.getElementById('map'));

En retour, vous obtenez un objet vous permettant de manipuler la carte : c’est via cette instance de google.maps.Map2 que vous pourrez déterminer quel lieu afficher, paramétrer votre carte, et la personnaliser.

Une fois la carte créée, il faut indiquer au service Google Maps quelles sont les coordonnées à afficher sur le conteneur, qui, pour l’instant, demeure vide.
Pour cela, il faut connaître la latitude et la longitude du point qui vous intéresse.

Par exemple, pour centrer la carte sur la Place Bellecour, à Lyon, il vous faudra utiliser la portion de code suivante :

// Centrage de la map sur un point, dont on connaît latitude et longitude :
// (en l'occurence, Place Bellecour, à Lyon)
// Et utilisation d'un niveau de Zoom relativement élevé :
map.setCenter(new GLatLng(45.756788, 4.831515), 15);

La méthode setCenter s’appelle sur une instance d’objet google.maps.Map2, et permet de centrer la carte sur un point.
Elle prend deux paramètres :

Les coordonnées du point à afficher, sous forme d’une instance d’objet GLatLng,
Et le niveau de Zoom - Cf plus bas pour illustrations.

Notez que la méthode setCenter doit impérativement être appelée avant d’effectuer toute manipulation sur la carte !

Le tout (création de la carte, centrage sur un point) pouvant être regroupé au sein d’une fonction telle celle-ci :

var initMap = function ()
{
    // Création de l'instance d'objet google.maps.Map2,
    // en indiquant au sein de quel élément de la page la carte sera affichée : 
    var map = new google.maps.Map2(document.getElementById('map'));
    
    // Centrage de la map sur un point, dont on connaît latitude et longitude :
    // (en l'occurence, Place Bellecour, à Lyon)
    // Et utilisation d'un niveau de Zoom relativement élevé :
    map.setCenter(new GLatLng(45.756788, 4.831515), 15);
    
}; // initMap

Une fois cette fonction appelée, on obtient l’affichage suivant :

Effectivement, nous avons :

créé un conteneur de 400 pixels de côtés (Cf code HTML plus haut),
décidé d’utiliser ce conteneur pour afficher notre carte - déterminant ainsi sa taille,
et centré celle-ci sur la Place Bellecour à Lyon,
le tout avec un niveau de zoom permettant, sur une carte de cette taille, de voir un arrondissement à peu près entier.

Afficher la carte au chargement de la page

Pour afficher la carte dès le chargement de la page, à vous de retenir la solution que vous préférez (il en existe quelques unes…).
La solution la plus facile à mettre en place dans le cadre de nos exemples est d’appeler une fonction d’initialisation directement en bas de la page HTML.

Cette fonction d’initialisation devra :

Charger le composant “maps”
Appeler la fonction que nous venons d’écrire.

Pour cela, il suffit de rajouter quelques lignes en bas de votre page HTML :

<script type="text/javascript">
    init();
</script>

Et voici la fonction init, déclarée dans un des fichiers Javascript inclut plus haut (que ce soit au sein de la balise <head>, ou plus bas, selon vos contraintes) :

var init = function ()
{
    google.load("maps", "2");
    google.setOnLoadCallback(initMap);
}; // init

Cette fonction :

Charge le composant “maps”, comme nous l’avons vu plus haut,
Et déclare que la fonction initMap devra automatiquement être appelée une fois que la page sera intégralement chargée - c’est-à-dire, une fois que le composant “maps” aura lui-même été chargé.

Attention à un point : vous ne devez pas utiliser les fonctionnalités du service Google Maps tant que les fichiers correspondant n’ont pas encore été chargés !
Ce qui signifie que vous ne pouvez pas “tout simplement” appeler la fonction initMap en bas de votre page HTML, ni même directement depuis la fonction init.

C’est pour cette raison que l’emploi de la méthode google.setOnLoadCallback est particulièrement recommandé : elle garanti que votre code dépendant des fonctionnalités de l’API Google Maps ne sera pas exécuté tant que ladite API n’aura pas été chargée.
Vous éviterez donc tout message d’erreur apparaissant plus ou moins aléatoirement, dans les cas où votre méthode d’initialisation s’exécuterait avant que les fichiers Javascript n’aient été chargées depuis les serveurs de Google.

Note : Nous aurions pu directement placer le contenu de la fonction init en bas de notre page HTML… Mais cela compliquerait la maintenance : autant placer le moins de code Javascript possible dans la page HTML.
Et il aurait été plus “propre” de ne pas appeler la fonction init depuis la page HTML, mais depuis un fichier JavaScript, en la branchant sur l’événement load, par exemple - mais pour cet exemple…

Quelques mots sur les niveaux de zoom

Nous avons vu un peu plus haut que la méthode setCenter qui permet de centrer la carte sur un point dont nous connaissons les coordonnées géographiques prenait en second paramètre un “niveau de zoom”.

Ce niveau de zoom est un nombre entier, supérieur ou égal à 0, et toujours strictement inférieur à 20.

0 correspond au niveau de zoom le plus lointain, avec lequel le monde entier est visible,
Et 19 correspond au niveau de zoom le plus proche, avec lequel (je cite) les bâtiments individuels sont visibles.

Il est à noter que la limite supérieure du zoom dépend du lieu : un zoom élevé a de fortes chances d’être disponibles au niveau des grandes villes, alors qu’il ne sera pas possible de zoomer autant sur des endroits isolés.
A noter aussi : en vue satellite, il est théoriquement possible de monter à un niveau de zoom supérieur à 20… Mais avec la même restriction…

Quelques photos étant probablement plus parlantes que ces quelques mots, je vous laisse constater par vous-même (en centrant toujours la carte sur le même point, et ne faisant varier que le niveau de zoom) :

Pour éviter d’allonger cet article plus que nécessaire, je ne met ici que des miniatures ; à vous de cliquer dessus pour… zoomer ^^

Niveaux de zoom de 0 à 4 :

Du monde entier, jusqu’à un groupe de pays :

Niveaux de zoom de 5 à 9 :

Du pays au département :

Niveaux de zoom de 10 à 14 :

De l’agglomération à l’arrondissement :

Niveaux de zoom de 15 à 18 :

Et de l’arrondissement au plan détaillé :

Note : bien qu’en plein centre d’une des plus grande ville de France, le niveau de zoom 18 n’est pas disponible (le 19 non plus, en conséquence)… Je vous laisse imaginer pour des petits villages perdus au fond de la campagne…

Maintenant que nous avons vu les premières bases permettant d’afficher une Google Map, rendez-vous au prochain article, pour la suite !
Nous y apprendrons comment utiliser le service Geocoder, permettant d’obtenir les coordonnées (latitude, longitude) d’un point à partir de son adresse textuelle (“Place Bellecour, Lyon, France”).

Navigation :

Retour au sommaire : utilisation de l’API Google Maps.
1 : Afficher une carte avec Google Maps : Les premiers éléments à mettre en place pour intégrer une carte à une page Web.
2 : Obtenir les latitude et longitude d’un point à partir de son adresse : Utiliser le service de Geocoding proposé par Google Maps, pour “traduire” une adresse en un couple latitude/longitude.
3 : Types de cartes et contrôles : Les différents types de carte que le service Google Maps permet d’afficher, et les différents contrôles que vous pouvez leur ajouter.
4: Marqueurs et fenêtres d’informations : Afficher des marqueurs et des fenêtres d’informations sur vos cartes

MAJ le 02/03/2008 : Mise à jour de la partie Navigation (ajouts liens vers partie 2 et partie 3).
MAJ le 18/03/2008 : Suite à un échange de commentaires (Cf un peu plus bas) :

Ajout de la partie “Pré-requis”,
Ajout d’informations plus détaillées tout au long de la seconde moitié de cet article,
Ajout d’un exemple de sources complètes en pièce jointe,
Et ajout de la partie sur les niveaux de zooms (et captures d’écrans correspondantes) - ça faisait quelques temps que je voulais la placer quelque part ; voila chose faite !

MAJ le 16/04/2008 : Mise à jour de la partie Navigation : ajout du lien vers la partie 4.

Les posts suivants pourraient aussi vous intéresser :

Commentaires

1. Par charolais le 2008-03-10 18:31

:-C

bonjour,

désolé d'être critique mais il parait que parfois la critique est constructive 8-O

C'est dommage de gacher un aussi magnifique tuto avec un manquye évident d'information ...

Je ne suis pas complètement débutant bien que je n'y connaisse absolument rien en javascript ...
J'ai devant les yeux le hors série prog... spécial API GOOGLE ...
et divers tuto web pour manipuler l'api et tenter de personnaliser la carte de mon site ...

Et bien malgré cela pas moyen de faire quelque chose de correcte :-(

Et pour cause vous êtes tous aussi flou ou incomplet sur des points capitaux qui ne permettent pas de progresser :-/

Votre tutoriel est génial mais à partir de la ligne:
google.load("maps", "2");

Ca devait vous gonfler de rentrer dans les détails ou alors pour vous c'est tellement évident qu'il n'y a plus moyen de progresser ...

Les autres sont flous bien avant ou bien après ce qui fait qu'une après midi complète ne m'aura pas suffit à faire autre chose qu'un truc autant inutile qu'inefficace ;-(

Mais bon votre travail à le mérite d'exister peut être n'appartiens je pas au public visé par votre contenu ou suis je trop novice pour réussir la transformation LOL

2. Par harpa le 2008-03-10 21:33

je voudrais pas dire mais faut vraiment être de mauvaise volonté pour prétendre que ce tuto est mauvais. Il y a évidemment des prérequis à avoir. Si on ne les a pas, faut peut-être placer la barre un peu plus bas et revenir plus tard.
Moi je dis bravo pour ces pages très didactiques!

3. Par charolais le 2008-03-10 23:23

Je n'ai pas dis qu'il était mauvais j'ai dis et je maintiens après plus de 6h de tentatives toutes aussi infructueuses les unes que les autres ...

Que ce tuto (comme d'autres) par du principe que l'on sait faire les choses ...

A ce moment si on sait le faire, nul besoin de les expliquer :-(

Ou alors il suffit de mettre un chapitre "pré-requis" en début de page pour que l'on sache ou l'on va.

Pour moi je suis désolé mais il y a incontestablement des manques ou des évidences qui ne le sont que pour vous 8-)

Quand par chance j'arrive à afficher une carte sur ma page elle ne correspond en rien à mes attentes et n'est pas plus personnalisable qu'avec le script lambda fournit par google 8-O

4. Par Pascal MARTIN le 2008-03-10 23:52

Bonsoir,

Merci à tous deux pour vos commentaires :-)
Effectivement, un brin de critiques de fait jamais de mal...

Alors (pas vraiment dans l'ordre) :

Ajouter une partie "pré-requis" au début de l'article : OK ; au programme du pré-requis : connaissance de (X)HTML, JavaScript orienté objet.
Manque de détails (parties "Indiquer les coordonnées à afficher" et "Afficher la carte au chargement de la page" notamment) : en relisant ça quelques mois après, effectivement, quelques informations de plus, plutôt que uniquement quelques bouts de code "tel quel", ça ne ferait pas de mal - après tout, c'est le sujet de l'article.
Pour ce qui est de la personnalisation : vous pouvez aller un peu plus loin en lisant les articles suivant celui-ci (considérant que les deux autres articles actuellement rédigés ne rentrent pas dans les détails ; ça reste de la "surface") ; et les suivants, qui ne sont pas encore rédigés (ça viendra, au cours des prochains mois) ; sinon... en fouillant sur le net, on trouve des trucs intéressants (je pense, par exemple, au blog officiel de Google Maps, qui parle de temps en temps de points techniques précis : http://googlemapsapi.blogspot.com/ )

Pour ce qui est des deux premiers points, je tenterai une MAJ de cet article dans les prochains jours :-)
(Et j'en profiterai probablement pour ajouter en pièce jointe un exemple de source complet, pour éviter d'avoir à "recoller les morceaux")

Merci encore, Et bon courage !

5. Par charolais le 2008-03-11 13:44

Merci pour cette réponse aussi rapide ;)

j'avais peur d'être trop incisif dans mes critiques :(

effectivement dans les pré-requis je suis une véritable q...che en javascript donc au bout d'un jour et demi je n'ai toujours rien qui s'affiche 8-O

Dans mon cas il est encore trop tôt pour passer à la suite de l'article je ne peux pas personnaliser un ch'truc qui ne s'affiche pas 8-)

Mais je pense que je vais finir par trouver avec un peu de persévérence, un zest de bidouille, beaucoup de recherche sur les moteurs et une infinité d'heure.

Merci pour vos encouragements et encore felicitation pour votre blog que ces quelques critiques (constructives) n'entravent pas votre bonne humeur.

Cordialement Manuel

6. Par Pascal MARTIN le 2008-03-12 08:00

Effectivement, pour un débutant en JavaScript, cet article n'est probablement pas des plus accessibles ; mais je ne peux pas ré-expliquer toutes les bases ici : cet article serait... trop long ^^

Aucun problème pour mon humeur ;-)

Bon courage, et bonne continuation !

7. Par Pascal MARTIN le 2008-03-18 07:50

Suite à notre échange de commentaires de la semaine dernière, je viens de mettre en ligne quelques modifications sur cet article.

En particulier :

Ajout de la partie "Pré-requis",
Ajout d'informations plus détaillées tout au long de la seconde moitié de cet article,
Ajout d'un exemple de sources complètes en pièce jointe,
Et ajout de la partie sur les niveaux de zooms (et captures d'écrans correspondantes) - ça faisait quelques temps que je voulais la placer quelque part ; voila chose faite !

En espérant que ça le rendra un brin plus accessible :-)

8. Par nick le 2008-07-25 14:51

bonjour !

tout d'abord je vous remercie pour ce tutoriel, franchement il est trés bien redigé,tout de meme j'ai plusieurs questions et j'aimerai etre eclairer.

tout d'abord,je voudrais avoir une carte google map sur un intranet que je concois avec Sharepoint et je ne peux utiliser php comme vous l'avez fait,les webpart des pages avec sharepoint permet d'avoir d'avoir des editeur de texte que dois je faire à ce moment là?

9. Par Julien L. le 2008-11-12 16:00

Bonjour et bravo pour ce tutoriel vraiment bien écrit.

j'ai cependant une remarque à faire par rapport au contenu technique.
tu parle de la nouvelle façon d'appeler les méthodes de Google et de remplacer par exemple : GMarker par google.maps.Marker mais tu utilise toujours la méthode GLatLng() dans tes exemples. Cela n'empêche pas le script de fonctionner correctement.
Alors pourquoi ne pas conserver l'ancienne nomenclature si elle fonctionne toujours ? Y a-t-il une incidence particulière ?

A bientôt

10. Par Pascal MARTIN le 2008-11-13 07:01

Bonjour,

Merci :-)

Effectivement, les exemples postés ici utilisent encore GLatLng ; j'imagine que lors du passage de l'ancienne à la nouvelle API (j'ai commencé à rédiger cet articles avec l'ancienne API, et je l'ai ensuite mis à jour pour parler de la nouvelle), je n'ai pas tout remplacé dans mes codes d'exemples...

Utiliser google.maps.LatLng fonctionne également -- et serait plus consistant :

map.setCenter(new google.maps.LatLng(45.756788, 4.831515), 15);

(Je prend note, pour une éventuelle prochaine re-mise à jour de l'article, des fois que ^^ )

Pourquoi utiliser la nouvelle API et non l'ancienne ? Ici, pas de raison particulière, hormis le fait que j'ai tendance à préférer utiliser une version "à jour".

Dans l'idée, je me dis que si je rédige un article, autant parler de ce qui existe au moment où l'article est lu, et pas de la syntaxe qui était utilisée six mois avant ^^

Après, utiliser uniquement des classes localisées dans un espace de noms spécifique à google (google.* ; ou google.maps.* ici) ne peut être qu'une bonne chose :

à la fois en termes de facilité de compréhension du code : en le lisant, on voit immédiatement qu'une classe utilisée n'est pas développée au sein de l'application, mais par un fournisseur externe,
et en terme d'isolation : si vous utilisez directement la classe GQuelqueChose et qu'elle est redéfinie ailleurs, que ce soit dans votre code, ou dans une autre bibliothèque que vous utilisez, que se passera-t-il ? Alors qu'une classe nommée google.maps.QuelqueChose, si quelqu'un l'a redéfini, c'est vraiment du sabotage ^^

L'utilisation des classes googles.maps.* signifie aussi le passage par l'API Ajax Google, unifiée, avec la même clef d'API pour l'ensemble des services existant, notamment -- et un accès aux futurs services, qui ne seront pas exportés via une API basée sur l'ancien modèle.
Cf http://code.google.com/apis/ajax/documentation/#Namespaces pour plus d'informations.

A bientôt,

11. Par Xavier le 2009-02-08 11:47

Bonjour,
Bravo pour ce tutoriel qui me donne envie de me lancer !
Juste une petite question sur les clés, je comprends pour le serveur de production ; mais pour l'environnement de développement = son propre localhost ?
merci de ce que vous pourrez faire pour moi
A bientôt

12. Par Pascal MARTIN le 2009-02-16 00:06

Bonsoir,

Merci :-)

Pour le cas de l'environnement de développement nécessitant une clef spécifique (ce qui n'est pas le cas pour "localhost"), je pensais en fait au cas de VirtualHost par nom de domaine... Typiquement, le VirtualHost que j'utilise pour écrire mes pages de test s'appelle "tests", et non "localhost" ; j'ai donc du créer une clef d'API Google pour ce nom de domaine

(Et j'ai modifié le fichiers hosts de ma machine, pour que "tests" pointe sur 127.0.0.1, comme c'est déjà le cas pour "localhost")

En espérant que cela clarifie les choses,
Bonne continuation !

13. Par rdtech le 2009-03-20 15:11

bonjour et merci pour votre travail,
j'ai utilisé l'ancienne version de l'API, ma carte s'affiche sans problème.
J'ai testé vos fichiers article-1.* pour travailler avec la nouvelle version: je n'ai plus que la bordure de <div> à l'écran. Comme si l'intégration du fichier JavaScript permettant d'accéder à l'API ne fonctionnait pas ou si l'appel à google.load() était sans effet.
Je tourne depuis un bon moment autour de ce problème, l'avez vous déjà rencontré?
Merci.

14. Par rdtech le 2009-03-21 18:29

bonjour,
en fait tout devait fonctionner correctement depuis le départ!
Je ne me servai que du bouton actualiser du navigateur pour mettre à jour mon travail entre deux modifs. Si je redémarre carrément le navigateur lorsque je change d'API, il n'y a plus de problème.
Il est des mystères que je ne m'explique pas...

15. Par Pascal MARTIN le 2009-03-24 07:35

Bonjour,

A tout hasard, peut-être une problématique de cache côté navigateur, qui conservait en mémoire "l'ancienne" version d'un fichier JS, plutôt que de télécharger depuis le serveur la version que vous aviez modifié ?

Le fait de redémarrer le navigateur forçant alors une expiration de son cache, et, donc, le téléchargement de la "nouvelle" version du fichier ?

Bonne continuation,

16. Par PierreAndre29 le 2009-05-14 00:31

Merci pour cet article fort bien rédigé.
Les sources en fichier joint m'ont été bien utiles.
Pour l'instant, mystère tout de même car ça a marché pour afficher environ une dizaine de cartes correspondant à 10 lieux différents et depuis, je n'obtiens plus rien.

Pierre

17. Par weave le 2009-05-18 23:36

Bonsoir à toutes (?!) et tous,
Tout d'abord : chapeau bas pour ce magnifique tuto sans fautes (de français et autres lol) ;
Ensuite, j'ai besoin de votre aide car je bloque "grave" sur mon problème que j'ai cerné mais que je n'arrive pas à résoudre...
L'installation de Gmap fonctionne à merveille sauf que... lors de la localisation d'une personne, l'affichage n'est pas centré. La carte m'affiche le "ballon" en haut à gauche (toutes extrèmes) et le ballon est malheureusement caché par les indications de navigation (+, - flèche haut...).
J'ai vérifié le map.setCenter qui existe bien :
...
$_output .= sprintf('map.setCenter(new GLatLng(%s, %s), %d, %s);', number_format($this->center_lat, 6, ".", "") ...
...
j'ai également vérifié si un malheureux <td> n'avait pas été oublié en fermeture (ce qui m'aurait décalé la carte..) mais non...

J'y suis depuis 2 jours à raison de 6 heures par jour et là, je craque...

Une âme charitable peut me dire le pourquoi du comment ? lol

Merci beaucoup !

Cathy

18. Par RoD@Scope le 2009-07-29 15:49

Bonjour,
Un GRAND merci pour la qualité de l'info ! J'ai pu intégrer facilement et rapidement googlemaps à mon site, grâce à vous. Cependant il me reste un petit souci lorsque j'essaie d'afficher un "marker" de position, voici le code de ma fonction :

function LocalisationClient(X,Y)
{
    if ((X != 0) && (Y != 0))
    {
        var map = new google.maps.Map2(document.getElementById('contenu'));  
        var coord = new GLatLng(X, Y);       
        map.setCenter(coord, 13);        
        map.addControl(new GLargeMapControl());  
        map.addControl(new GMapTypeControl());  
        map.addControl(new GOverviewMapControl());
        map.setMapType(G_HYBRID_MAP);        
        map.addOverlay(new GMarker(new GPoint(coord)));      
    }
}

La carte s'affiche correctement, elle est bien centrée sur la coordonnée que je lui fourni en paramètre, MAIS... le "marker" s'affiche, lui, en haut à gauche !
Votre aide me serait donc fort utile ?
Je vous en remercie par avance, et encore bravo pour la qualité de votre article.

Christophe
PS : Il semblerait que je ne sois pas le seul dans ce cas :)

19. Par lps le 2010-02-16 14:16

Un peu tard mais au cas ou.

Il n'y a pas besoin de la fonction GPoint.
map.addOverlay(new GMarker(coord));

LPs

20. Par tom-over le 2010-02-18 14:07

merci pour ce beau tutoriel !
j'ai trouvé un site qui vient complémenter ton article...
http://gmap.nurtext.de/

21. Par tom-over le 2010-02-18 14:08

merci pour ce beau tutoriel !
j'ai trouvé un site qui vient compléter ton article...
http://gmap.nurtext.de/

22. Par mantis le 2010-04-27 16:51

Merci pour ce tuto
Qui m'a permit mais surtout justifier l'interet de changer de version de google map, les exemples sont bien meilleurs que sur google api. Disparition de la barre de recherche, une simplicité pour savoir si l'adresse a été trouvée pour intercepter et afficher une erreur.
Par contre pour la personnalisation des marqueurs j'ai eu quelques souci, je souhaitais uniquement changer la couleur mais le marqueur disparaissait.
Ce n'était pas important alors j'ai fais sans ;)

Au plaisir de relire des tutos bien fais comme le tien, je vais fouiller ce que tu propose d'autre ;)

23. Par MicroBlog le 2010-07-19 18:16

Afficher une carte avec Google Maps

Afficher une carte avec Google Maps...

24. Par Xoto le 2010-10-16 19:39

Pour information:
La nouvelle version de l'API Google Map ne requiert plus l'utilisation d'une clé.

http://www.code-web.org/post/2010/0...

25. Par Coumba le 2012-06-26 17:15

Bonjour

Tout d'abord merci pour ce magnifique tutoriel qui m'a bien éclairé.
Serait ce possible d'avoir le tutoriel sur l'api Google Map version 3
ou sinon juste l'explication au niveau du géocoding, c'est à dire récupérer la latitude et la longitude à partir d'une adresse donnée.
Merci d'avance

Ce post n'est pas ouvert aux nouveaux commentaires (probablement parce qu'il a été publié il y a longtemps).

Pascal MARTIN (n+1).zéro

Mots de Développement Web : PHP & JavaScript