Afficher la scalebar dans une <div>

Version imprimable

16/05/2013, 09h52
toinehxc

Afficher la scalebar dans une <div>

Bonjour à tous.
Je suis en train de travailler sur une appli google map en v3 pour ma structure, et je viens vers vous pour un petit problème.

L'appli permet de faire des cartes avec, fond de carte google map, kml pour des contour, xml pour des markers.

Du côté html j'ai des div mobile en absolute permettant d'afficher logo, fleche nord et titre où l'on veut sur la carte.

J'aurai voulu savoir s'il était possible d'afficher la scalebar de l'API google map dans une <div> afin de la rendre mobile pour l'utilisateur ?

Car dans scaleControlOptions: position, j'ai juste trouvé les positions prédéfinies (top, bottom, left...)

Edit: Ou alors dans le pire des cas est-il possible, via un checkbox d'afficher ou non cette barre d'échelle ?

En vous remerciant d'avance.

Pour étoffer mon post, voici un exemple de carte sur lequel je fais mes test:

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
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
 
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
		<meta charset="UTF-8" />
		<title>Titre de votre page</title>
		<style type="text/css">
			html {
				height: 100%
			}
			body {
				height: 80%;
				margin: 0;
				padding: 0
			}
			#EmplacementDeMaCarte {
				height: 100%
			}
			#menu{
				width: 120px;
				bottom: 10%; 
				left: 5px;
				position : absolute;
				border:1px solid black;
			}
		</style>
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript">
		var testscale;
		var map;
 
		//fonction qui ne fonctionne pas pour afficher l'échelle:
			function afficheechelle(){
				if (document.getElementById("echelle").checked==true) {
				   var testscale=true;
				} else {
				   var testscale=false;
				}
			}
 
		//fonction d'initialisation
			function initialisation(){
				var centreCarte = new google.maps.LatLng(47.389982, 0.688877);
 
				var optionsCarte = {
					zoom: 8,
					center: centreCarte,
					mapTypeId: google.maps.MapTypeId.ROADMAP,
					scaleControl: testscale,
					scaleControlOptions: {
					position: google.maps.ControlPosition.RIGHT_BOTTOM,
					style: google.maps.ScaleControlStyle.DEFAULT
 
 
					}
				}
		//création de la carte en fonction des options, et dans la dic EmplacementDeMaCarte
				var map = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
			}
		</script>
	</head>
 
	<body onload="initialisation()">
 
		<!-- emplacement de la carte définie plus haut -->
		<div id="EmplacementDeMaCarte"></div>
 
		<!-- checkbox permettant d'afficher ou non l'échelle -->
		<div id="menu">Echelle: </td><td><input type="checkbox" id="echelle" onclick="afficheechelle();"/></div>
 
		<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 ne soit 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>

16/05/2013, 18h59
NoSmoking
Bonjour,
tu peux faire simplement
Code:

1 2 3 function afficheechelle( obj){ map.setOptions({'scaleControl' : obj.checked}); }
avec un appel

Code:

<input type="checkbox" id="echelle" onclick="afficheechelle(this);"/>

Attention: avec ce type de code il te faut mettre ta variable map en globale.

Encore un point, le chargement de l'API ce fait à cette adresse, <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
17/05/2013, 08h51
toinehxc

Merci ça marche impec!

Me manque plus que la possibilité de la rendre non-fixe pour l'utilisateur, ou le arriver à la faire apparaitre dans une div, mais j'ai trouvé aucune info à ce sujet, du coup, je doute que cela soit possible.

Citation:

Me manque plus que la possibilité de la rendre non-fixe pour l'utilisateur,

tu peux également jouer sur la position du scaleControl

Code:

1
2
3
4
5
6
map.setOptions({
  'scaleControl' : obj.checked,
  'scaleControlOptions': {
      'position': google.maps.ControlPosition.TOP_RIGHT  // par exemple
    }
});

L'image de l'échelle est réalisée à partir d'une image "sprite" et n'existe donc pas en temps que telle, par contre tu as la possibilité de la créer toi même.

exemple de code généré par l'API

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
<div style="-moz-user-select: none; width: 95px; height: 26px; color: rgb(0, 0, 0); font-family: Arial,sans-serif; font-size: 11px; margin-bottom: 3px; position: absolute; left: 69px; bottom: 0px;">
  <div style="width: 4px; height: 26px; overflow: hidden; position: absolute; left: 0px; top: 0px;">
    <img style="position: absolute; left: 0px; top: -398px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 59px; height: 492px;" src="http://maps.gstatic.com/mapfiles/mapcontrols3d6.png" draggable="false">
  </div>
  <div style="width: 91px; height: 4px; overflow: hidden; position: absolute; left: 3px; top: 11px;">
    <img style="position: absolute; left: 0px; top: -424px; width: 91px; height: 492px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="http://maps.gstatic.com/mapfiles/mapcontrols3d6.png" draggable="false">
  </div>
  <div style="position: absolute; left: 0px; top: 11px; width: 1px; height: 4px; overflow: hidden;">
    <img style="position: absolute; left: 0px; top: -398px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 59px; height: 492px;" src="http://maps.gstatic.com/mapfiles/mapcontrols3d6.png" draggable="false">
  </div>
  <div style="position: absolute; left: 0px; top: 11px; width: 1px; height: 4px; overflow: hidden; right: 0px;" class="gmnoprint">
    <img style="position: absolute; left: 0px; top: -398px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 59px; height: 492px;" src="http://maps.gstatic.com/mapfiles/mapcontrols3d6.png" draggable="false">
  </div>
  <div style="width: 4px; height: 12px; overflow: hidden; position: absolute; left: 91px; top: 0px;">
    <img style="position: absolute; left: -4px; top: -398px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 59px; height: 492px;" src="http://maps.gstatic.com/mapfiles/mapcontrols3d6.png" draggable="false">
  </div>
  <div style="width: 4px; height: 12px; overflow: hidden; position: absolute; left: 74px; top: 14px;">
    <img style="position: absolute; left: -8px; top: -398px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; width: 59px; height: 492px;" src="http://maps.gstatic.com/mapfiles/mapcontrols3d6.png" draggable="false">
  </div>
  <div style="position: absolute; left: 8px; bottom: 15px; direction: ltr;">
    20 km
  </div>
  <div style="position: absolute; left: 8px; top: 15px; direction: ltr;">
    10 mi
  </div>
</div>

21/05/2013, 09h28
toinehxc

Tiens, ça c'est intéressant.
Mais du coup me faudrait faire un test en fonction du zoom utilisé pour réécrire le 20km/10mi ?

Je garde l'idée, car je ne savais pas que c'était possible, mais j'ai trouvé une place pour mon échelle qui convenait à toute mes "mises en page", ça évitera que l'utilisateur mette l'échelle en plein milieu de sa carte pour l'impression.

Encore merci pour ton aide.