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.
Les cartes Google Maps disposent de boutons, appelés contrôles, permettant à l'utilisateur d'interagir avec la carte. Ces contrôles peuvent être ajoutés, supprimés, déplacés et personnalisés à l'aide de GControl. L'API Google Maps version 2 propose plusieurs types de contrôles que vous pouvez facilement intégrer dans votre carte : GLargeMapControl3D, GLargeMapControl, GSmallMapControl, GSmallZoomControl3D, GSmallZoomControl, GScaleControl, GMapTypeControl, GHierarchicalMapTypeControl, GOverviewMapControl, GNavLabelControl.
Pour afficher des contrôles identiques à http://maps.google.fr il est conseillé d'utiliser setUIToDefault().
| Api Google Maps - Contrôle - Insertion d'un menu transparent et déplaçable dans une carte Google Maps | |
|
A l'aide de GDraggableObject et de l'option container, nous allons construire un menu semi-transparent inséré dans la carte, pouvant être déplacé, affiché ou masqué, et repositionné sur son emplacement initial. |
| Api Google Maps - Contrôle - Ajouter un bouton Earth à une carte Google Maps - type G_SATELLITE_3D_MAP - Plug in Google Earth | |
|
Le plug-in Google Earth vous permet d'insérer une carte Google Earth dans vos pages web. Voici, à l'aide d'une simple ligne de code, comment ajouter le type de carte "Google Earth" à votre carte créée à l'aide de l'"API Google Maps". |
| Api Google Maps - Contrôle - Créer un bouton GNavLabelControl - Affiche l'adresse de la vue actuelle de la carte- Emplacement par défaut - Emplacement personnalisé | |
|
Créez et personnalisez un bouton GNavLabelControl permettant d'afficher, sous forme de liens, l'adresse correspondant à la vue actuelle de la carte. En fonction du niveau de zoom de la carte, l'adresse affichée comportera les informations suivantes :
|
| Api Google Maps - Contrôle - Créer un bouton GOverviewMapControl - Mini-carte - Personnaliser la taille le type - Liens Afficher Masquer | |
|
Créez insérez et personnalisez une mini-carte dans votre carte principale à l'aide de GOverviewMapControl. Apprenez également à modifier sa taille, paramétrer son type et à insérer des liens Afficher et Masquer la mini-carte. Cette mini-carte permet de géolocaliser la carte principale. |
| Api Google Maps - Contrôle - Créer un bouton GOverviewMapControl - Mini-carte Non déployée initialement | |
|
Créez et insérez une mini-carte dans votre carte principale à l'aide de GOverviewMapControl. Dans cet exemple la mini-carte est non déployée initialement Cette mini-carte permet de géolocaliser la carte principale. |
| Api Google Maps - Contrôle - Créer un bouton GOverviewMapControl - Mini-carte - Par défaut | |
|
Créez et insérez une mini-carte dans votre carte principale à l'aide de GOverviewMapControl. Cette mini-carte permet de géolocaliser la carte principale. |
| Api Google Maps - Contrôle - Créer une interface utilisateur identique à celle de Google Maps grâce à setUIToDefault | |
|
créez simplement, grâce à une seule ligne de code, une interface utilisateur identique à celle de Google Maps grâce à setUIToDefault. |
| Api Google Maps - Contrôle - Créer un bouton GSmallZoomControl3D - Zoom de la carte petit format - Emplacement par défaut - Emplacement personnalisé | |
|
Créez et personnalisez un bouton GSmallZoomControl3D (Zoom 3D petit format) identique à celui utilisé aujourd'hui par Google Maps. |
| Api Google Maps - Contrôle - Créer un bouton GLargeMapControl3D - Déplacement et zoom de la carte grand format - Emplacement par défaut - Emplacement personnalisé | |
|
Créez et personnalisez un bouton GLargeMapControl3D (Déplacement et Zoom grand format 3D) identique à celui utilisé aujourd'hui par Google Maps. |
| Api Google Maps - Contrôle - Créer un bouton GSmallMapControl - Déplacement et zoom de la carte petit format - Emplacement par défaut ou personnalisé | |
|
Voici comment insérer et modifier l'emplacement d'un mini bouton permettant de zoomer et de déplacer( GSmallMapControl ) une carte. |
| Api Google Maps - Contrôle - Créer un bouton GSmallZoomControl - Zoom de la carte petit format - Emplacement par défaut ou personnalisé | |
|
Voici comment insérer et modifier l'emplacement d'un mini bouton permettant d'effectuer un zoom ( GSmallZoomControl ) sur la carte. |
| Api Google Maps - Contrôle - Créer un bouton GScaleControl - Échelle de la carte - Emplacement par défaut ou personnalisé | |
|
Voici comment insérer et modifier l'emplacement d'un contrôle permettant d'afficher une échelle ( GScaleControl ) sur une carte. |
| Api Google Maps - Contrôle - Créer un bouton DragZoom (par défaut)- Sélectionner une zone à zoomer avec votre souris | |
|
Le bouton DragZoom vous permet de sélectionner, à l'aide votre souris, la zone sur votre carte, que vous souhaitez zoomer. Cet exemple utilise les paramètres par défaut de DragZoom. |
| Api Google Maps - Contrôle - Créer un bouton DragZoom personnalisé - Sélectionner une zone à zoomer avec votre souris | |
|
Le bouton DragZoom vous permet de sélectionner, à l'aide votre souris, la zone sur votre carte, que vous souhaitez zoomer. Cet exemple utilise les options de DragZoom afin de personnaliser votre contrôle. |
| Api Google Maps - Contrôle - Créer un bouton ExtLargeMapControl - Déplacement et zoom de la carte grand format - Emplacement par défaut ou personnalisé | |
|
Vous rêviez d'insérer dans votre carte un bouton identique à celui que l'on trouve désormais sur les cartes de Google Maps ? Désormais, cela est possible grâce au script ExtLargeMapControl. Apprenez à l'utiliser et à le configurer, grâce aux différentes options présentées dans ce tuto. |
| Api Google Maps - Contrôle - Créer une liste de marqueurs à partir des données contenues dans un fichier .xml | |
|
Créez une liste de marqueurs à partir des données contenues dans un fichier .xml. Tout click sur le marqueur ou sur un lien de la liste déclenche l'ouverture de l'info-bulle correspondante. |
| Api Google Maps - Contrôle - Case à cocher - Sélection des Marqueurs - Listes thématiques - Données extraites d'un fichier XML | |
|
Affichez vos marqueurs grâce à des cases à cocher. Les listes de marqueurs sont affichées par thèmes. Les données nécessaires à l'affichage des marqueurs sont extraites d'un fichier .xml. |
| Api Google Maps - Contrôle - Créer un bouton GMapTypeControl - Sélection du type de carte à l'aide de boutons - Emplacement par défaut ou personnalisé | |
|
Voici comment insérer et modifier l'emplacement de boutons, permettant de modifier le type de carte affiché( GMapTypeControl ). |
| Api Google Maps - Contrôle - Créer un bouton GMenuMapTypeControl - Sélection du type de carte à l'aide d'un menu déroulant - Emplacement par défaut ou personnalisé | |
|
Créez et personnalisez un bouton GMenuMapTypeControl (Menu déroulant pour modifier le type de carte). |
| Api Google Maps - Contrôle - Créer un bouton GLargeMapControl - Déplacement et zoom de la carte grand format - Emplacement par défaut - Emplacement personnalisé | |
|
Créez et personnalisez un bouton GLargeMapControl (Déplacement et Zoom grand format). |
| Api Google Maps - Contrôle - Case à cocher - Sélection des Marqueurs - Données extraites d'un fichier XML | |
|
Sélectionnez vos marqueurs à l'aide de cases à cocher. Les données nécessaires à l'affichage des marqueurs sont extraites d'un fichier .xml. |
| Api Google Maps - Contrôle - Bouton radio - Sélection des Marqueurs - Données extraites d'un fichier XML | |
|
Sélectionnez vos marqueurs à l'aide de boutons radio. Les données nécessaires à l'affichage des marqueurs sont extraites d'un fichier .xml. |
| Api Google Maps - Contrôle - Récupérer les paramètres de la carte : getSize getZoom getCenter getBounds - Taille Zoom Centre Visibilité | |
|
Connaître à tout instant la taille, le niveau de zoom, les coordonnées du centre, et la visibilité d'une carte à l'aide de : getSize getZoom getCenter getBounds |
