[API GoogleMap] Bouton plein ecran

Bonjour !
J'utilise dans ma page l'api de google map et j'aimerai rajouter un bouton, comme le bouton de vue satellite par exemple, qui permettant de mettre le plan en plein écran dans ma page.

Pour cela, j'ai créé un GControl :

Code:

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
function FullScreenControl(carte) {
   // On stocke la className de defaut du div contenant la carte
   classNameDefautCarte = carte.className;
}
FullScreenControl.prototype = new GControl();
 
// Création du bouton :
FullScreenControl.prototype.initialize = function(map) {
   var fullScreenDiv = document.createElement("div");
   fullScreenDiv.id = "fullScreenDiv";
   fullScreenDiv.className = "boutonCarte";
   fullScreenDiv.title = 'Mettre en plein écran';
   var ssDiv = document.createElement("div");
   ssDiv.appendChild(document.createTextNode("Plein écran"));
   fullScreenDiv.appendChild(ssDiv);
   GEvent.addDomListener(fullScreenDiv, "click", function () {
         var fullScreenDiv = document.getElementById('fullScreenDiv');
         var carteDiv = document.getElementById('carte');
         if (fullScreenDiv.className == "boutonCarte") {
            fullScreenDiv.className += ' boutonCarteEnfonce';
            // On affecte au div contenant la carte la classe lui permettant
            // de prendre tout la place de l'écran
            carteDiv.className = 'cartePleinEcran';
         }
         else {
            fullScreenDiv.className = "boutonCarte";
            // On remet la classe de defaut du div => retour à la position d'origine
            carteDiv.className = classNameDefautCarte;
         }
      }
   );
   map.getContainer().appendChild(fullScreenDiv);
   return fullScreenDiv;
}
 
// Position par défaut du control
FullScreenControl.prototype.getDefaultPosition = function() {
   return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(80, 7));
}

avec les styles suivant :

Code:

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
 
/* style d'origine du div contenant la carte */
.carte {
	height: 400px;
	width: 400px;
	margin: 0px;
	border: 1px solid #979797;
}
/* style de mise en plein écran du div */
.cartePleinEcran {
	height: 100%;
	width: 100%;
	border: 1px solid #979797;
	position: absolute;
	top: 0px;
	left: 0px;
}
/* styles du bouton permettant de mettre en plein écran */
.boutonCarte {
	color: black;
	font-family: Arial,sans-serif;
	font-size: small;
	width: 80px;
	height: 17px;
	border: 1px solid black;
	background-color: white;
	text-align: center;
	cursor: pointer;
}
.boutonCarte div {
	border-style: solid;
	border-color: white rgb(176, 176, 176) rgb(176, 176, 176) white;
	border-width: 1px;
	font-size: 12px;
}
.boutonCarteEnfonce div {
	font-weight: bold;
	border-color: rgb(176, 176, 176) white white rgb(176, 176, 176);
}

Le problème, c'est que quand je clique sur le bouton, ça fait n'importe quoi... les controles restent à leur place d'origine, les images du plan disparaissent, etc. Bref ça marche pas quoi...
Je voudrais donc savoir comment faire pour que le plan prenne tout la place de l'écran...

Merci d'avance !