Api Google Maps flèche Controle flèche Créer une interface utilisateur identique à celle de Google Maps grâce à setUIToDefault.

COMMENT CRÉER UNE INTERFACE UTILISATEUR IDENTIQUE
A CELLE DE GOOGLE MAPS EN UTILISANT setUIToDefault

Article créé le : 07/03/2009
 

Présentation

Depuis la version 2.147 de l'API Google Maps, vous pouvez obtenir facilement, grâce à une simple ligne de code, une interface utilisateur identique à celle utilisée dans Google Maps.

Ainsi :

  • l'aspect des contrôles,
  • l'emplacement des contrôles,
  • les types des contrôles,
  • les contrôles souris et clavier.

seront strictement identiques à ceux que vous trouvez sur http://maps.google.fr

Autre avantage, et non des moindres, si, dans le futur, l'interface utilisateur de maps.google.fr change, ces modifications seront également appliquées aux cartes hébergées dans votre site, sans qu'aucune modification au niveau de votre code soit nécessaire.

Pour appliquer cette nouvelle fonctionnalité à votre carte, il vous suffit, après avoir créé votre carte, d'utiliser setUIToDefault() en respectant la régle d'écriture suivante :

Exemple :


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

  maCarte.setCenter(new google.maps.LatLng(47.341571, 0.514233), 13);

  maCarte.setUIToDefault();

Ou si vous utilisez Google AJAX API loader :

Exemple :


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

  maCarte.setCenter(new google.maps.LatLng(47.341571, 0.514233), 13);

  maCarte.setUIToDefault();

Dernier point important, setUIToDefault ajuste automatiquement les contrôles en fonction de la taille de la carte.

Deux cas peuvent se présenter :

  • la taille de votre carte est supérieure ou égale à 400 x 300 pixels,
  • votre carte à une largeur inférieure à 400 pixels ou une hauteur inférieure à 300 pixels.

Carte dont la taille est supérieure ou égale à 400 x 300 pixels

Ainsi, pour une carte dont la taille est supérieure ou égale à 400 x 300 pixels, les contrôles affichés par défaut sont :

Dans ce cas de figure le code :


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

  maCarte.setCenter(new google.maps.LatLng(47.341571, 0.514233), 13);

  maCarte.setUIToDefault();

est équivalent au code suivant :


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

  maCarte.setCenter(new google.maps.LatLng(47.341571, 0.514233), 13);

  maCarte.addControl(new GLargeMapControl3D());

  maCarte.addControl(new GMapTypeControl());

  maCarte.addControl(new GScaleControl());

Carte dont la largeur est inférieure à 400 pixels ou la hauteur inférieure à 300 pixels

Pour des cartes dont la largeur est inférieure à 400 pixels ou la hauteur inférieure à 300 pixels, les contrôles affichés par défaut sont :

Dans ce cas de figure le code :


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

  maCarte.setCenter(new google.maps.LatLng(47.341571, 0.514233), 13);

  maCarte.setUIToDefault();

est équivalent au code suivant :


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

  maCarte.setCenter(new google.maps.LatLng(47.341571, 0.514233), 13);

  maCarte.addControl(new GSmallZoomControl3D());

  maCarte.addControl(new GMenuMapTypeControl());

Enfin, quelque soit la taille de la carte :

  • le zoom par double click est activé,
  • le zoom à l'aide de la molette de votre souris est activé,
  • le déplacement de la carte à l'aide des touches clavier est activé, à condition d'avoir cliqué sur celle-ci auparavant.

Code

Dans le code ci-dessous amusez-vous à changer uniquement la taille de la carte afin d'observer les modifications sur les différents contrôles.

Exemple :

Modifiez la ligne ou par :


  <div id="EmplacementDeMaCarte" style="width: 300px; height: 200px"></div>

Code : setUIToDefault() 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 setUIToDefault()</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()) {
  • /* ... 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"));
  • /* ... La carte nommée "maCarte" est centrée sur la Latitude 47.389982, la Longitude 0.68922, avec un niveau de zoom égal à 13 ... */
  • maCarte.setCenter(new google.maps.LatLng(47.389982,0.68922), 13);
  • /* ... Affichage des éléments standards de l'interface utilisateur que vous pouvez voir sur Google Maps maps.google.fr ... */
  • maCarte.setUIToDefault();
  • /* 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". -->
  • <!-- Elle fera donc 100% de large et 400 pixels de haut. -->
  • <div id="EmplacementDeMaCarte" style="width: 100%; height: 400px"></div>
  • <!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
  • <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 n'est 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>

Code : setUIToDefault() 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 setUIToDefault()</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()) {
  • /* ... 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 GMap2(document.getElementById("EmplacementDeMaCarte"));
  • /* ... La carte nommée "maCarte" est centrée sur la Latitude 47.389982, la Longitude 0.68922, avec un niveau de zoom égal à 13 ... */
  • maCarte.setCenter(new google.maps.LatLng(47.389982,0.68922), 13);
  • /* ... Affichage des éléments standards de l'interface utilisateur que vous pouvez voir sur Google Maps maps.google.fr ... */
  • maCarte.setUIToDefault();
  • /* 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". -->
  • <!-- Elle fera donc 100% de large et 400 pixels de haut. -->
  • <div id="EmplacementDeMaCarte" style="width: 100%; height: 400px"></div>
  • <!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
  • <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 n'est 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>

Personnaliser l'interface utilisateur (UI)

Il est tout à fait possible de modifier l'interface utilisateur (UI) par défaut, afin de l'adapter à vos besoins.

Exemple :

Si vous souhaitez utiliser l'interface utilisateur par défaut de maps.google.fr, et la personnaliser afin :

  • d'empêcher le zoom via la roulette d'une souris (zoom.scrollwheel),
  • supprimer le type Mixte des types de cartes possibles (maptypes.hybrid),
  • supprimer l'échelle (controls.scalecontrol).
  • supprimer la possibilité de déplacer la carte à l'aide des touches claviers (keyboard).

il vous faudra utiliser le code suivant :


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

  maCarte.setCenter(new google.maps.LatLng(47.341571, 0.514233), 13);

  var uiOptions = maCarte.getDefaultUI();

  uiOptions.zoom.scrollwheel = false;

  uiOptions.maptypes.hybrid = false;

  uiOptions.controls.scalecontrol = false;

  uiOptions.keyboard = false;

  maCarte.setUI(uiOptions);

Le tableau ci-dessous récapitule l'ensemble des propriétés de GMapUIOptions.

Propriété Type Description
maptypes.normal Booléen Lorsqu'elle a pour valeur true, cette propriété indique que le type de carte Plan (G_NORMAL_MAP) est ajouté à la carte. true par défaut. (Depuis 2.147)
maptypes.satellite Booléen Lorsqu'elle a pour valeur true, cette propriété indique que le type de carte Satelitte (G_SATELLITE_MAP) est ajouté à la carte. true par défaut. (Depuis 2.147)
maptypes.hybrid Booléen Lorsqu'elle a pour valeur true, cette propriété indique que le type de carte Mixte (G_HYBRID_MAP) est ajouté à la carte. true par défaut. (Depuis 2.147)
maptypes.physical Booléen Lorsqu'elle a pour valeur true, cette propriété indique que le type de carte Relief (G_PHYSICAL_MAP) est ajouté à la carte. true par défaut. (Depuis 2.147)
zoom.scrollwheel Booléen Lorsqu'elle a pour valeur true, cette propriété indique que le zoom à l'aide de la roulette de votre souris est activé. true par défaut. (Depuis 2.147)
zoom.doubleclick Booléen Lorsqu'elle a pour valeur true, cette propriété indique que le zoom par double-clicks est activé. true par défaut. (Depuis 2.147)
keyboard Booléen Lorsqu'elle a pour valeur true, cette propriété indique que GKeyboardHandler est activé pour la carte. true par défaut. (Depuis 2.147)
controls.largemapcontrol3d Booléen Lorsqu'elle a pour valeur true, cette propriété indique qu'un contrôle GLargeMapControl3D est ajouté à la carte. true par défaut pour "une grande carte". (Depuis 2.147)
controls.smallzoomcontrol3d Booléen Lorsqu'elle a pour valeur true, cette propriété indique qu'un contrôle GSmallZoomControl3D est ajouté à la carte. true par défaut pour "une petite carte". (Depuis 2.147)
controls.maptypecontrol Booléen Lorsqu'elle a pour valeur true, cette propriété indique qu'un contrôle GMapTypeControl est ajouté à la carte. true par défaut pour "une grande carte". (Depuis 2.147)
controls.menumaptypecontrol Booléen Lorsqu'elle a pour valeur true, cette propriété indique qu'un contrôle GMenuMapTypeControl est ajouté à la carte. true par défaut pour "une petite carte". (Depuis 2.147)
controls.scalecontrol Booléen Lorsqu'elle a pour valeur true, cette propriété indique qu'un contrôle GScaleControl est ajouté à la carte. true par défaut pour "une petite carte". (Depuis 2.147)

Précisions :

  • Un Booléen peut prendre soit la valeur true soit la valeur false.
  • "une petite carte" : Carte dont la largeur est inférieure à 400 pixels ou dont la hauteur est inférieure à 300 pixels.
  • "une grande carte" : Carte dont la taille est supérieure ou égale à 400 x 300 pixels.

Carte

Code

Code : 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 setUIToDefault()</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()) {
  • /* ... 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"));
  • /* ... La carte nommée "maCarte" est centrée sur la Latitude 47.389982, la Longitude 0.68922, avec un niveau de zoom égal à 13 ... */
  • maCarte.setCenter(new google.maps.LatLng(47.389982,0.68922), 13);
  • /* ... Affichage des éléments standards de l'interface utilisateur que vous pouvez voir sur Google Maps maps.google.fr ... */
  • var uiOptions = maCarte.getDefaultUI();
  • /* ... ...*/
  • uiOptions.zoom.scrollwheel = false;
  • /* ... ...*/
  • uiOptions.maptypes.hybrid = false;
  • /* ... ...*/
  • uiOptions.controls.scalecontrol = false;
  • /* ... ...*/
  • uiOptions.keyboard = false;
  • /* ... ...*/
  • maCarte.setUI(uiOptions);
  • /* 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". -->
  • <!-- Elle fera donc 100% de large et 400 pixels de haut. -->
  • <div id="EmplacementDeMaCarte" style="width: 100%; height: 400px"></div>
  • <!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
  • <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 n'est 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>

Code : 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 setUIToDefault()</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()) {
  • /* ... 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 GMap2(document.getElementById("EmplacementDeMaCarte"));
  • /* ... La carte nommée "maCarte" est centrée sur la Latitude 47.389982, la Longitude 0.68922, avec un niveau de zoom égal à 13 ... */
  • maCarte.setCenter(new google.maps.LatLng(47.389982,0.68922), 13);
  • /* ... Affichage des éléments standards de l'interface utilisateur que vous pouvez voir sur Google Maps maps.google.fr ... */
  • var uiOptions = maCarte.getDefaultUI();
  • /* ... ...*/
  • uiOptions.zoom.scrollwheel = false;
  • /* ... ...*/
  • uiOptions.maptypes.hybrid = false;
  • /* ... ...*/
  • uiOptions.controls.scalecontrol = false;
  • /* ... ...*/
  • uiOptions.keyboard = false;
  • /* ... ...*/
  • maCarte.setUI(uiOptions);
  • /* 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". -->
  • <!-- Elle fera donc 100% de large et 400 pixels de haut. -->
  • <div id="EmplacementDeMaCarte" style="width: 100%; height: 400px"></div>
  • <!-- Si JavaScript n'est pas activé sur votre navigateur, le message d'alerte situé entre les balises <noscript></noscript> s'affichera -->
  • <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 n'est 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>