4: Google Maps : Marqueurs et fenêtres d'informations

Par Pascal MARTIN le mercredi 16 avril 2008 22:00 - Lien permanent 95 commentaires

Les trois premiers articles de cette série consacrée à google-maps nous ont permis de :

Nous allons à présent voir comment :

Afficher un ou plusieurs marqueur(s), éventuellement personnalisé(s) sur notre carte,
et ouvrir une fenêtre d’information lors du clic sur l’un d’entre eux.

Note : Au moment où j’écris cet article, je considère que vous avez lu et compris les trois précédents.
Si ce n’est pas le cas, n’hésitez pas à les consulter !

Note : Vous trouverez en pièce jointe à cet article une archive regroupant l’ensemble des exemples utilisés tout au long de cet article.

Squelette utilisé pour les exemples de cet article

Comme toujours - ou presque - cet article commence par le code de la page qui nous servira de base pour quasiment tous nos exemples.
Cette page se compose, à son habitude :

de quelques lignes de XHTML,
d’un soupçon de code PHP pour dynamiser le tout, et faciliter le développement,
et de JavaScript permettant l’affichage de la carte.

Page XHTML cliente

Pour commencer, voici le code de la page (X)HTML au sein de laquelle sera affichée la page :

<?php require_once(dirname(__FILE__) . DIRECTORY_SEPARATOR . 'googlemaps-key.php');?>
<?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 - Marqueurs et fenêtres d'information</title>
    
    <script type="text/javascript"
        src="http://www.google.com/jsapi?key=<?php echo $apiKey; ?>">
    </script>
    
    <script type="text/javascript"
        src="exemple-0.js">
    </script>
</head>
<body>
    <div id="map" style="border: 1px solid black;
            width: 500px; height: 500px;
            margin-left: 30px; margin-top: 30px;
            float: left">
    </div>
    
    <script type="text/javascript">
        init();
    </script>
</body>
</html>

Encore une fois, rien de bien nouveau sous le soleil :

Chargement des fichiers Google Maps depuis le serveur de Google,
Chargement du fichier JS où nous placerons notre code,
Création d’un élément d’id “map” qui contiendra la carte,
Et appel de la fonction d’initialisation que nous déclarerons dans notre fichier JS.

Le tout dans un fichier PHP, pour faciliter le déploiement sur un serveur ou un autre - utilisant des clefs d’API différentes.

Côté PHP serveur

Un second fichier PHP, qui contiendra la définition de la clef d’API :

$apiKey = 'ABQIAAAAnA2FiFc_BknJBrLWqdaYgxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQe3jGsoyKKo5ZAasrlZefgTF6muQ';

En toute logique, cette définition sera rendue conditionnelle par l’environnement (test, intégration, recette, production, …) où est lancée la page.

Et code JavaScript affichant la carte

Et pour finir, les deux méthodes JavaScript déclenchant l’affichage de la carte :

La première, chargeant les méthodes de l’API Google Maps, et provoquant l’appel de la seconde lorsque ladite API sera chargée :

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

Et la seconde, responsable de la création de la carte, du lancement d’une recherche de localisation, et de l’affichage de la carte, centrée sur celle-ci :

var initMap = function ()
{
    var map = new google.maps.Map2(document.getElementById('map'));
    map.addControl(new GSmallMapControl());  // Contrôle de zoom, déplacement sur la carte
    
    var adresse = 'place bellecour, Lyon, france';
    var geocoder = new google.maps.ClientGeocoder();
    geocoder.getLatLng(adresse, function (coord) {
        map.setCenter(coord, 13);  // Centrage sur le point dont on a obtenu les coordonnées depuis l'adresse
        map.setMapType(G_HYBRID_MAP);  // Vue satellite + informations cartographiques
        
        // TODO : marqueurs, infoWindows, ...
        
    });
    
}; // initMap

Vous noterez que je continue à travailler avec mon exemple habituel, la Place Bellecour, à Lyon.

Rendu

Et voila la capture d’écran obtenue lorsque l’on affichage la page “squelette” :

On retrouve, en toute logique, le résultat obtenu au cours des articles précédents.

Ajouter des marqueurs sur une carte Google Maps

Lorsque vous souhaitez afficher une carte sur votre site, votre but premier est probablement de permettre à vos utilisateurs

soit de se repérer,
soit de repérer un lieu

La carte en elle-même n’est donc généralement pas porteuse de toute l’information que vous auriez tendance à vouloir qu’elle présente.

Pour répondre à cette problématique, l’API Google Maps permet d’ajouter des “marqueurs” (en anglais, un “marker”, des “markers”) sur une carte.
Ceux-ci permettent d’indiquer une position précise sur la carte.

Ajouter un marqueur “standard”

Pour ajouter un marqueur à une carte, le principe est le suivant :

Un marqueur est une instance d’objet GMarker
Une instance d’objet GMarker se crée sur une instance d’objet GPoint
Et une instance d’objet GPoint se crée sur une latitude et une longitude.
Une fois l’instance d’objet GMarker obtenue, le marqueur s’ajoute à la carte à l’aide de la méthode addOverlay.

Exemple de base : Ajout d’un marqueur à la carte

Autre dit, si vous connaissez les latitude et longitude d’un point, l’ajout d’un marqueur à cette position se fera de la manière suivante :

var point = new GPoint(45.779915302498935, 4.803814888000488);  // Création du point correspondant aux coordonnées nous intéressant
var marker = new GMarker(point);  // Création d'un marqueur localisé sur ce point
map.addOverlay(marker);  // Et ajout du marqueur à la carte

En injectant cette portion de code au sein du squelette présenté plus haut, nous obtiendrons l’affichage suivant :

(Comme de bien entendu, les coordonnées utilisées pour cet exemple sont… Celles correspondant au centre de la carte - ce qui n’est pas une obligation, comme nous le verrons par la suite.)

Un peu plus loin : Ajout de plusieurs marqueurs

Pour aller un peu plus loin, voyons comment positionner plusieurs marqueurs sur la même carte.

Dans le principe, nous allons :

déclarer une liste contenant les coordonnées de toutes les stations de métro de Lyon,
et parcourir cette liste, en ajoutant un marqueur à l’emplacement de chaque station.

Voila pour la liste :

// Liste des stations de metro de Lyon
var stationsMetro = [
    // Ligne A
    {ligne: 'A', loc: 'L. Bonnevay Astroballe', lat: 45.76434960130271, lng: 4.91063117980957},
    {ligne: 'A', loc: 'Cusset', lat: 45.76482861073421, lng: 4.901275634765625},
    // ...
    
    // Ligne B
    {ligne: 'B', loc: 'Charpennes - Charles Hernu', lat: 45.77021718342828, lng: 4.86393928527832},
    {ligne: 'B', loc: 'Brotteaux', lat: 45.76692422863731, lng: 4.860076904296875},
    // ...
    
    // Ligne C
    {ligne: 'C', loc: 'Cuire', lat: 45.7850630013786, lng: 4.8332977294921875},
    {ligne: 'C', loc: 'Henon', lat: 45.77907726002176, lng: 4.827632904052734},

    // ...
    
    // Ligne D      
    {ligne: 'D', loc: 'Gare de Vaise', lat: 45.77955614297965, lng: 4.804630279541016},
    {ligne: 'D', loc: 'Valmy', lat: 45.77464739768229, lng: 4.806003570556641}
    // ...

]; // stationsMetro

(Je vous laisse compléter à loisir ^^ )

Et pour le code la parcourant :

// Ajout d'un marqueur pour chacune des stations de metro de Lyon
for (var i=0 ; i<stationsMetro.length ; i++)
{
    map.addOverlay(createMarker(stationsMetro[i]));
}

Par soucis de lisibilité, le code de création de chaque marqueur a été exporté au sein de la fonction createMarker :

var createMarker = function(infosStation)
{
    var point = new GPoint(infosStation.lng, infosStation.lat);
    var marker = new GMarker(point);
    return marker;
}; // createMarker

Cette fonction ne faisant, dans ce cas relativement basique, que créer le marqueur, et le retourner.

Une fois ces portions de code exécutées, nous obtenons une carte… portant plusieurs marqueurs :

Nous retrouvons le tracé des quatre lignes de métro lyonnaises !

(Au besoin, vous trouverez la liste complète des stations dans les exemples en pièce jointe à cet article)

Marqueurs personnalisés

La carte regroupant les dizaines de marqueurs des différentes stations de toutes les lignes de métro fait - il faut l’avouer - quelque peu fouilli : il est difficile de dissocier les lignes les unes des autres…
…Et je vous laisse imaginer ce qu’il en serait pour d’autres villes - quid de Paris et ses 14 lignes, par exemple ?

Une solution à cette problématique serait l’utilisation de marqueurs personnalisés.

Images de marqueurs

En zoomant de près, voici le marqueur “par défaut” utilisé par l’API Google Maps :

Et l’ombre lui correspondant :

L’un comme l’autre devant être des fichiers PNG, 24 bits, et porteurs de 8 bits de transparence.

Pourquoi ne pas tenter de remplacer ces marqueurs “classiques” par d’autres, personnalisés ?
Par exemple, nous pourrions utiliser le marqueur suivant (ici encore, zoomé fortement) :

Et son ombre :

(Je n’ai jamais été doué pour tout ce qui est graphisme - ça se remarque, je sais ^^ )

Création d’un marqueur personnalisé

Pour utiliser une image de votre choix à la place de celle par défaut, il faut passer un second paramètre au constructeur d’objet GMarker.
Ce second paramètre doit être un objet contenant une propriété nommée “icon”, qui pointera vers une instance de classe GIcon.

Autre dit, il vous faut créer une instance de classe GIcon, et renseigner les propriétés définissant votre icone :

// Ajout d'un marqueur sur la carte :
var myIcon = new GIcon();
myIcon.image = "images/mon-marqueur.png";
myIcon.shadow = "images/marqueur-ombre.png";
myIcon.iconSize = new GSize(20, 34);
myIcon.shadowSize = new GSize(40, 33);
myIcon.iconAnchor = new GPoint(10, 34);
myIcon.infoWindowAnchor = new GPoint(10, 1);
var markerOptions = {
    icon: myIcon
};
var marker = new GMarker(coord, markerOptions);  // Création d'un marqueur localisé sur ce point
map.addOverlay(marker);  // Et ajout du marqueur à la carte

Les propriétés qui nous intéressent sont les suivantes :

image : le chemin vers le fichier PNG/24 à utiliser pour le marqueur.
shadow : la même chose, mais pour le fichier PNG/24 qui sera utilisé comme ombre du marqueur. De manière générale, vous utiliserez une ombre orientée à 45° par rapport à votre marqueur.
iconSize, showSize : les tailles respectives, en pixels, de vos images.
iconAnchor : Les coordonnées du point de l’image d’ombre qui doivent correspondre à la position du marqueur
infoWindowAnchor : Utile pour plus tard (seconde partie de cet article) : les coordonnées qui seront utilisées pour l’affichage d’une éventuellement fenêtre d’information associée au marqueur.

La portion de code présentée ci-dessus, une fois intégrée au squelette présenté plus haut, donne la capture d’écran suivante :

Je ne dirais pas que c’est plus joli… Mais c’est au moins plus original !

Exemple un peu plus complet d’utilisation de marqueurs personnalisés

Pour reprendre l’exemple utilisé un peu plus haut, celui des stations de métro des 4 lignes lyonnaises, voici ce que nous pourrions obtenir en travaillant avec des marqueurs personnalisés :

La méthode de création de marqueur crée, pour chaque marqueur, une instance d’objet GIcon, en utilisant une image dépendant de la ligne sur laquelle se trouve la station correspondant au marqueur en cours de création :

var createMarker = function(infosStation)
{
    var point = new GPoint(infosStation.lng, infosStation.lat);
    
    var myIcon = new GIcon();
    if (infosStation.ligne === 'A')
        myIcon.image = "images/marqueur-rouge.png";
    else if (infosStation.ligne === 'B')
        myIcon.image = "images/marqueur-bleu.png";
    else if (infosStation.ligne === 'C')
        myIcon.image = "images/marqueur-orange.png";
    else if (infosStation.ligne === 'D')
        myIcon.image = "images/marqueur-vert.png";
    myIcon.shadow = "images/marqueur-ombre.png";
    myIcon.iconSize = new GSize(20, 34);
    myIcon.shadowSize = new GSize(40, 33);
    myIcon.iconAnchor = new GPoint(10, 34);
    myIcon.infoWindowAnchor = new GPoint(10, 1);
    
    var markerOptions = {
        icon: myIcon
    };
    
    var marker = new GMarker(point, markerOptions);
    return marker;
}; // createMarker

Et l’affichage devient plus appréciable :

(Pour cet exemple, j’ai rajouté à la page HTML le code correspondant à la génération de la légende ; je n’entre pas dans les détails ici : il s’agit de HTML de base)

Voila comment, en quelques lignes de code, vous avez rendu votre carte plus attrayante - et plus facile à comprendre et à exploiter par les visiteurs de votre site !

Utiliser l’outil “MapIconMaker” pour créer rapidement des marqueurs personnalisés

Les exemples précédents nous ont montré comment utiliser des images personnalisées pour nos marqueurs.

Mais, si ce que vous recherchez est - comme moi lors de mon dernier exemple - uniquement des marqueurs de couleurs différentes, vous n’avez pas besoin de vous compliquer la tâche en créant des images différentes pour chaque marqueur !

En réponse à cette problématique, vous trouverez dans la Bibliothèque d’utilitaires Google Maps un composant nommé MapIconMaker (anciennement nommé “IconFactory” - c’était le cas au moment où j’ai écrit les exemples accompagnant cet article, notamment).
Vous trouverez le post d’annonce sur le Blog officiel de Google Maps : MapIconMaker.

Ce composant permet de créer des icônes personnalisés, en spécifiant uniquement

leur taille
et leur couleur.

Il se charge de toute leur création - en se basant sur le marqueur “standard” de l’API Google Maps.

Par exemple, nous pourrions utiliser ce composant de la manière suivante :

var createMarker = function(infosStation)
{
    var point = new GPoint(infosStation.lng, infosStation.lat);
    
    var color;
    if (infosStation.ligne === 'A')
        color = 'ed1c24';
    else if (infosStation.ligne === 'B')
        color = '05a1e6';
    else if (infosStation.ligne === 'C')
        color = 'fab41d';
    else //if (infosStation.ligne === 'D')
        color = '00a650';
    
    var myIcon = MapIconMaker.createMarkerIcon({width: 36, height: 32, primaryColor: color});
    
    var markerOptions = {
        icon: myIcon
    };
    
    var marker = new GMarker(point, markerOptions);
    return marker;
}; // createMarker

Pour la création de chaque marqueur, et la portion de code suivante pour itérer sur la liste des stations :

// Ajout d'un marqueur pour chacune des stations de metro de Lyon
for (var i=0 ; i<stationsMetro.length ; i++)
{
    map.addOverlay(createMarker(stationsMetro[i]));
}

La méthode createMarkerIcon prend en paramètre un objet définissant

width : la largeur du marqueur,
height : la hauteur du marqueur,
et primaryColor : la couleur de base du marqueur, le marqueur lui-même étant créé avec un effet de reflet lumineux.

Pour notre exemple, plutôt que de spécifier une image différente pour chaque ligne de métro, nous n’avons plus eu qu’à spécifier la couleur de la ligne !

Ce qui donne comme résultat l’effet reproduit sur la capture ci-dessous :

Plutôt satisfaisant, non ?

Pas besoin de créer de nouveaux marqueur - ne répondant pas forcément aux habitudes des utilisateurs (forme, ombre, …)
Pas de marqueurs “moches” - enfin, là, ça dépend de votre graphiste ;-)
Et différenciation des différentes lignes de métro - comme précédemment !

Un peu de fun avec les marqueurs

“Just for fun”, vous pouvez imaginer aller plus loin avec vos marqueurs sur la carte !

Notamment, vous pouvez souhaiter n’en n’afficher certains que lorsque l’utilisateur a zoomé de suffisamment près, l’intérêt étant d’éviter de surcharger la carte lorsque l’on se trouve en vue lointaine.

En appliquant cette idée à nos exemples de lignes de métro, j’en suis arrivé au schéma suivant :

Quelque soit le niveau de zoom, on affiche les quatre lignes de métro,
Et si l’utilisateur zoome suffisament, on affiche en plus les trois lignes de tramway - avec des marqueurs plus petit (et on les masquera lorsque l’utilisateur dé-zommera)
Le tout, pour simplifier les choses, en utilisant le composant MapIconMaker.

Pour cela, il nous faut modifier notre définition des lignes de métro/tram, pour ajouter un niveau de zoom “minimal” :

// Liste des stations de metro de Lyon
var stationsMetro = [
    // Lignes de Metro
    
    {ligne: 'A', loc: 'L. Bonnevay Astroballe', lat: 45.76434960130271, lng: 4.91063117980957, zoomMin: 0},
    {ligne: 'A', loc: 'Cusset', lat: 45.76482861073421, lng: 4.901275634765625, zoomMin: 0},
    
    {ligne: 'B', loc: 'Charpennes - Charles Hernu', lat: 45.77021718342828, lng: 4.86393928527832, zoomMin: 0},
    {ligne: 'B', loc: 'Brotteaux', lat: 45.76692422863731, lng: 4.860076904296875, zoomMin: 0},
    
    {ligne: 'C', loc: 'Cuire', lat: 45.7850630013786, lng: 4.8332977294921875, zoomMin: 0},
    {ligne: 'C', loc: 'Henon', lat: 45.77907726002176, lng: 4.827632904052734, zoomMin: 0},
    
    {ligne: 'D', loc: 'Gare de Vaise', lat: 45.77955614297965, lng: 4.804630279541016, zoomMin: 0},
    {ligne: 'D', loc: 'Valmy', lat: 45.77464739768229, lng: 4.806003570556641, zoomMin: 0},
    
    // Lignes de Tramway
    
    {ligne: 'T1', loc: '', lat: 45.740656892848875, lng: 4.8190659284591675, zoomMin: 13},
    {ligne: 'T1', loc: '', lat: 45.73942889120833, lng: 4.818025231361389, zoomMin: 13},

    {ligne: 'T2', loc: '', lat: 45.74896297821371, lng: 4.826200604438782, zoomMin: 13},
    {ligne: 'T2', loc: '', lat: 45.74705666541551, lng: 4.8362937569618225, zoomMin: 13},

    
    {ligne: 'T3', loc: '', lat: 45.76024885029971, lng: 4.861934334039688, zoomMin: 13},
    {ligne: 'T3', loc: '', lat: 45.752935423810314, lng: 4.868786036968231, zoomMin: 13}
    
]; // stationsMetro

(Ici encore, vous trouverez la liste complète dans l’archive d’exemples jointe à cet article)

Pour ce qui est de la créations des marqueurs, quelques améliorations / différences :

var createMarker = function(infosStation, zoomLevel)
{
    var point = new GPoint(infosStation.lng, infosStation.lat);
    
    var color = 'FFFFFF';
    var width=32, height=32;
    if (infosStation.ligne.length === 1) {
        if (infosStation.ligne === 'A')
            color = 'ed1c24';
        else if (infosStation.ligne === 'B')
            color = '05a1e6';
        else if (infosStation.ligne === 'C')
            color = 'fab41d';
        else if (infosStation.ligne === 'D')
            color = '00a650';
        width = 36;
        height = 32;
    }
    else {
        if (infosStation.ligne === 'T1')
            color = '005e8a';
        else if (infosStation.ligne === 'T2')
            color = '0f612f';
        else if (infosStation.ligne === 'T3')
            color = '00aaa9';
        width = 26;
        height = 22;
    }
    
    var myIcon = IconFactory.createMarkerIcon({width: width, height: height, primaryColor: color});
    
    var markerOptions = {
        icon: myIcon
    };
    
    var marker = new GMarker(point, markerOptions);
    
    marker.autoShowHide = function(zoom){
        if (zoom >= infosStation.zoomMin) {
            marker.show();
        }
        else {
            marker.hide();
        }
    };
    
    return marker;
}; // createMarker

Tout d’abord, nous tenons compte des lignes de Tramways pour les affectations de couleurs, puis nous affectons à chaque marqueur une méthode qui l’affichera ou le masquera en fonction du niveau de zoom.

Ensuite, nous créons chaque marqueur :

// Ajout d'un marqueur pour chacune des stations de metro de Lyon
for (var i=0 ; i<stationsMetro.length ; i++)
{
    marker = createMarker(stationsMetro[i], map.getZoom());
    markers.push(marker);
    map.addOverlay(marker);
    
    marker.autoShowHide(map.getZoom());
}

Sans oublier de l’afficher ou de le masquer en fonction du niveau de zoom de départ.

Et, pour finir, nous ajoutons à la carte un gestionnaire d’événement, branché sur l’événement levé en fin d’opération de zoom :

GEvent.addListener(map, "zoomend", function(oldLevel, newLevel) {     
    for (var i = 0; i < markers.length; i++) {
        markers[i].autoShowHide(newLevel);
    }
});

Ceci signifie qu’à chaque fois que l’utilisateur viendra de (dé-)zoomer, la méthode d’affichage / de masquage sera appelée pour chaque marqueur.

Note : Nous en verrons probablement plus au sujet des événements au sein d’un futur article ; je ne rentrerai pas dans les détails ici.

Et voila la carte obtenu : en vue “lointaine” :

Et en zoomant, les stations des trois lignes de tramway apparaissent :

Cette idée peut éventuellement apporter quelque chose aux utilisateurs de votre site ? Pourquoi pas ? A vous de voir !

Afficher une miniature de la carte autour d’un marqueur : showMapBlowup

Avant de terminer cette première partie traitant des marqueurs affichables sur une Google Map, et pour faire transition avec la seconde parlant des fenêtres d’informations, voici une fonctionnalité que propose l’API Google Maps pour les marqueurs.

Vous avez la possibilité de provoquer l’affichage d’une “mini-map” lors du clic sur un marqueur. Pour cela, il faut brancher une fonction sur le gestionnaire d’événement “click” dudit marqueur.

Cette fonction sera chargée d’appeler la méthode showMapBlowup exportée par le marqueur :

// Ajout d'un premier marqueur : cliquer dessus provoquera l'affichage d'une mini-map
var marker = new GMarker(coord);
GEvent.addListener(marker, "click", function(){
    marker.showMapBlowup({
            zoomLevel: map.getZoom() - 2,
            mapType: G_NORMAL_MAP
        });
});
map.addOverlay(marker);

// Et ajout d'un second marqueur, pour voir s'il apparait sur la mini-map
var point2 = new GPoint(4.844112396240234, 45.760337735846626);
var marker2 = new GMarker(point2);
map.addOverlay(marker2);

La méthode showMapBlowup de la classe GMarker prend en paramètre un objet définissant l’affichage qui sera utilisé pour la “mini-map” lors de son ouverture.
Celui-ci peut en particulier être porteur des deux propriétés suivantes :

zoomLevel : le niveau de zoom auquel sera affichée la mini-map ; à vous de voir si vous préférez un zoom plus rapproché (pour avoir un aperçu du détail du lieu environnant le marqueur), ou au contraire, plus éloigné (pour situer le lieu sur une carte plus “grande”).
mapType : Le type de carte à afficher lors de l’ouverture de la mini-map.

En l’occurence, avec la portion de code reproduite ci-dessus, voici le rendu obtenu :

Comme indiqué plus haut, l’utilité principale étant de permettre à vos utilisateurs de mieux situer un lieu ; par exemple, ici, la mini-map permet de mieux situer la Place Bellecour dans Lyon, tout en conservant une vue assez rapprochée pour la carte principale.

Google Maps et fenêtres d’informations

Maintenant que nous savons comment ajouter des marqueurs sur une carte Google Maps, nous allons voir comment les rendre plus utiles.
Plus précisément, nous verrons quels différents types de fenêtres d’informations il est possible d’associer à un marqueur, de manière à présenter plus de données à l’utilisateur cliquant sur l’un d’entre eux.

Le principe de base pour l’affichage d’une fenêtre d’informations est le suivant :

Création d’un marqueur,
Création d’une fonction ouvrant une fenêtre d’informations sur un marqueur,
Et association de cette fonction à un événement déclenché sur le marqueur - typiquement, un clic sur celui-ci.

Fenêtre d’informations simple

Le premier type de fenêtre d’information proposé par Google Maps est un simple affichage de données au format HTML.

Une fenêtre de ce type est ouverte à l’aide de la méthode openInfoWindowHtml de la classe GMarker :

var marker = new GMarker(coord);

var window = function() {
    marker.openInfoWindowHtml(
            '<strong>Place Bellecour</strong>' +
            '<br /><img src="images/place-bellecour-miniature.jpg" alt="" />' +
            '<br /><a href="http://fr.wikipedia.org/wiki/Place_Bellecour">Voir l\'article sur Wikipedia (fr)</a>'
      );
};

GEvent.addListener(marker, "click", window);

map.addOverlay(marker);

On retrouve ici les étapes que je décrivais juste au-dessus :

On commence par instancier un marqueur,
Puis on déclare une fonction ouvrant une fenêtre d’information rattachée à ce marqueur,
Fonction que l’on rattache au clic sur ledit marqueur,
Et, enfin, on ajoute le marqueur à la carte.

Et voici le rendu obtenu lors du clic sur notre marqueur :

On constate bien que les éléments HTML ont été affichés - je pense notamment à l’image et à l’hyperlien.

Fenêtre d’informations multi-onglets

Une fois que l’on a commencé à afficher des informations lors du clic sur un marqueur, on se rend compte que la fenêtre proposée n’est pas assez grande… Fidèle au concept “multi-tab” utilisé par tous les navigateurs modernes, l’API Google Maps permet d’ouvrir une fenêtre d’informations… à plusieurs onglets !

Ceci se fait à l’aide de la méthode openInfoWindowTabsHtml de la classe GMarker, qui prend en paramètre une liste d’instances d’objet GInfoWindowTab.

Chacun de ces objets GInfoWindowTab est construit à l’aide de deux paramètres :

le titre de l’onglet,
et son contenu - au format HTML.

Par exemple, pour une fenêtre d’informations à deux onglets :

var marker = new GMarker(coord);

var window = function() {
    var tabs = [
            new GInfoWindowTab('Infos',
                    '<strong>Place Bellecour</strong>' +
                    '<br /><img src="images/place-bellecour-miniature.jpg" alt="" />' +
                    '<br /><a href="http://fr.wikipedia.org/wiki/Place_Bellecour">Voir l\'article sur Wikipedia (fr)</a>'
                ),
            new GInfoWindowTab('Metro', 
                    'Metro A' +
                    '<br />Metro D'
                )
            ];
    
	marker.openInfoWindowTabsHtml(tabs);
};
GEvent.addListener(marker, "click", window);

map.addOverlay(marker);

Le principe reste le même que pour l’exemple précédent, où la fenêtre d’informations ne comportait pas d’onglets : on ne relève que deux différences :

Il faut créer les deux onglets,
Et l’emploi de la méthode openInfoWindowTabsHtml à la place de openInfoWindowHtml

En exécutant ce code (encore une fois, après intégration au squelette proposé en tête d’article), on obtient, selon l’onglet sélectionné, l’une des deux captures d’écran suivantes :

Pour le premier onglet, et ceci pour le second :

Notez tout de même qu’il vaut mieux ne pas abuser de ces fonctionnalités, sous peine que vos utilisateurs ne soient perdus…

Fenêtre d’informations maximisable

Et si vous n’avez toujours pas assez de place pour afficher vos informations avec une fenêtre multi-onglet, en particulier dans le cas où vous souhaitez afficher un grand texte informatif, vous avez la possibilité de rendre votre fenêtre maximisable.

Une fenêtre maximisée prendra la taille de la carte entière, ce qui vous offrira plus de surface pour afficher des information.
Notez que la fenêtre affichée en mode maximisée présente des informations qui sont spécifiques à ce mode, et plus les onglets qu’elle affiche en conditions normales.

Pour rendre une fenêtre maximisable, il faut passer en second paramètre à la fonction d’ouverture de fenêtre (openInfoWindowHtml ou openInfoWindowTabsHtml) un objet contenant les deux propriétés suivantes :

maxTitle : le titre que portera la fenêtre une fois maximisée,
et maxContent : le contenu (au format HTML) qui sera affiché au sein de la fenêtre, une fois celle-ci maximisée.

Par exemple, pour afficher un long texte explicatif sur la fenêtre utilisée pour les exemples précédents :

var marker = new GMarker(coord);

var window = function() {
    var tabs = [
            new GInfoWindowTab('Infos',
                    '<strong>Place Bellecour</strong>' +
                    '<br /><img src="images/place-bellecour-miniature.jpg" alt="" />' +
                    '<br /><a href="http://fr.wikipedia.org/wiki/Place_Bellecour">Voir l\'article sur Wikipedia (fr)</a>'
               ),
            new GInfoWindowTab('Metro', 
                    'Metro A' +
                    '<br />Metro D'
               )
        ];
    var options = {
        maxTitle: 'Place Bellecour, Lyon : Détails',

        maxContent: '<p><br />' +
                'La <b>place Bellecour</b> est la plus grande place de <a href="http://fr.wikipedia.org/wiki/Lyon" title="Lyon">Lyon</a> et ' + 
                'la troisième plus grande place de <a href="http://fr.wikipedia.org/wiki/France" title="France">France</a> ' + 
                '(après la <a href="http://fr.wikipedia.org/wiki/Place_des_Quinconces" title="Place des Quinconces">place des Quinconces</a> à ' + 
                '<a href="http://fr.wikipedia.org/wiki/Bordeaux" title="Bordeaux">Bordeaux</a> et la <a href="http://fr.wikipedia.org/wiki/Place_de_la_Concorde" title="Place de la Concorde">place de la Concorde</a> ' + 
                'à <a href="http://fr.wikipedia.org/wiki/Paris" title="Paris">Paris</a>), ' + 
                'et avec une taille de 310 mètres par 200 mètres (elle est donc plus grande que le Zocalo de Mexico 230x192 et que la Place Rouge de Moscou 330x70). ' + 
                'C\'est également <b>la plus grande place piétonne d\'Europe</b>, les places précédemment citées pouvant accueillir des véhicules, ' + 
                'au contraire de la Place Bellecour.</p>' + 
                '<p>En son centre se trouve une <a href="http://fr.wikipedia.org/wiki/Statue_%C3%A9questre" title="Statue équestre">statue équestre</a> de Louis XIV. ' + 
                'Une autre statue, représentant le <a href="http://fr.wikipedia.org/wiki/Petit_Prince" class="mw-redirect" title="Petit Prince">Petit Prince</a> ' + 
                'et <a href="http://fr.wikipedia.org/wiki/Antoine_de_Saint-Exup%C3%A9ry" title="Antoine de Saint-Exupéry">Antoine de Saint-Exupéry</a>, ' + 
                'est située à l\'extrémité ouest de la place.</p>' + 
                '<p>Deux pavillons se trouvent également sur la place. Le premier abrite l\'Office du Tourisme, le second une galerie d\'art.</p>'
        };
    marker.openInfoWindowTabsHtml(tabs, options);
};
GEvent.addListener(marker, "click", window);

map.addOverlay(marker);

Vous remarquerez l’apparition d’un bouton permettant de maximiser la fenêtre, en haut à droite de celle-ci :

Et une fois ce bouton cliqué :

Le bouton en haut à droite de la fenêtre se transforme, pour permettre de re-basculer vers le mode d’affichage normal.

Note : Si votre application est destinée à des utilisateurs avancés et/ou avertis, cette fonctionnalité vous servira peut-être. Par contre, dans le cas où votre application vise un public plus large, demandez-vous si elle sera utilisée par vos visiteurs : est-ce que ceux-ci ne finiront pas par être perdus au milieu de cet étalage technologique ?

Fenêtre d’informations avec styles CSS

Nous voici presque arrivés à la fin de cet article, et je réalise que les fenêtres d’informations que je vous ai présenté tout au long de celui-ci étaient graphiquement pauvre : aucune d’entre elles n’utilisait de fonctionnalités de mise en page par feuille de style CSS !

Heureusement, sela ne signifie pas que ce n’est pas possible !

Si vous définissez des styles au sein de votre page, que ce soit dans la partie <head> de la page (comme dans l’exemple ci-dessous), ou au sein d’une feuille de styles CSS externe, vous pourrez l’utiliser dans les textes de votre fenêtre d’information.

Par exemple, définissons deux styles (simples) au sein de la balise <head> de notre page :

<style type="text/css">
    #metroA {
        color: #ed1c24;
        font-weight: bold;
    }
    #metroD {
        color: #00a650;
        font-style: italic;
    }
</style>

Et utilisons les dans le second onglet de notre exemple - ici, pour afficher les couleurs des deux stations de Metro passant Place Bellecour :

var marker = new GMarker(coord);
var window = function() {
    var tabs = [
            new GInfoWindowTab('Infos',
                    '<strong>Place Bellecour</strong>' +
                    '<br /><img src="images/place-bellecour-miniature.jpg" alt="" />' +
                    '<br /><a href="http://fr.wikipedia.org/wiki/Place_Bellecour">Voir l\'article sur Wikipedia (fr)</a>'
               ),
            new GInfoWindowTab('Metro', 
                    '<span id="metroA">Metro A</span>' +
                    '<br /><span id="metroD">Metro D</span>'
               )
        ];
    
    marker.openInfoWindowTabsHtml(tabs);
};
GEvent.addListener(marker, "click", window);
map.addOverlay(marker);

Et voici une capture d’écran du rendu obtenu :

Comme nous pouvons le constater, nos styles ont bien été pris en compte à l’intérieur de la fenêtre d’informations :-)

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

Les posts suivants pourraient aussi vous intéresser :

Commentaires

1. Par baptiste le 2008-06-11 09:14

Très bon tutoriel !
Merci

:-)

2. Par Chandon le 2008-06-11 09:21

Bonjour, merci pour ce tutorial très riche :)
J'ai un souci (tiens comme c'est étrange ;) )
Je n'arrive pas à marier les fonctions de l'exemple 5 (plusieurs marqueurs personnalisés par thèmes) et celles de window 2 (infos par onglets sur chaque marqueur).
J'ai essayé un peu dans tous les sens, rien à faire. Une petite piste ? :)

Par ailleurs, je me souviens avoir vu des marqueurs 'par défaut' de googlemap (genre les drapeaux, des arbres, des maisons, etc... Impossible à remettre la main dessus.
Merci de votre aide !

3. Par Pascal MARTIN le 2008-06-11 20:42

Bonjour/soir,
Merci à tous deux pour vos commentaires !

Chandon > Désolé, votre commentaire avait été classé en spam... le temps de le re-classifier... Et le voila en ligne !

Pour répondre à votre question, quelque chose de la forme suivante devrait coller, en théorie :

var window = function() {
        var tabs = [
                new GInfoWindowTab('Infos',
                        '<strong>Ligne : ' + infosStation.ligne + '</strong>' +
                        '<br />Station : ' +
                        infosStation.loc
                   ),
                new GInfoWindowTab('Autre ^^', 
                        'A vous de trouver de quoi parler ici ;-)'
                   )
            ];
        marker.openInfoWindowTabsHtml(tabs);
    };
GEvent.addListener(marker, "click", window);

Typiquement, en insérant cette portion de code entre la création du marqueur (fonction createMarker dans mes exemples), et son ajout à la carte (une fois la fonction terminée), les fenêtres d'informations devraient apparaître lors de clics sur ceux-ci.

Suite à votre question, je viens de mettre à jour le fichier joint à cet article, en ajoutant deux exemples :

exemple-X-marqueurs-perso-et-windows.js : Ajout de fenêtres d'informations sur des marqueurs personnalisés (version "moche" ^^ )
exemple-X-marqueurs-MapIconMaker-et-windows.js : Ajout de fenêtres d'informations sur des marqueurs créés à l'aide du MapIconMarker.

Dans un cas comme dans l'autre, j'ai inclus une version avec une fenêtre sans onglet, et une version avec onglets (il faudra commenter/décommenter dans le code)

Pour ce qui est des marqueurs "par défaut", par contre, il ne me semble pas avoir noté le lien non plus :-(
Un tour de google donne des choses de ce genre : http://mapki.com/index.php?title=Icon_Image_Sets ; est-ce que cela correspond ?

En espérant que cela répond à votre question,

Bon courage !

PS : j'oubliais : Félicitations Chandon, vous venez de faire le 100ième commentaire posté sur ce blog !

4. Par Chandon le 2008-06-12 09:10

Merci pour votre réponse, je vais essayer avec ça :)
En fait ma carte fonctionnait correctement (sans les onglets) avec l'ancienne méthode, mais là j'ai profité de votre tuto pour essayer de tout reprendre, et ça a coincé :-O
Je vous tiens au courant, merci pour votre 'service après vente' ;)

Sinon, j'ai fini par remettre la main sur les icones custom google :)
http://econym.googlepages.com/geico...

5. Par Pascal MARTIN le 2008-06-12 18:59

Pas de problème :-)
Et merci pour le lien %)

6. Par Chandon le 2008-06-19 15:26

ça marche au poil, un vrai bonheur, merci pour ce site :)

7. Par Pascal MARTIN le 2008-06-20 06:58

Merci !

8. Par Gregory Raby le 2008-06-24 13:02

Excellente série d'articles. Merci d'avoir partagé ces trouvailles.

A quand un "mapmaker" vraiment complet ?

Ciao
Greg

9. Par Hope le 2008-06-27 12:07

:-) Je suis sur le cul, merci pour ce tuto, c’est un vrai bonheur !
Je suis à fond dans l’apprentissage de cette API afin de l’utiliser dans mon projet de site Web et là, après avoir passé en revu tous tes articles, j’ai l’impression de respirer, encore merci.
Je suis impatient de lire tes prochains articles comme celui sur les « Event » de l’API.

10. Par Actuacity le 2008-08-07 11:59

Merci pour vos talents !
Cela m'a bien servi dans le développement de mon site.

En espérant que d'autres astuces s'ajouteront à cette liste ;-)

11. Par Pascal MARTIN le 2008-08-07 19:34

Merci :-)

Peut-être ^^
Pas tout de suite, cela dit : je n'ai pas eu l'occasion de toucher à google maps ces derniers temps... Par contre, pour rester aux technos google, il se peut qu'une paire d'articles arrivent à propos de google gears, que j'ai commencé à utiliser sur un autre projet ^^

12. Par A Morel le 2008-08-14 20:30

Bonjour,

tes articles sont sympa et illustres
les explications sont claires
en deux mots : vraiment super
merci LOL

a bientôt j'espère, pour un commentaire sur un futur article sur les évènements de l'api ?!

alex

13. Par tete-jaune le 2008-09-19 11:15

Bonjour,
Merci pour ce tuto particulièrement précis et très complet.
Par contre je me posais une question :
Est-il possible d'avoir, dans un onglet, un "showMapBlowup" du lieu en question avec un zoom plus important et dans un autre onglet un descriptif?
Je n'ai pas encore trouvé la réponse.
Merci d'avance

14. Par tete-jaune le 2008-09-19 15:26

J'ai trouvé la solution à ma question précédente. Je joins le code correspondant.

<!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>
    <title>Google Maps JavaScript API</title>
    <style type="text/css">
        /*  Les 2 fichiers CSS servent pour la mise en page de la recherche (champ en bas à droite sur la map)
        *
        *  #detailmap : Pour l'affichage de la mini map dans l'onglet
        */
        
        @import url("http://www.google.com/uds/css/gsearch.css");
        @import url("http://www.google.com/uds/solutions/localsearch/gmlocalsearch.css");
        
        #detailmap {
            font: normal 10px verdana;
            width: 250px;
            height: 150px;
            border:1px solid gray;
        }
    </style>
    <!-- Google Map API JS (Mettre la KEY) -->
    <script src="http://maps.google.com/maps?file=api&v=2.100&key=KEY_GOOGLE_MAP_API"></script>
    <!-- Fichiers JS a importer pour activer la recherche sur la map -->
    <script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0" type="text/javascript"></script>
    <script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript"></script>
    
    <script type="text/javascript">
        var map;
        var centerPoint = new GLatLng(48.858814,2.294426);
        var rect;
        
        function initialize() {
            if (GBrowserIsCompatible()) {
                map = new GMap2(document.getElementById("mapAPI"), {mapTypes:[G_NORMAL_MAP,G_SATELLITE_MAP,G_HYBRID_MAP]});
                map.setCenter(centerPoint, 6);
                map.addControl(new GScaleControl());
                map.addControl(new GLargeMapControl());
                map.addControl(new GMapTypeControl());
                map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,20)));
                map.enableContinuousZoom();
                map.enableScrollWheelZoom();
                
                // Point 1
                var point = new GLatLng(48.858814,2.294426);
                var marker = new GMarker(point);
                GEvent.addListener(marker, "click", function() {
                    var tab1 = new GInfoWindowTab("Info", "<div>Exemple d'un marker avec des onglets<br />et un zoom dans le dernier onglet<\/div>");
                    var tab2 = new GInfoWindowTab("Info", "<div>La tour Eiffel<\/div>");
                    var tab3 = new GInfoWindowTab("Zoom", "<div id='detailmap'><\/div>");
                    var infoTabs = [tab1,tab2,tab3];
                    marker.openInfoWindowTabsHtml(infoTabs);
                
                    var dMapDiv = document.getElementById("detailmap");
                    var detailMap = new GMap2(dMapDiv, {mapTypes:[G_SATELLITE_MAP]});
                    var detailMarker = new GMarker(point);
                    detailMap.setCenter(point , 16);
                    detailMap.addControl(new GSmallMapControl());
                    detailMap.addOverlay(detailMarker);
                    // Pour supprimer les copyritghts sur la mini map
                    var CopyrightDiv = dMapDiv.firstChild.nextSibling;
                    var CopyrightImg = dMapDiv.firstChild.nextSibling.nextSibling;
                    CopyrightDiv.style.display = "none";
                    CopyrightImg.style.display = "none";
                });
                map.addOverlay(marker);
            }
        }
        // Pour activer la recherche sur la map
        GSearch.setOnLoadCallback(initialize);
    </script>
</head>
<body onload="initialize()" onunload="GUnload()">
    <div id="mapAPI" style="width: 600px; height: 600px"></div>
</body>
</html>

15. Par Pascal MARTIN le 2008-09-19 17:59

Bonjour,

J'aime avoir à la fois la question, et la réponse !
(désolé, la réponse était passée en spam ; le temps de la publier, et la voici :-) )

Merci pour vos commentaires ;-)

16. Par Etienne le 2008-10-06 15:25

Bonjour,
Félicitations pour la qualité de votre blog.
J'ai une petite question (qui n'a qu'un vague rapport avec la choucroute) mais je me lance quand même :
Comment réaliser une interface à la mode de l'i-phone et confrères pour l'utilisation conjointe d'un GPS et de googlemaps ?

Je ne suis pas clair ? Oui c'est vrai je ne suis pas très clair, alors je précise :
Disons que j'ai un GPS dont grâce auquel je lis des coordonnées en longitute et latitude. Comment faire pour centrer une carte Google Maps sur ces coordonnées ? La réponse est peut-être triviale, je n'arrive pas à me faire une idée en browsant... Est-il possible avec quelques lignes de javascript de récupérer des coordonnées... peut-être dans un fichier, ou via quelquechose de plus évolué. Bref, vous m'avez l'air compétent en la matière, je ne le suis pas, je me permets de vous poser la question. Ca se trouve la réponse n'a aucun intérêt !
En tout cas merci pour votre blog.

17. Par w3clic le 2008-10-11 11:08

Immense merci pour ces tutoriaux super bien faits... il suffit de suivre et tout s'enchaîne
Bravo.

18. Par Pascal MARTIN le 2008-10-15 08:01

Bonjour,

Etienne > malheureusement, aucune idée "générique" ne me vient à l'esprit : si votre GPS a un mode d'export de données, ça sera un plus ; mais il restera toujours le problème de "comment accéder à ces coordonnées via JS, qui ne sait pas accèder à quelque chose en dehors du navigateur".
Typiquement, JS ne permettra pas d'accéder à un fichier dans lequel le GPS stockerait les coordonnées courantes...

w3clic > Merci :-)

19. Par Matthieu le 2008-10-20 16:16

Bonjour à tous,

J'ai un problème avec l'HTML dans les onglets le voici :

Je dispose de nombreux pointeurs sur ma carte (>1500) et les onglets affichent des pages web sur d'autres serveurs, via une balise <object>, avec un système de variables identiques pour tous les serveurs.

ex : pour le pointeur 1, le premier onglet affiche www.serveurA.com/?id=1, le second affiche www.serveurB.com/?id=1, etc...

Mais, puisqu'il y a un mais, l'API veut précharger tous les onglets dès l'affichage de la carte. Et, ce qu'il se passe, c'est que les serveurs A et B acceptent d'afficher quelques requetes, puis bloquent les suivantes (ce qui est normal quand on envoie 1500 demandes d'affichage d'un coup).

Ce que j'aimerais, c'est que l'onglet se charge si et seulement si on clique dessus pour l'afficher...

Avez vous une idée du "comment faire ?"

Cordialement,
Matthieu

20. Par Pascal MARTIN le 2008-10-20 18:52

Bonsoir,

L'extension "ExtInfoWindow" répondrait peut-être à votre problème : elle permet de charger le contenu d'une fenêtre d'informations via une requête Ajax, au moment où l'utilisateur clique sur le marqueur déclenchant l'ouverture de la fenêtre.

Pour plus d'informations, vous pouvez jeter sur un oeil sur :

http://googlemapsapi.blogspot.com/2007/12/extinfowindow-10-ajax-powered-css.html
Ou sur la doc de l'API de l'extension
Ou sur la page des exemples (jetez un oeil en bas de page, notamment ^^ )

En espérant que ça réponde à votre question,

Bon courage !

PS : 1500 marqueurs sur une carte ? Vous n'avez pas peur que ça fasse un peu trop pour vos utilisateurs (et les capacités de leurs machines) ?

21. Par Matthieu le 2008-10-21 23:17

ça m'a l'air très interressant merci !

Pour le PS, sur ma petite bécanne, ça ne plante pas. Il faut 1 à 2 secondes pour charger le tout.

22. Par Pascal MARTIN le 2008-10-22 07:39

Pas de problème :-)
Bon courage !

PS² : ok ;-)

23. Par Matthieu le 2008-10-22 21:06

Alors, après une petite nuit passée à apprivoiser tout celà, ça fonctionne. ça "rame" un chouia plus quand même, surtout avec IE.

D'ailleurs, chose interressante, j'ai aussi découvert que pour faire fonctionner l'API avec IE et une liste de coordonnées dans un xml, il suffit de passer de la version 2 à la version 2.89

Enfin, le dernier problème à résoudre vient du script ExtInfowindow qui me place "idéalement" l'infobulle... idéalement oui si on a un niveau de zoom élevé. sinon, la carte tourne litérallement en rond ! (on voit ça sur le dernier exemple de la liste)

24. Par Pascal MARTIN le 2008-10-23 20:26

IE n'a pas vraiment le moteur Javascript le plus performant, de manière générale ; pas étonnant que ça soit celui qui rame un peu plus ^^
(Mais malheureusement, sur un site non orienté utilisateurs "informaticiens", difficile de ne pas supporter IE :-( )

Merci pour l'astuce :-)

Pour votre dernier point, par contre, je ne saisis pas ^^
J'admets que le fait que la carte se déplace "toute seule" n'est pas forcément agréable ; mais "tourne en rond" ?

25. Par Arnaud le 2008-11-08 10:59

Un grand merci pour ces articles

26. Par Raymond Lachaux le 2008-12-14 18:52

Bravo, et merci.

Mais je sèche sur un point: j'ai 83 marqueurs sur ma carte et des tableaux Nom[x]="nom_dolmen", Photo[x]="chemin_image.jpg".

Je fais une boucle, mais le passage de la chaîne par Nom[x]+'<br /><img src=Photo[x].. est impossible: img src n'accepte pas de variables. J'ai essayé le php, le perl... et parcouru le net sans trouver de réponse.

Pouvez vous m'aider ?

27. Par Pascal MARTIN le 2008-12-16 19:53

Bonsoir,

Ne vous est-il pas possible de générer un contenu HTML pour chaque fenêtre sur un marqueur ? Sans avoir à manipuler la propriété src des balises img, mais directement en générant lesdites balises img, entières ?

En fait, pour donner un exemple, quid de quelque chose qui ressemble à ceci :

var titre = 'Test';
var imgSrc = 'http://blog.pascal-martin.fr/public/global/pascal-martin-h80.jpg';
var legende = '';
var window = function() {
    marker.openInfoWindowHtml(
          '<strong>' + titre + '</strong>' +
          '<br /><img src="' + imgSrc + '" alt="glop !" />' +
          '<br />' + legende
      );
};
GEvent.addListener(marker, "click", window);

(En adaptant, bien évidemment, pour utiliser vos propres noms de variables -- et en gérant ce qui est éventuel échappement du contenu des variables avant injection dans le code HTML)

Est-ce que cela ne répond pas à votre besoin ?
(Ou est-ce que j'ai mal compris la question ? ^^)

Quoi qu'il en soit, Bon courage !

28. Par vince le 2008-12-22 12:23

Bonjour,
merci pour cet article très instructif, j'ai cependant une question, dans le cas de "multi marqueurs" je n'ai pas réussi a ajouter la window pour chacun d'entre eux.
je l'appelle dans la boucle qui parcours mon tableau d'informations sur les marqueurs

for (var i=0 ; i<installations.length ; i++)
{
    map.addOverlay(createMarker(installations[i]));
    GEvent.addListener(marker, "click", window(installations[i]));
}

et j'ai comme erreur :

redeclaration of const window

avez vous une idée ?
merci

29. Par taramite le 2008-12-22 23:19

Bonsoir,

Tres bon script, mais j'aurai voulu savoir s'il y a moyen de rajouter un petit lien ou autre sur ma bulle de mon marqueur, pour dire "Zoomer vers ce point" pour zoomer sur le point choisi donc.

Je ne sais pas si vous voyez ce que je veux dire.

Merci et bonne continuation pour ce super script.

30. Par Pascal MARTIN le 2008-12-23 15:19

Bonjour,

vince > vous utilisez dans la ligne suivante une fonction que vous avez nommé "window" :

GEvent.addListener(marker, "click", window(installations[i]));

J'imagine donc que, ailleurs dans votre script, vous avez quelque chose qui ressemble à ceci :

function window (param)
{
    // ...
}

Mais en Javascript, il existe déjà, pour le navigateur, un objet nommé "window", qui désigne la fenêtre au sein de laquelle vous travaillez. Et cet objet est constant : il ne peut pas être modifié.
=> Au moment où vous définissez une fonction nommée "window", vous entrez en conflit avec cet objet "window" déjà existant, et vous prenez l'erreur "redeclaration of const window" -- testé et reproduit sous Firefox.
(d'ailleurs, si vous utilisez quelque chose du genre de firebug, vous verrez que le numéro de ligne où se produit l'erreur est celui où votre fonction "window" est définie, et non celui de la ligne où elle est appelée).

Nommez votre fonction autrement, et il y a des chances que les choses fonctionneront mieux :-)

taramite > ça doit pouvoir se faire ^^
Si vous ajoutez dans votre infowindow un lien, et qu'un clic sur ce lien entraine le recentrage de la carte, avec un niveau de zoom supérieur au niveau actuel, vous devriez obtenir l'effet que vous souhaitez.

Par exemple, avec quelque chose de ce genre là :
(en adaptant, bien entendu, pour avoir des noms de variables qui collent avec les votre, notamment pour "data")

var point = new GPoint(data.lng, data.lat);
var marker = new GMarker(point);

var info = function() {
    marker.openInfoWindowHtml(
          '<a href="" onclick="map.setCenter(new google.maps.LatLng(' + data.lng + ',' + data.lat + '), 6); return false;">Click !</a>'
      );
};
GEvent.addListener(marker, "click", info);

map.addOverlay(marker);

Si votre carte, initialement, affichait une vue très lointaine (genre vue mondiale), un clic sur le lien dans l'info window centrera la carte sur le point correspondant au marker, et zoomera.
(le niveau de zoom pouvant s'adapter via le second paramètre de setCenter).

A noter : pour que ça fonctionne, ici, "map" doit être une variable globale.

En espérant que ça réponde à votre question,
Bon courage !

31. Par Batstoon le 2008-12-30 14:13

Salut !

Merci beaucoup pour tes tutos vraiment utiles et bien fait :)
Cepandant j'aurais besoin de la liste des arrets de tramway de Lyon et je ne les trouve pas dans tes archives ...

Les auraient tu gardées?

Merci d'avance :)

32. Par Stéphane le 2009-01-03 16:15

Bonjour,
Merci pour ce super tuto! J'ai un site qui sert a répertorier les produits gourmand (terroir)du Québec. J'aimerais ajouter dans mes bulles d'information google map un liens qui servirais au utilisateur du site a ajouter ce produits a une liste de leur produits préférer. Un peu comme le site:http://www.velib.paris.fr/trouver_u...
Avez-vous une idée sur comment je pourrais réaliser ce liens.

Merci :)

33. Par Pascal MARTIN le 2009-01-07 06:51

Bonjour,

Merci pour ces deux commentaires ; je réponds quelque peu en retard : congés sans Internet, puis reprise un peu chargée ^^

Batstoon > Dans le fichier joint à cet article, tu as les sources des exemples utilisés ; la liste des arrêts doit se trouver dedans (dans exemple-6.js à priori, il y a à la fois metros et trams)
Par contre, je ne garanti pas la précision : pour ne pas repomper la liste quelque part, j'ai pris google maps, j'ai parcouru "à la main" chacune des lignes, et j'ai relevé la liste des positions...

Stéphane > As-tu jeté un œil à ce que faisait le site pour les velibs ? Dans le texte HTML de la fenêtre d'information, tu as un lien (balise <a>), qui comporte un onclick, qui appelle une fonction JS, fonction JS qui effectue l'appel Ajax qui va bien.
=> Tu dois pouvoir mettre en place le même mécanisme relativement facilement

Bonne année à tous deux, et bon courage !
Pascal M.

34. Par baronphi le 2009-01-07 19:03

Merci pour ce tuto très intéressant.

Je bloque tout de fois sur un point. Peux tu m'aider un peu?

var Lat=45.43963710000000000000 // rentrez ici votre longitude
var Lng=4.38783100000000000000 // rentrez ici votre lattitude
var Zoom=10 // rentrez ici le zoom désiré entre 1 et 16
var map = new GMap2(document.getElementById("map" )); // affiche le module
map.setCenter(new GLatLng(Lat,Lng ),Zoom ); //affiche la carte au lieu précisé
map.addControl(new GLargeMapControl()); // affiche le curseur de zoom
map.addControl(new GMapTypeControl()); // affiche le curseur de déplacement
map.setMapType(G_HYBRID_MAP); // Vue Mixte
var marqueurs = {
        TextAffiche: '2005 Saint Etienne', 
        lat: 45.43963710000000000000, 
        lng: 4.38783100000000000000
    },
    {
        TextAffiche: '2006 Saint Genest Lerpt', 
        lat: 45.44590300000000000000, 
        lng: 4.33508400000000000000
    };
for (var i=1 ; i<marqueurs.length ; i++)
{
    map.addOverlay(createMarker(marqueurs[i]));
}
var createMarker = function(lieu)
{
    var point = new GPoint(lieu.lat, lieu.lng);
    var marker = new GMarker(point);
    return marker;
}; // createMarker

En effet, le script ci_dessous n'affiche que la carte et j'avoue ne pas voir l'erreur probablement tout simple.

Avec mes remerciements

Phi

[edit par P. Martin] Pour des raisons de lisibilité (et un problème de mise en forme des commentaires par ma plate-forme de blog), j'ai reformaté ton code source.

35. Par Pascal MARTIN le 2009-01-08 06:49

Bonjour,

En regardant le code, et testant pour voir ce que je peux faire, dans l'ordre :

Pourquoi est-ce que la boucle suivante :

for (var i=1 ; i<marqueurs.length ; i++)

commence à 1, et non à 0 ?
En Javascript (comme en C, PHP, JAVA ...), le premier élément d'une liste est à l'indice 0, et non 1 (Contrairement aux langages issus de BASIC, notamment).
=> Avec ce code, ça n'affichera qu'un seul point (le second), en ignorant celui d'indice 0 (le premier)
=> En mettant var i=0, tu auras quelque chose de plus proche du comportement (probablement) souhaité.

Ensuite, effectivement, on ne voit pas de marqueur s'afficher :-(
Dans ce genre de cas, la première chose à faire, par sécurité, et de dézoomer, pour avoir une vue plus globale.
Par exemple :

var Zoom=2 // rentrez ici le zoom désiré entre 1 et 16

Et là, on se rend compte que les deux marqueurs (qui semblent ne faire qu'un, à cette distance) sont affichés, mais en Afrique de l'est (Somalie, à priori), et non en France !

Si je regarde dans ton code, Saint Étienne est déclaré comme ayant une latitude de 45° et une longitude de 4° ; d'après wikipedia, c'est bien ça
=> le problème doit être à l'affichage, et non à la déclaration.

Dans la fonction createMarker, tu utilises ceci :

var point = new GPoint(lieu.lat, lieu.lng);

Est-ce que l'inverse, à savoir :

var point = new GPoint(lieu.lng, lieu.lat);

Ne serait pas plus approprié ?
(Après vérification, avec cette modification, les deux marqueurs apparaissent, en France, aux environs de St Étienne ^^ )

Pour résumer, donc :

Probablement problème de compteur sur la boucle de parcours des points,
Et inversion des paramètres à l'appel à GPoint.

En espérant que cela réponde à ta question et te permettre d'avancer,
Bon courage !

36. Par Baronphi le 2009-01-08 15:09

Merci pour tes conseils.
J'avais effectivement passé la var i à 1 pour faire un essai et j'ai oublié de la repasser à 0.

Pour le problème des coordonnées, je ne comprends pas trop le bug mais bon j'inverse.

Malheureusement pour moi, j'ai toujours une erreur et les marqueurs ne s'affichent pas. Je vais essayer de contourner le problème par un autre moyen.

Encore merci pour ce super tuto et pour les petits conseils de raisonnement.

Phi

37. Par fngcp le 2009-01-09 13:57

Bonjour,
Pour localiser les adhérents à notre association j'utilise l'API de google.

Les données sont extraites d'une base Mysql avec Json.

Jusque là tout va bien mais je n'arrive pas à afficher la photo de chaque adhérent.

Voici le lien de la carte pour voir le résultat

http://www.fngcp.fr/cartes/carte/ca...
la photo se trouve dans le 2ème onglet.

Pour la photo je fais le lien dans le fichier js de cette manière:

' <img scr= "' + pointData.pic + '" width="80" heigth="80" alt=""> '
et dans le fichier Json je déclare ceci:
$json = "\t\t'pic': '".$row

38. Par Pascal MARTIN le 2009-01-09 22:53

Baronphi > Voici la portion de code que j'ai utilisé pour tester en te répondant :

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

var initMap = function ()
{
    var Lat=45.43963710000000000000 // rentrez ici votre longitude
    var Lng=4.38783100000000000000 // rentrez ici votre lattitude
    var Zoom=10 // rentrez ici le zoom désiré entre 1 et 16
    var map = new GMap2(document.getElementById("map" )); // affiche le module
    map.setCenter(new GLatLng(Lat,Lng ),Zoom ); //affiche la carte au lieu précisé
    map.addControl(new GLargeMapControl()); // affiche le curseur de zoom
    map.addControl(new GMapTypeControl()); // affiche le curseur de déplacement
    map.setMapType(G_HYBRID_MAP); // Vue Mixte
    var marqueurs = [
        {
            TextAffiche: '2005 Saint Etienne', 
            lat: 45.43963710000000000000, 
            lng: 4.38783100000000000000
        },
        {
            TextAffiche: '2006 Saint Genest Lerpt', 
            lat: 45.44590300000000000000, 
            lng: 4.33508400000000000000
        }
    ];
    for (var i=0 ; i<marqueurs.length ; i++)
    {
        map.addOverlay(createMarker(marqueurs[i]));
    }
};

var createMarker = function(lieu)
{
    var point = new GPoint(lieu.lng, lieu.lat);
    var marker = new GMarker(point);
    return marker;
}; // createMarker

Avec un peu de chance, tu trouveras un élément de réponse là-dedans :-)
(Cela dit, quel type d'erreur te prends-tu, à tout hasard ? )

fngcp > Bonjour,

Avez-vous modifié quelque chose depuis que vous avez posté votre commentaire ?
Par exemple, en cliquant sur un des marquerrs, j'ai la photo suivante qui est chargée, et affichée :
http://www.fngcp.fr/cartes/donnees_geoloc/photos/1230039800_Logofngcp.jpg
Mais ce dans le premier onglet.

Sinon, à tout hasard, assurez-vous que vous n'avez pas de 404 dûes à une URL d'image éventuellement mal formée ?
(Ou plus d'informations sur le problème précis ? Un problème dans les données JSON ? Que donne le code HTML entier de l'onglet ? ... ? )

Quoi qu'il en soit, bon courage !

PS : le bout de JS pour essayer de désactiver le clic droit, c'est particulièrement lourd (ça aide absolument pas à fouiller dans l'appli avec firebug, en plus de cela ^^ )... Et ça n'empéche pas les gens un minimum motivés de trouver comment cliquer quand même ^^

39. Par fngcp le 2009-01-12 12:26

Bonjour et merci pour votre réponse,
Effectivement j'ai changé quelque chose, j'ai ajouté le logo qui s'affiche sur le premier onglet et ça c'est commun à tous les onglets.
Mais je n'arrive toujours pas à afficher la photo du contact sur le 2ème onglet:
Voici le code html de l'onglet en question:

var tab1 = new GInfoWindowTab ("President", ' <table border=0><tr><td>' + ' <img scr= "' + pointData.pic + '" width="80" heigth="80" alt=""> ' + ' </td><td> ' + '<span>' + '<i> ' + 'Président(e)' + ' </i> ' + ': ' + '  ' + '<strong>' + '<font color="#993300">' + pointData.nom + ' ' + pointData.prenom + ' ' + ' </font></strong><br/></span> ' + '<br/>' + '<span>' +'<i>' + '  ' +'<strong>' + '<font color="#993300">' + pointData.fonction +'<strong></font>' + ' </td></tr></table>' +' ' );

Et voilà les données Json:

@@$json = array("[");
$tab = "\t{";
while ($row = @mysql_fetch_assoc($result)){
$json = $tab;
$json = "\t\t'latitude': ".$row

40. Par fngcp le 2009-01-12 13:52

suite à mon précédent message:
et lorsque l'on appelle le fichier Json cela donne ceci:
Extrait:
@@[
{
'latitude': 46.5213438,
'longitude': 3.6817793,
'departement': '03 allier',
'nom': 'XXXXXXX',
'prenom': 'Xxxxxxx',
'fonction': '',
'societe': 'F.D.G.C.P. 03',
'siege': 'Chez le Président',
'phone': '04 70 00 00 00,
'phone2': '06 00 00 00 00',
'num': '270',
'commentaire': '',
'pic': '1231495682_FNGCP_nom.gif',
'adresse': 'rue du .',
'codepostal': '03290',
'localite': 'Dompierre sur Besbre',
'email': '',
'website': ''
}
}
];@@

Sinon, à tout hasard, assurez-vous que vous n'avez pas de 404 dûes à une URL d'image éventuellement mal formée ?

Et comment le vérifier ?

Merci

41. Par fngcp le 2009-01-12 15:57

Rebonjour,
C'est bon j'ai résolu mon problème.
C'était effectivement un problème d'URL de l'image qui n'était pas bon, j'ai corrigé et cela fonctionne.

Merci pour votre aide.

42. Par Pascal MARTIN le 2009-01-19 07:04

Bonjour,

OK, parfait :-)

(désolé pour la réponse tardive... La semaine dernière un peu chargée...)

Bonne continuation !

43. Par eda le 2009-01-29 16:18

Bonjour, je me permets de poster car vous avez l'air de bien maitriser le sujet. J'affiche la carte + markers générés par du php. Je souhaiterais que lorsqu'on clique sur un marker (l'info bulle s'affichant en mouseover), cela renvoie vers un lien html mais je séche depuis 2 jours et je n'ai rien trouvé sur le net.
Si vous pouviez m'éclairer, un grand merci d'avance.

44. Par Pascal MARTIN le 2009-02-02 18:20

Bonsoir,

J'imagine que pour brancher l'affichage de la fenêtre d'information sur le survol, vous avez utilisé quelque chose de ce type :

var afficherInfos = function() {
    marker.openInfoWindowHtml(
            '<strong>Place Bellecour</strong>' +
            '<br /><img src="images/place-bellecour-miniature.jpg" alt="" />' +
            '<br /><a href="http://fr.wikipedia.org/wiki/Place_Bellecour">Voir l\'article sur Wikipedia (fr)</a>'
      );
};
GEvent.addListener(marker, "mouseover", afficherInfos);

(Branchement d'un gestionnaire sur l'événement "mouseover" (ou un autre événement du même type), qui affiche la fenêtre d'information)

Si oui, pourquoi ne pas utiliser quelque chose ce genre pour déclencher l'ouverture d'une autre page lors du clic sur le marqueur :

var actionClick = function () {
    window.location.href = 'http://fr.wikipedia.org/wiki/Place_Bellecour';
};
GEvent.addListener(marker, "click", actionClick);

Globalement, vous branchez un gestionnaire d'événement sur l'événement "click", et ce gestionnaire d'événement ne fait rien d'autre que changer l'URL sur laquelle pointe votre navigateur.

En espérant que cela réponde à votre question,

Bonne soirée !

45. Par Batstoon le 2009-02-10 17:32

Salut Pascal,

Merci pour la liste des transports en communs de lyon, ca m'a été très utile :)

Pourrais tu me renseigner sur une chose : J'ai bien cherché, mais je n'ai trouvé nul part comment changer la forme de la bulle d'aide de google map :(
Sait tu si cela est possible?

Bye

46. Par ralou le 2009-02-12 15:02

bonjour, j avais une tite question et je ne vois pas trop comment faire .

sur une map je dois créer un rectangle(comme dans windows par exemple ou on peu sélectionner plusieurs dossier), je dois représenter cela afin de selectionner le contenu du rectangle.je sais pas si je suis tres clair .
donc si ta une solution suis preneur.
merci
bonne journée

47. Par Pascal MARTIN le 2009-02-16 00:22

Batstoon >

Pas de problème pour la liste :-)
A noter : depuis quelques semaines, Google Maps propose une fonctionnalité d'affichage des lignes de Transport en commun, pour certaines villes de France -- dont Lyon.
(Je n'ai pas encore eu l'occasion de m'amuser avec, ni de voir si ça pouvait se manipuler ne serait-ce qu'un minimum, mais on doit pouvoir en tirer quelques trucs intéressants, avec un peu de chance ^^ )

Pour ce qui est de la forme des bulles d'informations, je n'ai pas souvenir d'avoir entendu dire un jour qu'il soit possible de modifier leur forme :-( Et une recherche rapide dans la doc de l'API ne ramène pas grand chose qui semble utile :-(
Désolé...

ralou >

Je ne réussi pas à retrouver dans mon répertoire de codes de tests d'exemple qui corresponde à ce à quoi je pense, mais ce genre de chose peut être obtenue en utilisant l'objet GPolyline pour tracer 4 lignes, formant un rectangle.
C'est peut-être aussi faisable en utilisant GPolygon, mais je n'ai jamais essayé.

Pour plus d'information, vous pouvez jeter un œil sur Polylines Overview, et sur Polygons Overview, dans les tutoriaux de l'API Google Maps.

Quoi qu'il en soit, bon courage !

48. Par Brebiou le 2009-02-20 14:01

Tout d'abord, merci pour ce tuto très fourni ;)

Ensuite j'ai une piste pour ralou:

function load()
{
    if (GBrowserIsCompatible())
    {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng (50.64086100717342, 3.044157028198242), 16);

        // Initialisation de l'array "monpolygone" préchargé par le contenu des cordonnées des points délimitant le polygone
        var monpolygone = new GPolygon([
            new GLatLng(50.641895204617235, 3.0393075942993164),
            new GLatLng(50.64246672501933, 3.0414533615112305),
            new GLatLng(50.64331038529024, 3.04171085357666),
            new GLatLng(50.64306545322356, 3.042783737182617),
            new GLatLng(50.6443717428266, 3.0442428588867188),
            new GLatLng(50.64314709738765, 3.045787811279297),
            new GLatLng(50.643337599885506, 3.047010898590088),
            new GLatLng(50.64257558526024, 3.0472683906555176),
            new GLatLng(50.642085712190244, 3.0496931076049805),
            new GLatLng(50.640806575098544, 3.0481696128845215),
            new GLatLng(50.64019420991196, 3.0487489700317383),
            new GLatLng(50.63997647814491, 3.0477404594421387),
            new GLatLng(50.63895584704025, 3.047182559967041),
            new GLatLng(50.63868367500226, 3.0457019805908203),
            new GLatLng(50.6380984997833, 3.044736385345459),
            new GLatLng(50.63852037102293, 3.044006824493408),
            new GLatLng(50.63803045568031, 3.0417752265930176),
            new GLatLng(50.63966348696253, 3.041367530822754),
            new GLatLng(50.63999008640991, 3.0403804779052734),
            new GLatLng(50.64057523807698, 3.0408740043640137),
            new GLatLng(50.641895204617235, 3.0393075942993164)
            ], "#990000", 5, 1, "#ff0000", 0.2);

        // Affichage du polygone
        map.addOverlay(monpolygone);
    }
}

Création d'un array (variable tableau) contenant les coordonnées des points délimitant le tracé du polygone.

Au tableau de coordonnées "monpolygone" est associé une série de propriété : "#990000", 5, 1, "#ff0000", 0.2".

Celles-ci correspondent à :

#990000 : Couleur de la ligne de contour
5 : Épaisseur de la ligne de contour exprimée en pixels
1 : Opacité/transparence de la ligne de contour (valeur comprise entre 0 et 1)
#ff0000 : Couleur de remplissage du polygone
0.2 : Opacité/transparence du remplissage du polygone (valeur comprise entre 0 et 1)

Bonne journée ;)

PS: Désolé pour la mise en forme, j'ai pas reussi a me servir des balises de codes -_-"

49. Par Pascal MARTIN le 2009-02-23 18:47

Bonsoir,

Merci pour cette réponse :-)

Ne vous en faites pas pour les balises code : il faut que je retouche un truc ou deux au niveau du plugin que j'utilise pour la mise en forme des commentaires : la balise "code" ne fonctionne pas en multi-lignes... Il faut que je vois pour activer une balise "pre"... Quitte à l'implémenter ^^

50. Par ralou le 2009-02-27 13:19

ok je vous remercie pour votre aide désolé je viens de voir le message en faite
mais j avais réussi a la faire en faite en me cassant un peu plus la tête mais avec du mal.
cependant sa correspondait po au attente car par la suite je devais modifier le curseur pour agrandir ou réduire la taille du rectangle.
du coup j ai fait une div sur la map et me suis débrouillé avec une classe que j ai récupéré
merci quand mm
si sa intéresse la classe pour agrandir rétrécir et tout un rectangle est sur : http://blog.oli-web.com
merci pour le tuto qui ma bien servi

51. Par DoDo le 2009-03-03 11:35

Hello,

d'abord merci bien pour cet article, il est très instructif !

Ensuite j'aurai une petite question :

Comme dans ton exemple avec une adresse qui retourne plusieur coordonnées (exemple avec Beaurepère) je voudrais afficher plusieur "marker" mais en passant une adresse du genre "hotel, ville, france" et pouvoir récupérer les differents hotels.

dans ton exemple le geocoder.getLatLng retourne plusieur coordonnées, mais en passant "hotel, ville, france" il n'en retourne qu'une seule.

Es ce qu'il y a un moyen d'obtenir les différentes corrdonnées de mon adresse ?

Merci pour ta réponse et bonne continuation !

52. Par Pascal MARTIN le 2009-03-14 22:49

Bonsoir,

Tout d'abord, merci :-)

Difficile à dire comme ça, mais je suppose que si le service de geocoding ne retourne qu'une seule adresse, c'est "voulu" :

Soit il n'y a effectivement qu'une seule adresse de connue par Google pour le lieu saisi,
Soit il y en a plusieurs, mais l'une d'entre elles est considérée comme "tellement bonne" que les autres ne sont pas retournées.

D'un autre côté, en jetant un coup d'œil à la doc de l'API, est-ce qu'il ne serait pas intéressant d'utiliser la méthode getLocations, plutôt que getLatLng (Cf http://code.google.com/intl/fr/apis/maps/documentation/reference.html#GClientGeocoder ) : la doc dit que la première méthode renvoi potentiellement plusieurs résultats, alors que la seconde n'en renvoit qu'un seul (les coordonnées du point répondant "le mieux" à la requête).

D'ailleurs, après réflexion, dans le second article de cette série, c'est la méthode getLocations que j'ai utilisé, justement en prenant "Beaurepaire" comme exemple, dans le cas où je souhaitais obtenir plusieurs résultats...

Qu'en pensez-vous ?

Quoi qu'il en soit, bon courage, et bonne continuation !

53. Par lol44 le 2009-03-24 13:32

Bonjour,

très bien les explications.
j'ai une question sur la création d'un bouton dans une infobulle sur google maps. Ce bouton situé dans une info bulle est lié à un polygone, il permettrait de désafficher le kml lié et d'en afficher un nouveau.

Merci par avance

54. Par stephane le 2009-04-06 11:11

Bonjour,

Je trouve votre site tres bien expliqué, ça m'a tres bien servit (les onglets c'est vraiment sympa je savais pas qu'on pouvais en mettre).
Par conter, j'aurais une petite question, je cherche à afficher directement ma bulle d'info à l'affichage de ma carte sans passer par un clik et je ne sais pas comment faire.
Auriez vous une idée ?
Merci

Steph

55. Par Pascal MARTIN le 2009-04-07 18:42

Bonsoir,

Merci :-)

Pour répondre à votre question : sans vraiment chercher à tester dans les détails, mais est-ce qu'il ne serait pas possible de brancher une fonction sur l'événement "load" de la carte ? Et que cette fonction soit responsable de la création du marqueur ainsi que de l'ouverture de l'infoWindow lui correspondant ?

Typiquement, quelque chose dans ce genre :

var initMap = function ()
{
    var map = new GMap2(document.getElementById("map"));
    
    GEvent.addListener(map, 'load', function () {
        var point = new GPoint(4.832179, 45.757838);
        var marker = new GMarker(point);
        map.addOverlay(marker);
        marker.openInfoWindowHtml(
                '<strong>Place Bellecour</strong>' +
                '<br /><img src="images/place-bellecour-miniature.jpg" alt="" />' +
                '<br /><a href="http://fr.wikipedia.org/wiki/Place_Bellecour">Voir l\'article sur Wikipedia (fr)</a>'
          );
    });
    
    map.setCenter(new GLatLng(45.757838, 4.832179), 15);
};

Ça devrait faire l'affaire, non ?
En somme, au chargement de la carte, on crée un marqueur, on l'ajoute à la carte, et on affiche sa fenêtre d'informations.

Quoi qu'il en soit, bon courage !

56. Par ebouilleur le 2009-04-16 01:28

Salut,

Vraiment super ton tuto !
Très bon boulot.

Il ne me reste plus qu'une question, pour les marqueurs si on n'a pas les coordonnées latitude et longitude, ont fait comment (a partir de l'adresse donc)?

Merci

57. Par Pascal MARTIN le 2009-04-16 16:14

Bonjour,

Merci :-)

Dans le cas où vous connaissez l'adresse d'un point, mais pas ses latitude/longitude, il vous faudra déterminer celles-ci, pour pouvoir afficher le marker "où il faut".

Pour cela, vous pouvez envisager de passer par l'API du service de GeoCoding ; Cf par exemple mon article google.maps.ClientGeocoder : latitude et longitude d'un point à partir de son adresse, pour plus d'informations ;-)

Par contre, pour éviter de réaliser des milliers d'appels à l'API, vous pouvez envisager de charger la latitude/longitude d'un point à partir de son adresse au moment de sa création, plutôt que de les obtenir uniquement au moment de l'affichage... En les stockant en base de données (ou autre) entre temps, comme vous le faite déjà probablement pour l'adresse.

Bon courage !

58. Par Jean le 2009-05-04 11:20

Félicitation pour vos articles. Clarté, concision, pédagogie, tout y est !

Avant de découvrir votre blog, j'ai fait quelques essais avec la classe GoogleMapAPI en PHP .

La connaissez-vous ?

Quels avis critiques (les + comme les - ) avez vous ?

Elle me parait "ancienne" : est-elle fiable et dispose-t-elle d'une communauté suffisante à la faire vivre ?

Cordialement,

Jean

59. Par jean-louis le 2009-05-30 01:39

Bonjour
J'ai créé un tableau de points, un tableau de markers et un polygone qui les joint. Tout cela s'affiche très bien sur la carte (merci à Pascal pour le tutoriel). J'ai essayé de faire afficher bonjour si on clique sur un quelconque de ces markers. Mais cela ne dit pas bonjour ! Voici ma méthode :

   var initMap = function ()
   {
   var map = new google.maps.Map2(document.getElementById('map'));
   map.addControl(new GLargeMapControl());
   map.addControl(new GScaleControl());
   var points =[];
   
   points.push(new GLatLng(46.536665,0.415486666667)) ;
   points.push(new GLatLng(46.5287533333,0.418166666667)) ;
   //...
   points.push(new GLatLng(46.5443883333,0.415238333333)) ;
   
   
   var nbr_etap = points.length ;
   var som_lat = 0 ;
   var som_lng = 0 ;
   for (i=0; i<nbr_etap; i++) {
       som_lat = som_lat + points[i].lat() ;
       som_lng = som_lng + points[i].lng() ;
   }
   var pointcentral_lat = som_lat/nbr_etap ;
   var pointcentral_lng = som_lng/nbr_etap ;
   
   var pointcentral = new GLatLng(pointcentral_lat,pointcentral_lng);
   
   
   
   //partie 1 : instanciation du tableau des markers
   var i=0 ;
   var markers =[];
   for (i=0; i<points.length; i++) {
       markers.push(new GMarker(points[i]));
   }
   //creation d'une ligne polygonale bleue, largeur 4 pixels :
   var polyline = new GPolyline(points, "#0000ff", 4);
   // niveau de zoom 13/18)
   map.setCenter(pointcentral, 13);map.clearOverlays();
   
   
   //partie 2 : declaration de la fonction rattachée à chaque markers
   for (i=0; i<points.length; i++) {
       var window = function (){
           markers[i].openInfoWindowHtml('bonjour');
       };
   }
   
   //partie 3 : la fonction est rattachée au clic sur chaque markers
   for (i=0; i<points.length; i++) {
       GEvent.addListener(
           markers[i],"click",window
       );
   }
   
   
   //partie 4 : ajout des markers sur la carte
   for (i=0; i<points.length; i++) {
       map.addOverlay(markers[i]);
   }
   map.addOverlay(polyline);		
   }; // initMap

Si quelqu'un a une idée ?
A bientôt.

60. Par Clacla le 2009-06-21 19:08

Bonjour !
j'ai une petite question : est-il possible de mettre un titre (genre le nom du monument désigné par le marqueur) dans une minimap ?
merci !

61. Par Antho le 2009-07-10 14:30

J'ai un souci avec les markers que je n'arrive pas à régler :

Je t'invite à regarder ma page : http://www.trackmypals.com/index.html lorsque je clique sur un marker, le marker se centre au milieu en haut de la map alors que je voudrais que le point se centre au milieu de la carte. Si tu trouves où ça bug ça m'intéresse carrément ...

Autre question : Est-il possible d'afficher le openInfoWindowHtml avec un z-index afin qu'il apparaisse au dessus de la carte et s'il faut qu'il déborde de l'espace de la carte pour qu'il soit plus visible ?

Merci d'avance
Anthony

62. Par gintama le 2009-07-24 01:42

Bonjour,
j'ai une question moi aussi XD
Est il possible de faire une polyline avec infobulle tirant les données d'un fichier xml, j'ai déja les marqueurs tirés du fichier xml mais je ne trouve pas la fonction adéquate pour la faire sous javascript/html pourtant elle a l'air d'éxister sur le site de google maps.
Si quelqu'un a la réponse merci,
Cordialement,
Mathieu

63. Par gitana le 2009-08-13 20:41

Bonjour,

J'ai mis en oeuvre les solutions que vous proposez sur ce tuto. Malheureusement si sous IE8 et FF les choses se passent bien, sur IE7, les marqueurs ne s'affichent pas et j'ai une erreur qui se produit dans un fichier .js (fournit pas google) qui est absolument imbitable. Est-ce que des gens auraient des pb d'affichage sous IE7 et pas IE8 ? Des idées.

Cordialement

64. Par gitana le 2009-08-13 20:46

Petite précision : l'erreur se produit à chaque affichage d'un marqeur. J'en ai 4 actuellement sur la carte donc quatre erreurs consécutives.

65. Par jpp le 2009-08-20 20:35

Fantastique tuto et explications ! Félicitation à tous les fondus de codes!
Je crée en ce moment une communauté de village et me heurte à un petit problème.
J'ai une carte Google map embarquée sur mon site et je souhaiterai que les membres puissent poser un marqueur à l'emplacement de leur maison.
Comme tout le monde habite le même village il n'y a pas éparpillement des données !
Mais je ne trouve pas comment permettre à d'autres personnes de poser des marqueurs sur ma carte perso.
Il faudrait évidement que cela soit simplissime, qu'un enfant puisse se localiser sans avoir à parler html.
Si quelqu'un à une idée ....
Cordialement,
jpp

66. Par Pascal MARTIN le 2009-08-26 20:54

Bonsoir,

@gitana > à tout hasard, si le problème se produit toujours (même chose si d'autres problèmes de ce type venaient à se poser à l'avenir ^^ ) :

Quelles sont les erreurs ? Au moins les messages d'erreurs ?
Avez-vous une page accessible publiquement, qui mette en évidence le problème ?
Si non, une portion (courte !) de code le reproduisant ?

@jpp > en branchant un gestionnaire d'événement sur l'événement click de la carte, il doit être possible d'obtenir les coordonnées correspondant au point où l'internaute souhaite placer un marqueur. Ensuite, idéalement, il faudrait aussi gérer son drag and drop -- il doit y avoir moyen de détecter ça aussi...

Par exemple, pour ce qui est de la détection de l'endroit où l'utilisateur a cliqué sur la carte, il faudra se brancher sur l'événement GMap2.click
Et pour détecter la fin du drag and drop d'un marker, GMarker.dragend devrait faire l'affaire.
Dans un cas comme dans l'autre, la fonction utilisée comme gestionnaire d'événement devrait recevoir les latitudes/longitude du point sélectionné par votre utilisateur.

Bon courage !

67. Par Sebastien le 2009-08-28 16:21

Salut !

Déjà merci pour ton article, il est vraiment super instructif !

J'avais par contre une petite question... En fait quand j'affiche un marker j'aimerais aller chercher des infos en ajax, car j'ai 2 onglets à faire, le deuxième comportant un petit texte qui n'est évidement pas déjà présent sur la page et qui doit apparaître uniquement si on ouvre l'onglet (ou si on click sur le marker, ça serait déjà génial)... J'ai essayé de chercher un peu mais j'ai rien trouvé. En gros je voudrais que sur :
GEvent.addListener(marker, "click", window);
à la place de "window" je puisse appelé une fonction en lui envoyant un paramètre pour qu'il me retourne le contenu du marker. J'avais réussi à le faire mais en fait il fait les appels directement à la base quand le js se charge...

Merci d'avance !

Sébastien

68. Par Vincent le 2009-09-02 10:01

Bonjour,

Merci pour ce tuto !!

Cependant j'ai un souci d'affichage des info bulle sous IE.

Sous firefox tout fonctionne. Avec IE, il me dit qu'il y a une erreur dans ma page.

Mon google API fait appel à un fichier xml pour les coordonnées et les infos des markers.

voici le code :

   //<![CDATA[

   function initialize() {
     if (GBrowserIsCompatible()) {
       var map = new GMap2(document.getElementById("map_canvas"));
       map.setCenter(new GLatLng(48.863673, 2.3445384), 10);

map.setUIToDefault();

   function creerMarker(point, onglet1, onglet2) {
     var marker = new GMarker(point);
     var infoTabs = [
       new GInfoWindowTab("Adresse", onglet1),
       new GInfoWindowTab("Fichiers", onglet2),
       		
       ];
     GEvent.addListener(marker, "click", function() {
       marker.openInfoWindowTabsHtml(infoTabs);
       });
     return marker;
     }

       GDownloadUrl("donnees.xml", function(data) {
         var xml = GXml.parse(data);
         var markers = xml.documentElement.getElementsByTagName("marker");
         for (var i = 0; i < markers.length; i++) {
           var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")), 9);
       var marker = creerMarker(point, markers[i].getAttribute("info"), markers[i].getAttribute("details"));
           map.addOverlay(marker);
         }
       });
     }
   }

   //]]>
   </script>

Je n'arrive pas à comprendre le pourquoi du comment !

Merci d'avance pour votre aide.

Vincent

69. Par asa02 le 2009-09-09 15:40

Bonjour,

je souhaite insérer une légende pour afficher/désafficher des thématiques.
Auriez vous un code à me proposer ?
Merci d'avance !

70. Par pierre le 2009-10-05 18:23

Bonjour,
Tout d'abord félicitation pour ce tutoriel, bien plus clair que les "aides" de google.
J'ai une petite question de newbie, j'aimerais bcp générer la liste des marqueurs avec du php... Le soucis c'est que je ne sais pas faire le lien entre mon code php qui génére le tableaux des points que je veux afficher et le javascript.
Cela est-il possible ? et si oui comment faut-il faire.
Merci

71. Par rémi G le 2009-10-16 19:51

Bonjour Pascal MARTIN,
Je suis sur Lyon et je recherche quelqu'un pour me développer une petite application API google maps ?
Pourriez-vous m'aider et/ou me contacter pour que je vous expose en détails mon projet ?
Merci d'avance et bon week end.
Rémi

72. Par Frédéric D. le 2009-10-25 17:47

Un grand merci pour ces modes d'emploi que j'ai pu mettre à profit ici
http://www.velo-cyclosport.com/agenda/carte_epreuves2010.html
et ici http://www.velo-cyclosport.com/annuaire/geolocalisation.php

Je cherche en complément à pouvoir modifier les info bulles :
- mettre un lien "zoom" dans l'info bulle, permettant lorsqu'on clique dessus de zoomer sur le lieu du marqueur
- mettre un lien "détail" , permettant lorsqu'on clique dessus d'afficher des informations détaillées, en remplacement de la croix dans le coin droit supérieur
- peut-on adapter et choisir la taille des info bulles ?

Merci par avance si vous avez des réponses

Frédéric

73. Par Condor42 le 2009-11-10 11:46

Je travaille en php, j'ai positionné sans problème les marqueurs sur une carte mais je ne sais pas éclater un marqueur en plusieurs lorsque les coordonnées sont exactement identiques (comme le fait automatiquement Google earth). Qui a la solution (même en javascript) ?
Merci

74. Par theache le 2009-11-25 09:37

Bonjour.
Merci pour ce super tutorial.

J'essaie de faire un marqueur personnalisé avec une bulle d'information lorsque l'on clique dessus.

Séparément, le marqueur personnalisé est OK, le marqueur cliquable est lui aussi OK. Mais les 2 en même temps, cela ne fonctionne pas.

D'où ma question, est-ce possible ou est-ce mon code qui est faux ?

75. Par Damien le 2009-12-17 16:32

Bonjour,

Merci pour la très bonne doc qu'on peux trouver sur ton site.
J'essaye d'ailleurs d'adapter un de tes codes sur le texte étendue.
Je souhaiterais que dedans ça me liste les données d'une table mysql pour le client souhaité.
J'arrive à faire ma requête mais je ne vois pas comment passer ma variable $client qui me servira a filtrer. Cette variable est en javasvript.

Voilà mon code

maxContent: '<p><br />' +
               '<?php $retour_com = mysql_query("	SELECT num FROM commande WHERE client='".$client."' ORDER BY date_commande"); while($donnees_com = mysql_fetch_array($retour_com)) { echo $donnees_com['num'].' '.$donnees_com['date_commande'].'<br>'; } ?>' +

Merci d'avance de votre aide !

76. Par Sparkle le 2010-01-14 19:29

Tuto génial!!!! et très utile....
Certes, il faut le digérer, mais après 3 ou 4 aspirines, ça passe tout seul ;-)

Un grand merci à toi Pascal pour cette réalisation

Vous découvrirez bientôt le résultat sur mon site communautaire de partage et d'échange d'étapes (POI) et de TRIP sur le thème de la quête avec un GPS (www.GpsAway.com)

77. Par Yacare le 2010-01-26 21:55

Bravo pour tous ces exemples, bien organisés, progressifs, compréhensibles, je désespérais de trouver ça !

Petite demande d'aide tout de même :
Je génère une carte avec une dizaine de marqueurs qui sont susceptibles de se trouver à quelques centaines de mètres les uns des autres ou à plusieurs kilomètres, comment choisir un niveau de zoom pour être au plus près, mais avoir tous mes marqueurs visibles ? Y-a-t'il une méthode spécifique pour obtenir ça ?

Merci déjà et merci d'avance.

78. Par Tarino le 2010-02-05 18:30

excellent "tuto", merci beaucoup pour cette doc ;)
Respect pour le travail qui a été fourni, c'est pas facile de faire une documentation aussi claire et riche tout en restant très simple et clair
Thanks

79. Par icegirl le 2010-02-16 15:33

thanx so much for the tutorial it's very easy and clear
Excuse Me for my french
j'ai un problem lord du creation de plusieur markers sur la carte le temps de chargement est tres tres lord
et j'ai une grande base de donneé =30800 enregistrement

est ce qu'il y a une méthode pour le mettre tres rapide ???
merci bien

80. Par vladimire le 2010-03-04 21:16

mon soucis à moi c'est de créer _dynamiquement_ plusieurs cartes dans la même page, et ce pour plusieurs pages...

81. Par oasisman le 2010-03-08 00:02

bonjour,

Comment résoudre le problème des marqueurs qui se supperposent (même coordonnées) ?
Et comment faire pour centrer la carte sur l'ensemble des points trouvés (MarkerManager) ?
Merci pour ce tuto, très util !

82. Par Stef. le 2010-05-11 21:39

Est-il possible sur Google map, après avoir identifié plusieurs marqueurs, des les ralier à un point centrale entre eux pour optimiser le déplacement entre les marqueurs, et ce, par une application de Google map

83. Par kira78 le 2010-07-06 00:28

Bonsoir, j'espère que cette article n'est pas placé dans les archives et j'aurais une petite réponse à ma question.
Je voudrais savoir comment placer plusieurs marqueurs en ayant les adresses et non les coordonnées.
Dans l'exemple il est indiqué que l'on doit faire une boucle sur un tableau, et appeler notre fonction createMarker.
Toujours dans l'exemple createMarker définit un point depuis des coordonnées. Je voudrais savoir comment procéder si je ne possède qu'une liste d'adresses ?
J'ai essayer d'utiliser le géocoder mais sans susscès voici ce que j'ai essayé :
@@
// Recherche des coordonnées d'un point dont on connait l'adresse :
var geocoder = new google.maps.ClientGeocoder();
geocoder.getLatLng(adresse, function (coord) {

  map.setCenter(coord, 8);
  for (var i=0 ; i<aAdresse.length ; i++){
     map.addOverlay(createMarker(aAdresse[i]));
  }

});

var createMarker = function(adrresse)
{

  var geocoderLieu = new google.maps.ClientGeocoder();
  geocoderLieu.getLatLng(adrresse, function (point) {
    marker = new GMarker(point);
   });

 return marker;

}; // createMarker
@@

Voila ce que j'ai testé, j'ai une erreur au niveau de la ligne var geocoderLieu = new google.maps.ClientGeocoder();
=> a is undefined dans main.js

Auriez vous une idées ?

84. Par Maxence le 2010-08-06 23:10

Bonjour,
Je débute depuis cette semaine avec gmaps et j'ai "parcouru" un certains nombre de sites, de rubriques : Vraiment chapeau pour ton article, ton tuto !
Cela m'a permi de comprendre "rapidement" (et d'y revenir quand je bloquerai) beaucoups.
Bonne continuation et .... Merci

Maxence

85. Par Benoit le 2010-10-08 16:12

bonjour et merci pour votre tuto, il m'a bien aider pour un petit projet en cours de réa, mais (il y a toujours une mais !!)

comment faire pour afficher des point qui ont les même position géographique ?

même code postal dans mon cas car je prend les données dans une BD transformer en xml, en effet il se chevauche (c'est normal) mais pas moyen de les séparer quand je clique dessus ( a la manière googlearth)

merci de vos tuyaux

86. Par Flavien le 2011-03-28 21:30

Salut,

Très bon tutoriel. Moi j'aimerai savoir comment rajouter un icône sur une carte google lorsqu'un utilisateur clik dessus. A chaque clik, ajour d'un icône en conservant les précédents....Je blok je trouve pas de tuto, si tu as une réponse je suis très preneur.

En te remerciant

Flavien

87. Par Alain le 2011-05-03 13:16

Bonjour,

Merci pour ce super tutorial

88. Par Riivah le 2011-05-11 12:03

Bonjour!

J'ai débuter avec google maps est ca marche parfaitement grasse a votre tuto! merciii!!!

se que je veut faire c'est de modifier la couleur de fond et la bordure de la fenetre d'information. Est-il possible?

Merci

89. Par matrix2000 le 2011-09-12 12:53

bonjour je ne sais pas si vous pouvez repondre a cette question
je voudrais selectionnez un marqueur via une case a cocher
pouvez - m aidez

merci

90. Par Denis le 2012-04-11 10:41

Bonjour,
j'arrive aujourd'hui à afficher une carte avec plusieurs marqueurs et un tracé pour les relier les uns aux autres.
Cependant j'aimerais pour tracer un itinéraire "route" plutôt qu'un tracé en "vol d'oiseau".
Voici la partie qui fonctionne :

<head>
<title>Tutoriel Google Maps</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<! ~~Inclusion de l'API Google MAPS~~ >
<! ~~Le paramètre "sensor" indique si cette application utilise détecteur pour déterminer la position de l'utilisateur~~ >

function initialiser() {
var latlng = new google.maps.LatLng(50.2130052, 3.8385401);

var options = {
center: latlng,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var carte = new google.maps.Map(document.getElementById("carte"), options);

var direction

/****************Nouveau code****************/

//redéfinition du centre de la carte
carte.setCenter(new google.maps.LatLng(50.2130052, 3.8385401));
//redéfinition du zoom
carte.setZoom(10);

//chemin du tracé
var parcoursBus = [
new google.maps.LatLng(50.357113, 3.518332),
new google.maps.LatLng(50.6138111, 3.0423599),
new google.maps.LatLng(50.623287, 3.1736238),
new google.maps.LatLng(50.2130052, 3.8385401)];
var traceParcoursBus = new google.maps.Polyline({
path: parcoursBus,//chemin du tracé
strokeColor: "#6666FF",//couleur du tracé
strokeOpacity: 1.0,//opacité du tracé
strokeWeight: 5//grosseur du tracé
});
//lier le tracé à la carte
//ceci permet au tracé d'être affiché sur la carte
traceParcoursBus.setMap(carte);
/********************************************/

}
</script>
</head>
<body onload="initialiser()">
<div id="carte" style="width:100%; height:100%"></div>
</body>
</html>

Et voici un exemple que j'ai trouvé pour l'itinéraire mais je ne sais pas comment l'adapter à mon code précédent

calculate = function(){

       var request = {
           origin      : (50.357113, 3.518332),
           destination : (50.2130052, 3.8385401),
           travelMode  : google.maps.DirectionsTravelMode.DRIVING // Mode de conduite
       }

       var directionsService = new google.maps.DirectionsService(); // Service de calcul d'itinÃ©raire

directionsService.route(request, function(response, status){ // Envoie de la requÃªte pour calculer le parcours

           if(status == google.maps.DirectionsStatus.OK){
               direction.setDirections(response); // Trace l'itinÃ©raire sur la carte et les diffÃ©rentes Ã©tapes du parcours
           }
       });
   }

Merci d'avance pour votre aide si vous avez le temps ...

91. Par sisi le 2012-04-24 12:23

bonjour;
merci beaucoup pour vos explications et pour ce tutoriel, jaimerais integrer googlemaps sur mon site j'ai trouve plusieurs code ou classe qui permetent cela mais ce qui m'interesse dans votre tutoriel cest plus exactement la partie4 ou vous remplacez les marqueurs de google standard par des marqueurs perso jaimerais a mon tour ajouter mes propres marqueurs sur la carte.
j'ai donc voulu teste le code propose en premier avec votre marqueur en forme de flèche le probleme est que j'obtiens juste une carte sans marqueurs

je pense avoir suivi les étapes mais si pouviez me dire si j'ai oublie d’intégrer une partie a mon code ça m'aiderait beaucoup
jai creer un fichier exemple_0.js qui contient:

//////////////////
// JavaScript Document
var init = function ()
{

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

}; // init

var initMap = function ()
{

   var map = new google.maps.Map2(document.getElementById('map'));
   map.addControl(new GSmallMapControl());  // Contrôle de zoom, déplacement sur la carte
   
   //geocoder.setBaseCountryCode('fr');//////////////////////////////preciser le pays
   var adresse = 'place bellecour, Lyon, france';
   var geocoder = new google.maps.ClientGeocoder();
   geocoder.getLatLng(adresse, function (coord) {
       map.setCenter(coord, 15);  // Centrage sur le point dont on a obtenu les coordonnées depuis l'adresse
       //map.setMapType(G_HYBRID_MAP);  // Vue satellite + informations cartographiques
map.setMapType(G_NORMAL_MAP);
       // TODO : marqueurs, infoWindows, ...

   });

}; // initMap

// Liste des stations de metro de Lyon
var stationsMetro = [

   // Ligne A
   {ligne: 'A', loc: 'L. Bonnevay Astroballe', lat: 45.76434960130271, lng: 4.91063117980957},
   {ligne: 'A', loc: 'Cusset', lat: 45.76482861073421, lng: 4.901275634765625},
   // ...

   // Ligne B
   {ligne: 'B', loc: 'Charpennes - Charles Hernu', lat: 45.77021718342828, lng: 4.86393928527832},
   {ligne: 'B', loc: 'Brotteaux', lat: 45.76692422863731, lng: 4.860076904296875},
   // ...

   // Ligne C
   {ligne: 'C', loc: 'Cuire', lat: 45.7850630013786, lng: 4.8332977294921875},
   {ligne: 'C', loc: 'Henon', lat: 45.77907726002176, lng: 4.827632904052734},

   // ...

   // Ligne D      
   {ligne: 'D', loc: 'Gare de Vaise', lat: 45.77955614297965, lng: 4.804630279541016},
   {ligne: 'D', loc: 'Valmy', lat: 45.77464739768229, lng: 4.806003570556641}
   // ...

]; // stationsMetro
///////////////
// Ajout d'un marqueur sur la carte :
var myIcon = new GIcon();
myIcon.image = "images/mon-marqueur.png";
myIcon.shadow = "images/marqueur-ombre.png";
myIcon.iconSize = new GSize(20, 34);
myIcon.shadowSize = new GSize(40, 33);
myIcon.iconAnchor = new GPoint(10, 34);
myIcon.infoWindowAnchor = new GPoint(10, 1);
var markerOptions = {

   icon: myIcon

};
var marker = new GMarker(coord, markerOptions); // Création d'un marqueur localisé sur ce point
map.addOverlay(marker); // Et ajout du marqueur à la carte

/////////////////////
for (var i=0 ; i<stationsMetro.length ; i++)
{

   map.addOverlay(createMarker(stationsMetro[i]));

}

var createMarker = function(infosStation)
{

   var point = new GPoint(infosStation.lng, infosStation.lat);

   var myIcon = new GIcon();
   if (infosStation.ligne === 'A')
       myIcon.image = "images/marqueur-rouge.png";
   else if (infosStation.ligne === 'B')
       myIcon.image = "images/marqueur-rouge.png";
   else if (infosStation.ligne === 'C')
       myIcon.image = "images/marqueur-rouge.png";
   else if (infosStation.ligne === 'D')
       myIcon.image = "images/marqueur-rouge.png";
   myIcon.shadow = "images/marqueur-ombre.png";
   myIcon.iconSize = new GSize(20, 34);
   myIcon.shadowSize = new GSize(40, 33);
   myIcon.iconAnchor = new GPoint(10, 34);
   myIcon.infoWindowAnchor = new GPoint(10, 1);

   var markerOptions = {
       icon: myIcon
   };

   var marker = new GMarker(point, markerOptions);
   return marker;

}; // createMarker

/////////////////////
une page test.php comme suit:
<?php require_once('googlemaps-key.php');?>
<?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]">

   <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
   <title>D&eacute;couverte de l'API Google Maps - Marqueurs et fen&ecirc;tres d'information</title>

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

   <script type="text/javascript"
       src="exemple-0.js">
   </script>

</head>
<body>

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

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

</body>
</html>
//////////
et enfin
une page googlemaps_key.php

///////////////
<?php $apiKey = 'ABQIAAAAnA2FiFc_BknJBrLWqdaYgxT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQe3jGsoyKKo5ZAasrlZefgTF6muQ';?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dt...">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

</body>
</html>
//////////////

le tous dans un répertoire carto avec un dossier images qui contient votre marqueur perso ainsi que son ombre
merci à vous
sisi

92. Par sisi le 2012-04-25 12:22

bonjour voila jai réussi a avoir les marqueurs sur ma carte comme sur votre exemple mais la je rencontre un autre probleme j'aimerais modifie votre code et ne pas avoir a lui donner des stations ou des lignes de metro ni des lang et lat mais récupérer des adresses postales et les représenter sur ma carte avec des marqueurs perso et la je bloque au niveau de la liste

////////////// var initMap = function ()

 {
    var map = new google.maps.Map2(document.getElementById('map'));
   map.addControl(new GSmallMapControl());  // Contrôle de zoom, déplacement sur la carte
    
     var adresse = ' LAUSANNE,SUISSE ';
     var geocoder = new google.maps.ClientGeocoder();
      geocoder.getLatLng(adresse, function (coord) {
         map.setCenter(coord, 13);  // Centrage sur le point dont on a obtenu les coordonnées depuis l'adresse
          map.setMapType(G_HYBRID_MAP);  // Vue satellite + informations cartographiques

        // Ajout d'un marqueur pour chacune des stations de metro de Lyon
         for (var i=0 ; i<stationsMetro.length ; i++)
        {
             map.addOverlay(createMarker(stationsMetro[i]));
        }
       
      });
     
}; // initMap

///////////////
pour la liste jai voulu teste pour 2 adresses comme suit:

var stationsMetro = [

    
    {ligne: 'A', loc: 'chemin du monteclard 1600 lausanne epalinges, SUISSE'},
     {ligne: 'A', loc: 'chemin du lys  LAUSANNE suisse'}];

puis je remplacer les lat et lan par adresse a ce niveau ?
merci beaucoup

93. Par sisi le 2012-05-03 10:31

bonjour super tutoriel merci beaucoup
cependant jai une question peut on faire une localisation avec des adresses au lieu des longitudes et latitudes je patine depuis un moment dessus j'ai pas réussi a modifie ce code
une idée?
merci d'avance
sisi

94. Par Nowell le 2012-06-06 17:39

Salut, je voudrais attribuer un identifiant( par exemple: "marker 1" à chacun de mes markers sur ma carte de sorte que l'dentifiant s'affiche en tout temps à coté du marqueur

Merci pour votre réponse

95. Par beges le 2012-08-07 01:08

Bonjour,

Tout d'abord, félicitations pour votre site qui m'aide beaucoup. Cependant, je penche depuis plusieurs jours sur un problème qui doit ^^etre tout simple mais que je ne vois pas. Je souhaite mettre de nouveaux marqueurs dans ma carte mais je ne sais pas où mettre le code, ni le code exact pour avoir une infobulle. Je vous joins mon code. Merci d'avance.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8" />
<title>Titre de votre page</title>
<style type="text/css">
@charset "iso-8859-1";
.conteneurgeneral {width:100%; height:100%; margin:0; padding:0;}
a:link {color: #000066; default; text-decoration: none}
a:visited {color: #000066; text-decoration: none;}
a:hover {color: #FF0000; default; text-decoration: underline}
*{
margin:0px;
padding:0px;
}
html{
height:100%;
}
body{
height:100%;
}
#lettrineImage{
float: left;
width: 220px;
height: 163px;
margin: 0 1em 1em 0;
}
#EmplacementDeMaCarte{
height:100%;
}
-->
</style>

google.maps.event.addDomListener(window, 'load', initialisation);
</script>

</head>

<body>
<div id="EmplacementDeMaCarte"></div>
<noscript>
<p>Attention : </p>
<p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
<p>Or, il semble que JavaScript est désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
<p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p></noscript>
</body>

</html>

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