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 :
avec les styles suivant :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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)); }
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...
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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); }
Je voudrais donc savoir comment faire pour que le plan prenne tout la place de l'écran...
Merci d'avance !
Partager