Discussion :

[nicoc71]

Bonjour,

J'ai un petit problème avec les fonctions de ma carte Google Maps, j'ai besoin de votre aide !!!

Tout d'abord, mon projet est de créer un site visant à afficher différentes régions viticole de France.

J'ai 2 petits problèmes :
- l'infobulle s'affiche, cependant le texte est blanc, donc invisible (à moins de le sélectionner...)
- j'aimerais paramétrer une action, au passage de la souris sur une zone, il faudrait que la zone change de couleur (ou devienne plus foncée) et que l'infobulle s'affiche.

bonus : si on peut faire en sorte que l'infobulle s'affiche tout le temps au même endroit, pas juste au dessus de la zone comme traditionnellement...

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
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
function initialize() {
 
var styles = [
	{"featureType": "landscape",
		"stylers": [
			{"hue": "#C8FF00"},
			{"saturation": 58.80000000000001},
			{"lightness": 28.80000000000001},
			{"gamma": 1}
		]},
	{"featureType": "road.highway",
		"stylers": [
			{"hue": "#FF0004"},
			{"saturation": 100},
			{"lightness": 24.599999999999994},
			{"gamma": 1}
		]},
	{"featureType": "road.arterial",
		"stylers": [
			{"hue": "#FFFD00"},
			{"saturation": 100},
			{"lightness": -17.39999999999999},
			{"gamma": 1}
		]},
	{"featureType": "road.local",
		"stylers": [
			{"hue": "#00FFFD"},
			{"saturation": 0},
			{"lightness": 0},
			{"gamma": 1}
		]},
	{"featureType": "water",
		"stylers": [
			{"hue": "#0078FF"},
			{"saturation": 0},
			{"lightness": -62},
			{"gamma": 1}
		]},
	{"featureType": "poi",
		"stylers": [
			{"hue": "#9FFF00"},
			{"saturation": 0},
			{"lightness": 0},
			{"gamma": 1}
		]}
];
 
 
        var mapOptions = {
          center: new google.maps.LatLng(46.0000,2.0000),
          zoom: 6,
		  disableDefaultUI: true,
		  zoomControl: true,
		  zoomControlOptions: {style: google.maps.ZoomControlStyle.SMALL
		  },
		  panControl: true,
		  scrollwheel: false,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
		  styles: styles
		};
 
		var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
 
 
//Alsace
	  var georssLayer1 = new google.maps.KmlLayer({
    driveFileId: "0B_nBZ3EzDpnnUVlYSVlOdGR1dzA",preserveViewport:true,suppressInfoWindows: true,
  });
  georssLayer1.setMap(map);
 
//Beaujolais
  	  var georssLayer2 = new google.maps.KmlLayer({
    driveFileId: "0B_nBZ3EzDpnnLXNBVno0YUNDRzQ",preserveViewport:true,suppressInfoWindows: true,
  });
  georssLayer2.setMap(map);
 
  //Bordeaux
  	  var georssLayer3 = new google.maps.KmlLayer({
    driveFileId: "0B_nBZ3EzDpnnVzlSR1dUUmJ5RWM",preserveViewport:true,suppressInfoWindows: true,
  });
  georssLayer3.setMap(map);
 
  //Bourgogne
  	  var georssLayer4 = new google.maps.KmlLayer({
    driveFileId: "0B_nBZ3EzDpnneTVpQmZJRnBwa1E",preserveViewport:true,suppressInfoWindows: true,
  });
  georssLayer4.setMap(map);
 
  //Champagne
  	  var georssLayer5 = new google.maps.KmlLayer({
    driveFileId: "0B_nBZ3EzDpnnVmtadUdNWUhSYkU",preserveViewport:true,suppressInfoWindows: true,
  });
  georssLayer5.setMap(map);
 
  //Corse
  	  var georssLayer6 = new google.maps.KmlLayer({
    driveFileId: "0B_nBZ3EzDpnneDFKVkdlRmVac2s",preserveViewport:true,suppressInfoWindows: true,
  });
  georssLayer6.setMap(map);
 
  //Jura
  	  var georssLayer7 = new google.maps.KmlLayer({
    driveFileId: "0B_nBZ3EzDpnnUmhVNXUwRzN0N2c",preserveViewport:true,suppressInfoWindows: true,
  });
  georssLayer7.setMap(map);
 
  //Languedoc
  	  var georssLayer8 = new google.maps.KmlLayer({
    driveFileId: "0B_nBZ3EzDpnndFlOc19IcFJqSkU",preserveViewport:true,suppressInfoWindows: true,
  });
  georssLayer8.setMap(map);
 
  //Loire
  	  var georssLayer9 = new google.maps.KmlLayer({
    driveFileId: "0B_nBZ3EzDpnnTVVKSk5NbE1STjg",preserveViewport:true,suppressInfoWindows: true,
  });
  georssLayer9.setMap(map);
 
  //Provence
  	  var georssLayer10 = new google.maps.KmlLayer({
    driveFileId: "0B_nBZ3EzDpnnQmNuVUhSMmZhNlU",preserveViewport:true,suppressInfoWindows: true,
  });
  georssLayer10.setMap(map);
 
  //Rhone
  	  var georssLayer11 = new google.maps.KmlLayer({
    driveFileId: "0B_nBZ3EzDpnnRzU4TnQ5N1BNMUE",preserveViewport:true,suppressInfoWindows: true,
  });
  georssLayer11.setMap(map);
 
  //Savoie
  	  var georssLayer12 = new google.maps.KmlLayer({
    driveFileId: "0B_nBZ3EzDpnnb09ZMkpfT3lVczA",preserveViewport:true,suppressInfoWindows: true,
  });
  georssLayer12.setMap(map);
 
  //Sud Ouest
  	  var georssLayer13 = new google.maps.KmlLayer({
    driveFileId: "0B_nBZ3EzDpnnaVA5WERwWXNZcE0",preserveViewport:true,
  });
  georssLayer13.setMap(map);
  }
 
  google.maps.event.addListener(layer, 'click', function(kmlEvent) {
  showInContentWindow(kmlEvent.latLng, kmlEvent.featureData.description);
});
 
function showInContentWindow(position, text) {
  var content = "<div style='margin-left:-20px;border:2px dotted #897823;background-color:#00ff00;color : #4488bb;'>" + text +  "</div>";
  var infowindow = new google.maps.InfoWindow({
    content: content, 
    position: position
 
  })
  infowindow.open(map);
}
 
    </script>
 
</head>

Merci d'avance pour votre aide

[NoSmoking]

Bonjour,

- l'infobulle s'affiche, cependant le texte est blanc, donc invisible (à moins de le sélectionner...)

là il ne s'agit que d'un problème de CSS à régler dans ta feuille de style.

- j'aimerais paramétrer une action, au passage de la souris sur une zone, il faudrait que la zone change de couleur (ou devienne plus foncée) et que l'infobulle s'affiche.

les fichiers KML utilisés via google.maps.KmlLayer ne te le permet pas, par contre il existe un petit outil sympa qui te le permettra, il s'agit de geoxml3.