Api Google Maps flèche Carte flèche Utilisation de la classe GMap2 - google.maps.Map2.

La classe GMap2 - google.maps.Map2

Article créé le : 12/01/2009
Dernière modification le : 30/12/2009

Présentation

GMap2(contenant, options) ou google.maps.Map2(contenant, options) est la classe centrale de l'API Google Maps. C'est elle qui permet la création d'une nouvelle carte.

Lors de la création d'une carte il faut lui attribuer obligatoirement :

  • un Nom,
  • un Emplacement ( balise <div> identifiée par un id ),

Il est également possible de préciser :

  • sa taille ( largeur, hauteur ) : size,
  • ses Types ( Plan, Satellite, Mixte, Relief, 3D Earth ) : mapTypes,
  • l'image du curseur lors du survol et/ou déplacement de la carte : draggableCursor - draggingCursor,
  • les options concernant la " GoogleBar " : googleBarOptions,
  • la couleur à afficher derrière les tuiles (portions de carte) : backgroundColor.

Le contenant

Pour créer une nouvelle carte nommée "maCarte" venant s'afficher dans une balise <div> ayant pour identifiant id="EmplacementDeMaCarte", il suffit d'insérer entre les balises <head></head> : 


var maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));

Exemple : (G*)


<head>

...

<script type="text/javascript">

...

var maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"));

...

</script>

...

</head>

Ou si vous utilisez Google AJAX APIs :


var maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));

Exemple : (google.maps.*)


<head>

...

<script type="text/javascript">

...

var maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"));

...

</script>

...

</head>

Ensuite, il suffit de placer entre les balises <body></body>, à l'endroit où l'on souhaite voir s'afficher la carte, le code : 


<div id="EmplacementDeMaCarte"><div> :

Exemple


<body>

...

<div id="EmplacementDeMaCarte"><div>

...

</body>

Taille de la carte : {size:new GSize(500, 200)}

Par défaut, la taille de la carte est égale à la taille de la <div> dans laquelle elle est insérée.

Si la taille de la carte est fixée à l'aide de {size:new GSize(500, 200)}, alors les dimensions de la <div> s'adapteront à la taille de la carte.

Exemples (G*)


var maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"),{size:new GSize(500, 200)});

Exemples (google.maps.*)


var maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"),{size:new google.maps.Size(500, 200)});

Type de carte : mapTypes

mapTypes représente un tableau contenant les types de cartes pouvant être utilisés pour une carte donnée.

Par défaut, G_DEFAULT_MAP_TYPES est utilisé. G_DEFAULT_MAP_TYPES est un tableau comportant 3 types de cartes :

  • 1 : G_NORMAL_MAP : Plan,
  • 2 : G_SATELLITE_MAP : Satellite,
  • 3 : G_HYBRID_MAP : Mixte.

Conséquence, n'importe qu'elle carte, par défaut, va comporter 3 types des cartes : Plan - Satellite - Mixte.

On retrouve ces types de cartes sous la forme de 3 boutons situés en haut à droite de l'écran et placé dans le même ordre.

Exemple : Avec GMapTypeControl

Exemple de bouton types de cartes par défaut GMapTypeControl : Plan - Satellite - Mixte

Exemple : Avec GMenuMapTypeControl

Exemple de bouton types de cartes par défaut GMenuMapTypeControl : Plan - Satellite - Mixte

Voici la liste des différents types de carte possibles pour la Terre :

Type de Carte Constante Remarque
Par défaut G_DEFAULT_MAP_TYPES Il s'agit d'un tableau contenant les 3 premiers types de cartes cités ci-dessous
Plan G_NORMAL_MAP  
Satellite G_SATELLITE_MAP  
Mixte G_HYBRID_MAP  
Relief G_PHYSICAL_MAP  
3D Earth G_SATELLITE_3D_MAP Pour pouvoir visualiser les cartes 3D, l'utilisateur doit installer le Plug-in Google Earth sur son ordinateur

Remarque :

Pour information, sachez que d'autres types de cartes existent pour le ciel, la Lune et Mars) :

Type Constante Description
Ciel G_SKY_MAP_TYPES Tableau renfermant l'unique type de carte du Ciel indiqué ci-dessous
G_SKY_VISIBLE_MAP Voûte céleste
Lune G_MOON_MAP_TYPES Tableau renfermant les 2 types de carte de la Lune indiqués ci-dessous
G_MOON_ELEVATION_MAP Relief
G_MOON_VISIBLE_MAP Surface
Mars G_MARS_MAP_TYPES Tableau renfermant les 3 types de carte de Mars indiqués ci-dessous
G_MARS_ELEVATION_MAP Relief
G_MARS_VISIBLE_MAP Surface
G_MARS_INFRARED_MAP Infra rouge

Grâce à l'utilisation de mapTypes, vous allez donc pouvoir modifier les types de cartes associés à une carte (modifier l'ordre, en ajouter ou supprimer).

Vous désirez que votre carte nommée "maCarte" s'affichant à l'intérieur de la <div> ayant pour identifiant id="EmplacementDeMaCarte" comporte 4 types de cartes dans l'ordre suivant :

  • 1 : Relief
  • 2 : Mixte
  • 3 : Plan
  • 4 : Satellite

Exemple (G*)


var maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"),{mapTypes: [G_PHYSICAL_MAP,G_HYBRID_MAP,G_NORMAL_MAP,G_SATELLITE_MAP]});

Exemple (google.maps.)


var maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"),{mapTypes: [G_PHYSICAL_MAP,G_HYBRID_MAP,G_NORMAL_MAP,G_SATELLITE_MAP]});

Vous désirez que votre carte nommée "maCarte" s'affichant à l'intérieur de la <div> ayant pour identifiant id="EmplacementDeMaCarte" comporte 2 types de cartes dans l'ordre suivant :

  • 1 : Relief
  • 2 : 3D Earth

Exemple (G*)


var maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"),{mapTypes: [G_PHYSICAL_MAP,G_SATELLITE_3D_MAP]});

Exemple (google.maps.)


var maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"),{mapTypes: [G_PHYSICAL_MAP,G_SATELLITE_3D_MAP]});

Important :

Lorsque votre carte va s'afficher pour la première fois, son type sera équivalent au premier situé dans le tableau mapTypes.

Type de curseur : draggableCursor - draggingCursor

Constante Type de curseur
draggableCursor Curseur s'affichant lors du survol d'une carte déplaçable. Par défaut, il s'agit d'une main ouverte.
draggingCursor Curseur s'affichant lorsque la carte est en cours de déplacement. Par défaut, il s'agit d'une main fermée.

Exemple (G*)


var maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"),{draggableCursor:"help"});

var maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"),{draggableCursor:"hand"});

var maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"),{draggableCursor:"crosshair"});

var maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"),{draggableCursor:"move"});

...

var maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"),{draggingCursor:"help"});

var maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"),{draggingCursor:"hand"});

var maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"),{draggingCursor:"crosshair"});

var maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"),{draggingCursor:"move"});

Exemple (google.maps.*)


var maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"),{draggableCursor:"help"});

var maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"),{draggableCursor:"hand"});

var maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"),{draggableCursor:"crosshair"});

var maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"),{draggableCursor:"move"});

...

var maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"),{draggingCursor:"help"});

var maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"),{draggingCursor:"hand"});

var maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"),{draggingCursor:"crosshair"});

var maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"),{draggingCursor:"move"});

Liste des propriétés CSS de cursor : http://www.echoecho.com/csscursors.htm

Couleur d'arrière plan de la carte : backgroundColor

Une carte, créée à l'aide de Google Maps, est constituée d'une multitude de portions de cartes (appelées tuiles = tiles).

Chaque portion de carte, ou tuile, est téléchargée jusqu'à l'obtention de la carte globale.

Lorsqu'une portion de carte n'est pas encore téléchargée, l'arrière plan de la tuile est, par défaut, de couleur grise.

L'option backgroundColor permet de modifier cette couleur.

Exemple (G*)


var maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"),{backgroundColor:"#ff00ff"});

Exemple (google.maps.*)


var maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"),{backgroundColor:"#ff00ff"});

Code

Code : google.maps.Map2 Avec Google Ajax API Loader

  • <?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" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr">
  • <head>
  • <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  • <title>TouraineVerte ma première carte</title>
  • <!-- Chargement du script Google AJAX APIs en précisant votre clé -->
  • <script type="text/javascript" src="http://www.google.com/jsapi?key=Insérez_Votre_Clef_API_ Ici"></script>
  • <script type="text/javascript">
  • //<![CDATA[
  • /* Chargement du module "maps" dans sa version "2.x" */
  • google.load("maps", "2.x",{"other_params":"sensor=false"});
  • /* Fonction initialize() */
  • function initialize() {
  • /* Si le navigateur est compatible avec l'API de Google Maps ... */
  • if (google.maps.BrowserIsCompatible()) {
  • /* On définit les options à appliquer à la carte ... */
  • var optionsDeMaCarte = {
  • /* Taille de la carte : largeur : 1024 px - hauteur : 370 px ... */
  • size:new google.maps.Size(1024,370),
  • /* On définit les types de cartes : Relief - Mixte - Plan - Satellite ... */
  • mapTypes: [G_PHYSICAL_MAP,G_HYBRID_MAP,G_NORMAL_MAP,G_SATELLITE_MAP],
  • /* On définit l'apparence du curseur pour déplacer la carte : crosshair ... */
  • draggableCursor:"crosshair",
  • /* On définit l'apparence du curseur lors de son déplacement sur la carte : move ... */
  • draggingCursor:"move",
  • /* On définit la couleur d'arrière plan des tuiles : fushia = #ff00ff ... */
  • backgroundColor:"#ff00ff"
  • };
  • /* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <div> ayant pour identifiant id="EmplacementDeMaCarte" ... */
  • var maCarte = new google.maps.Map2(document.getElementById("EmplacementDeMaCarte"), optionsDeMaCarte);
  • /* ... La carte nommée "maCarte" est centrée sur la Latitude 47.341571, la Longitude 0.514233, avec un niveau de zoom égal à 13 ... */
  • maCarte.setCenter(new google.maps.LatLng(47.341571,0.514233), 13);
  • /* ... Affiche les boutons permettant de modifier le type de carte ... */
  • /* ... L'ordre d'affichage des boutons est fixé par l'option mapTypes: ... */
  • maCarte.addControl(new google.maps.MapTypeControl());
  • /* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
  • }else{
  • /* ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". */
  • alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
  • }
  • }
  • /* Appelle la fonction "initialize" lorsque la page web sera chargée */
  • google.setOnLoadCallback(initialize);
  • //]]>
  • </script>
  • </head>
  •  
  • <body>
  • <!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
  • <!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
  • <div id="EmplacementDeMaCarte"></div>
  • <div style="margin:1em 0;padding:1em 0;height:auto;border:1px solid #513a0b;text-align:left;background-color:#e7e3d7;">
  • <ul>
  • <li>La taille de la carte est définie à l'aide de l'option <em>size:</em>
  • <ul>
  • <li><em>size:</em>new GSize(1024,370)</li>
  • </ul>
  • </li>
  • </ul>
  • <ul>
  • <li>Les types de carte sont définis à l'aide de l'option <em>mapTypes:</em>
  • <ul>
  • <li><em>mapTypes:</em>[G_PHYSICAL_MAP,G_HYBRID_MAP,G_NORMAL_MAP,G_SATELLITE_MAP]</li>
  • </ul>
  • </li>
  • </ul>
  • <ul>
  • <li>Le type de curseur affiché lors du survol de la carte est défini à l'aide de l'option <em>draggableCursor:</em>
  • <ul>
  • <li><em>draggableCursor:</em>"crosshair"</li>
  • </ul>
  • </li>
  • </ul>
  • <ul>
  • <li>Le type de curseur affiché lors du déplacement de la carte est défini à l'aide de l'option <em>draggingCursor:</em>
  • <ul>
  • <li><em>draggingCursor:</em>"move"</li>
  • </ul>
  • </li>
  • </ul>
  • <ul>
  • <li>La couleur d'arrière plan de la carte est défini à l'aide de <em>backgroundColor:</em>
  • <ul>
  • <li><em>backgroundColor:</em>"#ff00ff" - <span style="color:#f0f;font-weight: bolder;">couleur fushia</span></li>
  • </ul>
  • </li>
  • </ul>
  • </div></body>
  • </html>

Code : GMap2 Sans Google Ajax API Loader

  • <?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" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr">
  • <head>
  • <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  • <title>TouraineVerte ma première carte</title>
  • <!-- Chargement du script Google Maps, version 2.x, en précisant votre clé -->
  • <script src="http://maps.google.com/maps?file=api&v=2.x&key=Insérez_Votre_Clef_API_ Ici&sensor=false" type="text/javascript"></script>
  • <script type="text/javascript">
  • //<![CDATA[
  • /* Fonction initialize() */
  • function initialize() {
  • /* Si le navigateur est compatible avec l'API de Google Maps ... */
  • if (GBrowserIsCompatible()) {
  • /* On définit les options à appliquer à la carte ... */
  • var optionsDeMaCarte = {
  • /* Taille de la carte : largeur : 1024 px - hauteur : 370 px ... */
  • size:new GSize(1024,370),
  • /* On définit les types de cartes : Relief - Mixte - Plan - Satellite ... */
  • mapTypes: [G_PHYSICAL_MAP,G_HYBRID_MAP,G_NORMAL_MAP,G_SATELLITE_MAP],
  • /* On définit l'apparence du curseur pour déplacer la carte : crosshair ... */
  • draggableCursor:"crosshair",
  • /* On définit l'apparence du curseur lors de son déplacement sur la carte : move ... */
  • draggingCursor:"move",
  • /* On définit la couleur d'arrière plan des tuiles : fushia = #ff00ff ... */
  • backgroundColor:"#ff00ff"
  • };
  • /* ... Création d'une nouvelle carte nommée "maCarte" qui s'affichera à l'intérieur de la balise <div> ayant ... */
  • /* ... pour identifiant id="EmplacementDeMaCarte" et on lui applique les options nommées "optionsDeMaCarte" ... */
  • var maCarte = new GMap2(document.getElementById("EmplacementDeMaCarte"), optionsDeMaCarte);
  • /* ... La carte nommée "maCarte" est centrée sur la Latitude 47.341571, la Longitude 0.514233, avec un niveau de zoom égal à 13 ... */
  • maCarte.setCenter(new GLatLng(47.341571,0.514233), 13);
  • /* ... Affiche les boutons permettant de modifier le type de carte ... */
  • /* ... L'ordre d'affichage des boutons est fixé par l'option mapTypes: ... */
  • maCarte.addControl(new google.maps.MapTypeControl());
  • /* Si le navigateur n'est pas compatible avec l'API de Google Maps ... */
  • }else{
  • /* ... affichage du message "Désolé, mais votre navigateur n'est pas compatible avec Google Maps". */
  • alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
  • }
  • }
  • //]]>
  • </script>
  • </head>
  •  
  • <!-- Une fois la page chargée la fonction initialize() est exécutée. -->
  • <!-- A la fermeture de la page , la fonction GUnload() est exécutée. -->
  • <body onload="initialize()" onunload="GUnload()">
  • <!-- La carte nommée "maCarte", va venir s'afficher à l' intérieur de -->
  • <!-- la balise <div> ayant pour identifiant id="EmplacementDeMaCarte". -->
  • <div id="EmplacementDeMaCarte"></div>
  • <div style="margin:1em 0;padding:1em 0;height:auto;border:1px solid #513a0b;text-align:left;background-color:#e7e3d7;">
  • <ul>
  • <li>La taille de la carte est définie à l'aide de l'option <em>size:</em>
  • <ul>
  • <li><em>size:</em>new GSize(1024,370)</li>
  • </ul>
  • </li>
  • </ul>
  • <ul>
  • <li>Les types de carte sont définis à l'aide de l'option <em>mapTypes:</em>
  • <ul>
  • <li><em>mapTypes:</em>[G_PHYSICAL_MAP,G_HYBRID_MAP,G_NORMAL_MAP,G_SATELLITE_MAP]</li>
  • </ul>
  • </li>
  • </ul>
  • <ul>
  • <li>Le type de curseur affiché lors du survol de la carte est défini à l'aide de l'option <em>draggableCursor:</em>
  • <ul>
  • <li><em>draggableCursor:</em>"crosshair"</li>
  • </ul>
  • </li>
  • </ul>
  • <ul>
  • <li>Le type de curseur affiché lors du déplacement de la carte est défini à l'aide de l'option <em>draggingCursor:</em>
  • <ul>
  • <li><em>draggingCursor:</em>"move"</li>
  • </ul>
  • </li>
  • </ul>
  • <ul>
  • <li>La couleur d'arrière plan de la carte est défini à l'aide de <em>backgroundColor:</em>
  • <ul>
  • <li><em>backgroundColor:</em>"#ff00ff" - <span style="color:#f0f;font-weight: bolder;">couleur fushia</span></li>
  • </ul>
  • </li>
  • </ul>
  • </div></body>
  • </html>

Carte

  • La taille de la carte est définie à l'aide de l'option size:
    • size:new GSize(1024,370)
  • Les types de carte sont définis à l'aide de l'option mapTypes:
    • mapTypes:[G_PHYSICAL_MAP,G_HYBRID_MAP,G_NORMAL_MAP,G_SATELLITE_MAP]
  • Le type de curseur affiché lors du survol de la carte est défini à l'aide de l'option draggableCursor:
    • draggableCursor:"crosshair"
  • Le type de curseur affiché lors du déplacement de la carte est défini à l'aide de l'option draggingCursor:
    • draggingCursor:"move"
  • La couleur d'arrière plan de la carte est défini à l'aide de backgroundColor:
    • backgroundColor:"#ff00ff" - couleur fushia

Remarque(s)

Depuis la version 2.95 de l'API, une nouvelle option a été ajoutée. Il s'agit de googleBarOptions.

Une fois la GoogleBar activée à l'aide de enableGoogleBar(), les options de la "GoogleBar" permettent :

  • de modifier l'emplacement de la liste des résultats,
  • de modifier le target link des liens,
  • d'appeler une fonction chaque fois que la GoogleBar est appelée,
  • d'appeler une fonction lorsque la recherche est terminée et avant que les résultats ne soient affichés sur la carte,
  • d'appeler une fonction quand l'info-bulle, liée à l'un des résultats de recherche, est sur le point d'être ouverte,
  • d'appeler une fonction une fois que tous les marqueurs ont été placés sur la carte,
  • de supprimer l'ouverture de l'info-bulle, associée au premier résultat de la recherche,
  • de supprimer le "déplacer/zoomer" exécuté une fois la recherche terminée,
  • de déployer ou rétracter la GoogleBar sur la carte,
  • de personnaliser le texte figurant dans le champ recherche,
  • de forcer le focus sur le champ de recherche,

Pour plus d'information veuillez consulter cet article :

Api Google Maps - Googlebar - Créer une GoogleBar - disableGoogleBar - enableGoogleBar