Api Google Maps - Carte - Utilisation de la classe GMap2

La classe GMap2 - google.maps.Map2

Attention :

L'API Google Maps Javascript Version 2 a été officiellement déclarée obsolète le 19 mai 2010 par Google. Elle continuera, cependant, à fonctionner durant encore trois ans, à compter de cette date, conformément à la politique de dépréciation de Google.

TouraineVerte.com ne diffusera plus de d'exemples ni de tutoriels sur cette version de l'API.

L'API Google Maps Javascript Version 3 est désormais la version officielle.

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
Ciel	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=Inserez_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=Inserez_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

Navigation

Forum d'aide

Forum d'aide Google Maps

Traduction - Translate

Géo Web Actu

La modernisation de la défense

Evolutions et Bugs

Groupe d'Aide Blog Anglais

Référence en Français

La classe " Essentielle "

GMap2

Les classes de " Base "

Les classes " Événement "

Les classes " Contrôle "

Les classes " Couche "

Les classes " Service "

API Google Maps - API Google Earth - Fichiers KML KMZ - Aide Didacticiel Documentation Exemple Tutoriels Trucs et Astuces en Français sur TouraineVerte.com
Formation et tutoriels sur les cartes API Google Maps | Formation et tutoriels sur les cartes API Google Earth | Formation et tutoriels sur les Fichiers KML KMZ
Développeur freelance auto-entrepreneur carte Google Maps Earth API | http://www.TouraineVerte.com | © 2010 - Plan du site | fadamaps37@touraineverte.com

Api Google Maps Version 2CarteLa classe GMap2 - google.maps.Map2

La classe GMap2 - google.maps.Map2

Présentation

Le contenant

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

Type de carte : mapTypes

Type de curseur : draggableCursor - draggingCursor

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

Code

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

Code : GMap2 Sans Google Ajax API Loader

Carte

Remarque(s)

Navigation

Forum d'aide

Traduction - Translate

Géo Web Actu

Evolutions et Bugs

Groupe d'Aide Blog Anglais

Référence en Français

La classe " Essentielle "

Les classes de " Base "

Les classes " Événement "

Les classes " Contrôle "

Les classes " Couche "

Les classes " Service "

Api Google Maps Version 2
Carte
La classe GMap2 - google.maps.Map2