Aller au contenu

6. Personnaliser les contrôles#

📆 Date de publication initiale : 24 août 2008

⚠ L'API Google Maps v2 est dépréciée depuis le 19 mai 2010.


Introduction#

logo Google

Il est parfois frustrant lorsqu'on utilise des API de ne pas pouvoir personnaliser complètement les contrôles et les événements. L'API Google Maps permet cette fonctionnalité. Nous verrons ici comment personnaliser ses propres contrôles de zoom, de déplacement et de sélection de couches.

Initialisation#

Reprendre la carte du tutoriel n°1.

Création de la fonction zoom#

La création de ses propres contrôles passe par la déclaration d'une fonction et de la déclaration d'un objet 'prototype' comme une instance de l'objet GControl() :

1
ZoomControl.prototype = new GControl();  

Puis par la création du 'container', des boutons et des événements :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
function ZoomControl() {}  
  ZoomControl.prototype = new GControl();  
  ZoomControl.prototype.initialize = function(map) {  

  var container = document.createElement("div");
  var zoomInDiv = document.createElement("div");  
  this.setButtonStyle_(zoomInDiv);  
  container.appendChild(zoomInDiv);  
  zoomInDiv.appendChild(document.createTextNode("Zoom In"));  
  zoomInDiv.innerHTML = '![](./icons/32x32/1.png)';  
  GEvent.addDomListener(zoomInDiv, "click", function() {  
    map.zoomIn();  
  });
  map.getContainer().appendChild(container);  
  return container;  
}

Positionnement du container#

Il faut ensuite positionner le container par rapport aux bords de la carte :

1
2
3
ZoomControl.prototype.getDefaultPosition = function() {  
  return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(5, 5));  
}

Ajout du contrôle#

Il est maintenant nécessaire d'appeler cette fonction de zoom personnalisée :

1
map.addControl(new ZoomControl());

Paramétrage par défaut de la carte#

La dernière étape est de définir un centre, un niveau de zoom et une couche par défaut à la carte :

1
2
map.setCenter(new GLatLng(43.57691664771851, 1.402451992034912),15);  
map.setMapType(G_SATELLITE_MAP);

Code complet#

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!DOCTYPE html "-//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] 6. Personnaliser les contrôles
    </title>
    <style type="text/css">
      html { overflow:hidden; height:100%; }
      body { height:100%; margin:0; }
      #map { width:100%; height:100%; }
    </style>
    <link rel="icon" type="image/png" href="./favicon.png"/>
    <script src="http://maps.google.com/maps?file=api&v=2.x&key=votre_clé_ici" type="text/javascript"></script>
    <script type="text/javascript">

      function initialize() {
        if (GBrowserIsCompatible()) {
          var map = new GMap2(document.getElementById('map'));

          function ZoomControl() {}
          ZoomControl.prototype = new GControl();
          ZoomControl.prototype.initialize = function(map) {
            var container = document.createElement("div");

            var zoomInDiv = document.createElement("div");
            this.setButtonStyle_(zoomInDiv);
            container.appendChild(zoomInDiv);
            zoomInDiv.appendChild(document.createTextNode("Zoom In"));
            zoomInDiv.innerHTML = '<img src="./icons/32x32/1.png">';
            GEvent.addDomListener(zoomInDiv, "click", function() {
              map.zoomIn();
            });

            var zoomOutDiv = document.createElement("div");
            this.setButtonStyle_(zoomOutDiv);
            container.appendChild(zoomOutDiv);
            zoomOutDiv.innerHTML = '<img src="./icons/32x32/2.png">';
            GEvent.addDomListener(zoomOutDiv, "click", function() {
              map.zoomOut();
            });

            map.getContainer().appendChild(container);
            return container;
          }

          ZoomControl.prototype.getDefaultPosition = function() {
            return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(5, 5));
          }

        ZoomControl.prototype.setButtonStyle_ = function(button) {
          button.style.cursor = "pointer";
        }

        function PanUpControl() {}
        PanUpControl.prototype = new GControl();
        PanUpControl.prototype.initialize = function(map) {
          var container = document.createElement("div");

          var panUp = document.createElement("div");
          this.setButtonStyle_(panUp);
          container.appendChild(panUp);
          panUp.innerHTML = '<img src="./icons/32x32/9.png">';
          GEvent.addDomListener(panUp, "click", function() {
            map.panDirection(0,1);
          });

          map.getContainer().appendChild(container);
          return container;
        }

        PanUpControl.prototype.getDefaultPosition = function() {
          return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(getWindowWidth()/2-16, 0));
        }

        PanUpControl.prototype.setButtonStyle_ = function(button) {
          button.style.cursor = "pointer";
        }

        function PanDownControl() {}
        PanDownControl.prototype = new GControl();
        PanDownControl.prototype.initialize = function(map) {
          var container = document.createElement("div");

          var panDown = document.createElement("div");
          this.setButtonStyle_(panDown);
          container.appendChild(panDown);
          panDown.innerHTML = '<img src="./icons/32x32/10.png">';
          GEvent.addDomListener(panDown, "click", function() {
            map.panDirection(0,-1);
          });

          map.getContainer().appendChild(container);
          return container;
        }

        PanDownControl.prototype.getDefaultPosition = function() {
          return new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(getWindowWidth()/2-16, 0));
        }

        PanDownControl.prototype.setButtonStyle_ = function(button) {
          button.style.cursor = "pointer";
        }

        function PanRightControl() {}
        PanRightControl.prototype = new GControl();
        PanRightControl.prototype.initialize = function(map) {
          var container = document.createElement("div");

          var panRight = document.createElement("div");
          this.setButtonStyle_(panRight);
          container.appendChild(panRight);
          panRight.innerHTML = '<img src="./icons/32x32/7.png">';
          GEvent.addDomListener(panRight, "click", function() {
            map.panDirection(-1,0);
          });

          map.getContainer().appendChild(container);
          return container;
        }

        PanRightControl.prototype.getDefaultPosition = function() {
          return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(0, getWindowHeight()/2-16));
        }

        PanRightControl.prototype.setButtonStyle_ = function(button) {
          button.style.cursor = "pointer";
        }

        function PanLeftControl() {}
        PanLeftControl.prototype = new GControl();
        PanLeftControl.prototype.initialize = function(map) {
          var container = document.createElement("div");

          var panLeft = document.createElement("div");
          this.setButtonStyle_(panLeft);
          container.appendChild(panLeft);
          panLeft.innerHTML = '<img src="./icons/32x32/8.png">';
          GEvent.addDomListener(panLeft, "click", function() {
            map.panDirection(1,0);
          });

          map.getContainer().appendChild(container);
          return container;
        }

        PanLeftControl.prototype.getDefaultPosition = function() {
          return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(0, getWindowHeight()/2-16));
        }

        PanLeftControl.prototype.setButtonStyle_ = function(button) {
          button.style.cursor = "pointer";
        }

        function CustomMapControl() {}
        CustomMapControl.prototype = new GControl();
        CustomMapControl.prototype.initialize = function(map) {
          var container = document.createElement("div");

          var CustomMapPlan = document.createElement("div");
          this.setButtonStyle_(CustomMapPlan);
          container.appendChild(CustomMapPlan);
          CustomMapPlan.innerHTML = '<img src="./buttons/plan_orange_75.png">';
          GEvent.addDomListener(CustomMapPlan, "click", function() {
            map.setMapType(G_NORMAL_MAP);
          });

          var CustomMapSatellite = document.createElement("div");
          this.setButtonStyle_(CustomMapSatellite);
          container.appendChild(CustomMapSatellite);
          CustomMapSatellite.innerHTML = '<img src="./buttons/satellite_orange_75.png">';
          GEvent.addDomListener(CustomMapSatellite, "click", function() {
            map.setMapType(G_SATELLITE_MAP);
          });

          var CustomMapRelief = document.createElement("div");
          this.setButtonStyle_(CustomMapRelief);
          container.appendChild(CustomMapRelief);
          CustomMapRelief.innerHTML = '<img src="./buttons/relief_orange_75.png">';
          GEvent.addDomListener(CustomMapRelief, "click", function() {
            map.setMapType(G_PHYSICAL_MAP);
          });

          map.getContainer().appendChild(container);
          return container;
        }

        CustomMapControl.prototype.getDefaultPosition = function() {
          return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(15, 15));
        }

        CustomMapControl.prototype.setButtonStyle_ = function(button) {
          button.style.marginBottom = "8px";
          button.style.cursor = "pointer";
        }

        function LogoControl() {}
        LogoControl.prototype = new GControl();
        LogoControl.prototype.initialize = function(map) {
          var container = document.createElement("div");

          var Logo = document.createElement("div");
          container.appendChild(Logo);
          Logo.innerHTML = '<img src="./logos/logo_geotribu.png">';

          map.getContainer().appendChild(container);
          return container;
        }

        LogoControl.prototype.getDefaultPosition = function() {
          return new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(getWindowWidth()/7, 0));
        }

        map.addControl(new ZoomControl());
        map.addControl(new PanUpControl());
        map.addControl(new PanDownControl());
        map.addControl(new PanRightControl());
        map.addControl(new PanLeftControl());
        map.addControl(new CustomMapControl());
        map.addControl(new LogoControl());
        map.setCenter(new GLatLng(43.57691664771851, 1.402451992034912),15);
        map.enableScrollWheelZoom();
        map.enableContinuousZoom();
        map.setMapType(G_SATELLITE_MAP);
      }
      else{
        alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps');
      }
    }
    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map"></div>
 </body>
</html>

Démonstration#

Info

Le serveur hébergeant la démonstration n'étant plus disponible depuis de nombreuses années, la démonstration, autre fois intégrée en iFrame est désactivée.
<iframe src="http://88.191.39.115/fabien/geotribu/%5bgeotribu%5d_Google-Maps_tuto6.html" height="350px" width="100%"></iframe>

Résultat pleine page

Remarques#

Je n'ai décrit ici que la personnalisation de la fonction de zoom, les fonctions de déplacement fonctionnent exactement sous le même mécanisme. Pour bien appréhender l'objet GControl(), il est nécessaire de se référer à l'API Google Maps - http://code.google.com/apis/maps/documentation/reference.html#GControlImpl - et aux articles Google Maps officiels - http://code.google.com/apis/maps/documentation/controls.html#Custom_Controls. Les constantes G_ANCHOR_x_y correspondent aux coins de la carte.

Conclusion#

Ce tutoriel décrit les étapes pour ajouter des contrôles à la carte. La réutilisation de ce code nécessite de bonnes notions d'algorithmique et de Javascript. Il est nécessaire de se plonger en détail dans l'API pour comprendre tous les mécanismes mis en jeu.


Auteur#

Fabien Goblet#

portrait

Informaticien et géographe de formation, je suis j'étais indépendant en base de données, webmapping, j'aide à la modélisation et à la définition du besoin client, je développe j'encadre le développement des interfaces d'administration et des carto-web, je conçois des api géographiques pour les administrations, les ONG, les labos de recherche. Je suis maintenant responsable de l'innovation chez Sogefi. Toujours des cartes et des données qui ont besoin de communiquer. Nous avons une spécialité dans les données foncières et de leur représentation à destination des administrations.

J'aime comprendre les données et en faire quelquechose ; du coup je fais pas mal de veille techno sur tout ce qui touche aux technologies web de dataviz - carto ou non.

J'ai une préférence pour les technologies libres. Tout ce qui touche aux interactions hommes-machines avec des technos comme Kinect, Arduino, Raspberry, les imprimantes 3d ou les machines de découpe laser, les caméras 360° me passionne. Et j'essaie de les utiliser dans le cadre du travail.


Contributions à cette page : Julien Moura (15.71%), Florian Boret (84.29%)

Ce contenu est sous licence Creative Commons BY-NC-SA 4.0 International Pictogramme Creative Commons Pictogramme Creative Commons BY Pictogramme Creative Commons NC Pictogramme Creative Commons SA


Commentaires

Une version minimale de la syntaxe markdown est acceptée pour la mise en forme des commentaires.
Propulsé par Isso.