[Google Maps] Graphique Highcharts dans une InfoWindow avec requête Ajax

Graphique Highcharts dans une InfoWindow avec requête Ajax

Bonjour à tous,

Voila plusieurs jours que j'essaie d'afficher des données au sein d'un graphique dans une InfoWindow liée à un marker sur la map.
Basiquement j'ouvre mon InfoWindow et quand elle est domready, je passe à la génération de mon graphique. Je récupère les données que je veux via une requête Ajax, qui se déroule sans problème et me permet de stocker le tableau que me retourne le .php. Cependant il apparaît qu'au 'domready' de l'InfoWindow le graphique est généré avec la variable vide alors que le console.log(variable) me retourne bien les données récupérées par la requête Ajax.

Peut-être que le code sera plus parlant.

Mon index

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
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
<!DOCTYPE html>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="highstock/js/jquery-1.9.1.js"></script>	
	<script src="highstock/js/highstock.js"></script>
	<script src="highstock/js/no-data-to-display.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
	<title>RO Command Center - Map</title>
	<style>
      .controls {
        margin-top: 16px;
        border: 1px solid transparent;
        border-radius: 2px 0 0 2px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        height: 32px;
        outline: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
		margin-left:50px;
      }
 
      #pac-input {
        background-color: #fff;
        padding: 0 11px 0 13px;
        width: 400px;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        text-overflow: ellipsis;
		margin-left:50px;
      }
 
      #pac-input:focus {
        border-color: #4d90fe;
        margin-left: -1px;
        padding-left: 14px;
        width: 401px;
		margin-left:50px;
      }
    </style>
<html> 
<head>  
  <title>Google Maps Multiple Markers</title> 
</head> 
<script type="text/javascript">
$(document).ready(function() {
    var locations = [['Cambrai', 4, 50.1735380,3.2366330],['Morges', 4, 46.5152627,6.4929214],['London', 4, 51.5085150,-0.1254872],['New-York', 4, 40.7143528,-74.0059731]];
	var iw = new google.maps.InfoWindow();
	var geneve = new google.maps.LatLng(46.201221,6.142187);
 
    var map = new google.maps.Map(document.getElementById('map'), {
		zoom: 3,
		center: new google.maps.LatLng(0.0, 0.0),
		mapTypeId : google.maps.MapTypeId.ROADMAP, // Type de carte, différentes valeurs possible HYBRID, ROADMAP, SATELLITE, TERRAIN
		streetViewControl: false,
		center: geneve,
		panControl: false,
		zoomControl: false,
		mapTypeControlOptions: {
			style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
		},
		zoomControlOptions: {
			style: google.maps.ZoomControlStyle.SMALL
		}
    });
	var inputLocation = /** @type {HTMLInputElement} */(document.getElementById('pac-input'));
	// Link it to the UI element.
	map.controls[google.maps.ControlPosition.TOP_LEFT].push(inputLocation);
	var autocompleteLocation = new google.maps.places.Autocomplete(inputLocation);
	autocompleteLocation.bindTo('bounds', map);
	 /******************** LISTENER ************************/
	google.maps.event.addListener(autocompleteLocation, 'place_changed', function() {
	inputLocation.className = '';
	var placeStart = autocompleteLocation.getPlace();
	if (!placeStart.geometry) {
	  // Inform the user that the place was not found and return.
	  inputLocation.className = 'notfound';
	  return;
	}
 
	// If the place has a geometry, then present it on a map.
	if (placeStart.geometry.viewport) {
	  map.fitBounds(placeStart.geometry.viewport);
	} else {
	  map.setCenter(placeStart.geometry.location);
	  map.setZoom(13);  // Why 13? Because it looks good.
	}
	var address = '';
	if (placeStart.address_components) {
	  address = [
		(placeStart.address_components[0] && placeStart.address_components[0].short_name || ''),
		(placeStart.address_components[1] && placeStart.address_components[1].short_name || ''),
		(placeStart.address_components[2] && placeStart.address_components[2].short_name || '')
	  ].join(' ');
	}
  });
  /******************** END LISTENER ************************/
    var marker, i, selectedname;
	var contentDiv = '<div id="container" style="height:350px; width:350px"></div>';
 
    for (i = 0; i < locations.length; i++) {  
		marker = new google.maps.Marker({
			position: new google.maps.LatLng(locations[i][2], locations[i][3]),
			map: map,
			title: locations[i][0]+ " (" + locations[i][1] + " stars)",
			animation: google.maps.Animation.DROP,
        });
 
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
			return function() {
			selectedname = locations[i][0];
			marker.setAnimation(google.maps.Animation.BOUNCE);
			stopAnimation(marker);
			iw.setContent(contentDiv);
			iw.open(map, marker);
			domready();
			}
        })
	    (marker, i));
    }
 
	function domready() {
		google.maps.event.addListener(iw,'domready',function(){
			$.ajax({
				data: "selectedname="+selectedname,
				type:"post",
				url: "./data.php",
					success: function(data) {
						var dataPrice = data;
						console.log(dataPrice);
						dataChart = {	
							chart: {
								borderWidth: 2,
								renderTo: document.getElementById('container'),
								zoomType: 'x',
								type:"spline",
								height:350,
								width:350,
								marginRight:40
							},
							rangeSelector: {
								enabled: false
							},
							title: {
								text: 'Price evolution of '+ selectedname
							},
							subtitle: {
								text: 'Click & drag to zoom'
							},
							xAxis: {
								title: {
									text: 'Date/Time'
								}
							},
							yAxis: [{
								title: {
									text: 'Price'
								},
								lineWidth: 2
							}],
							navigator: {
								enabled: false,
							}, 
							credits: {
								enabled: false
							},
							series: [{
								name: 'Price',
								tooltip: {
									valueSuffix: '$'
								},
								marker: { 
									enabled:true,
									radius:2
								},
								turboThreshold:0,
								data: dataPrice
							}]
						}
						chart = new Highcharts.StockChart(dataChart);
						console.log(dataPrice);
					}
 
			});
		});
	}
 
 
	function stopAnimation(marker) {
		setTimeout(function () {
			marker.setAnimation(null);
		}, 5000);
	}
 
});
</script>
<body>
 <center> 
 <input id="pac-input" class="controls" type="text" placeholder="Indicate a city">
 <div id="map" style="width: 90%; height: 800px;"></div>
 </center>
</body>
</html>

data.php (j'ai mis des données en dur mais normalement c'est une requête SQL qui me retourne un tableau du même genre)

Code:

1
2
3
<?php 
echo "[[1398034800000, 222],[1398036600000, 222],[1398038400000, 222],[1398040200000, 222],[1398042000000, 222],[1398043800000, 222],[1398045600000, 238],[1398047400000, 222],[1398049200000, 222],[1398051000000, 222],[1398052800000, 222],[1398054600000, 222],[1398056400000, 222],[1398058200000, 222],[1398060000000, 222],[1398061800000, 222],[1398063600000, 222],[1398065400000, 222],[1398067200000, 222],[1398069000000, 222],[1398070800000, 222],[1398072600000, 222],[1398074400000, 222],[1398076200000, 222],[1398078000000, 222],[1398081600000, 222],[1398083400000, 222],[1398085200000, 222],[1398087000000, 222],[1398088800000, 222],[1398090600000, 222],[1398092400000, 222],[1398094200000, 222],[1398097800000, 222],[1398099600000, 222],[1398101400000, 222],[1398103200000, 222],[1398105000000, 222],[1398106800000, 222],[1398108600000, 222],[1398110400000, 222],[1398112200000, 222],[1398114000000, 222],[1398115800000, 222],[1398117600000, 238],[1398119400000, 222],[1398121200000, 222],[1398123000000, 222],[1398124800000, 222],[1398126600000, 222],[1398128400000, 238],[1398130200000, 222],[1398132000000, 222],[1398133800000, 222],[1398135600000, 222],[1398137400000, 222],[1398139200000, 222],[1398141000000, 222],[1398142800000, 222],[1398144600000, 222],[1398146400000, 222],[1398148200000, 222],[1398150000000, 222],[1398151800000, 222],[1398153600000, 238],[1398155400000, 238],[1398157200000, 222],[1398160800000, 222],[1398162600000, 222],[1398164400000, 216],[1398166200000, 216],[1398168000000, 216],[1398169800000, 216],[1398171600000, 216],[1398173400000, 216],[1398175200000, 216],[1398177000000, 216],[1398178800000, 216],[1398180600000, 216],[1398182400000, 216],[1398184200000, 216],[1398186000000, 216],[1398187800000, 216],[1398189600000, 216],[1398191400000, 216],[1398193200000, 216],[1398195000000, 216],[1398196800000, 216],[1398198600000, 216],[1398200400000, 216],[1398202200000, 216],[1398204000000, 216],[1398205800000, 216],[1398207600000, 216],[1398209400000, 216],[1398211200000, 216],[1398213000000, 216],[1398214800000, 216],[1398216600000, 216],[1398218400000, 216],[1398220200000, 226],[1398222000000, 216],[1398223800000, 216],[1398225600000, 216],[1398227400000, 216],[1398229200000, 216],[1398231000000, 216],[1398232800000, 216],[1398234600000, 216],[1398236400000, 216],[1398238200000, 226],[1398240000000, 216],[1398241800000, 216],[1398243600000, 216],[1398245400000, 226],[1398247200000, 216],[1398249000000, 216],[1398250800000, 216],[1398252600000, 216],[1398254400000, 226],[1398256200000, 216],[1398258000000, 216],[1398259800000, 216],[1398261600000, 226],[1398263400000, 216],[1398265200000, 216],[1398267000000, 216],[1398268800000, 216],[1398270600000, 216],[1398272400000, 216],[1398274200000, 216],[1398276000000, 216],[1398277800000, 216],[1398279600000, 216],[1398281400000, 216],[1398283200000, 216],[1398285000000, 216],[1398286800000, 216],[1398288600000, 216],[1398290400000, 216],[1398292200000, 216],[1398294000000, 216],[1398295800000, 216],[1398297600000, 216],[1398299400000, 216],[1398301200000, 216],[1398303000000, 216],[1398304800000, 216],[1398306600000, 216],[1398308400000, 216],[1398310200000, 216],[1398312000000, 216],[1398313800000, 216],[1398315600000, 216],[1398317400000, 216],[1398319200000, 216],[1398321000000, 216],[1398322800000, 216],[1398324600000, 216],[1398326400000, 216],[1398328200000, 216],[1398330000000, 216],[1398331800000, 216],[1398333600000, 216],[1398335400000, 216],[1398337200000, 225],[1398339000000, 216],[1398340800000, 216],[1398342600000, 216],[1398344400000, 216],[1398346200000, 216],[1398348000000, 216],[1398349800000, 216],[1398351600000, 216],[1398353400000, 216],[1398355200000, 225],[1398357000000, 216],[1398358800000, 216],[1398360600000, 216],[1398362400000, 225],[1398364200000, 216],[1398366000000, 216],[1398369600000, 216],[1398371400000, 216],[1398373200000, 216],[1398375000000, 216],[1398378600000, 216],[1398380400000, 226],[1398382200000, 226],[1398385800000, 226],[1398387600000, 226],[1398391200000, 226],[1398398400000, 226],[1398403800000, 226],[1398405600000, 226],[1398407400000, 226],[1398412800000, 226],[1398414600000, 226],[1398416400000, 226],[1398423600000, 226],[1398425400000, 226],[1398430800000, 226],[1398434400000, 226],[1398436200000, 226],[1398438000000, 226],[1398439800000, 226],[1398448800000, 226],]";
?>

Je précise que si je mets en dur les données telle qu'elles sont maintenant dans le data.php directement dans mon chart, le chart se génère et affiche un graphique avec des points.
En l'état actuel , l'InfoWindow affiche un graphique vide de données.

Affichage en l'état actuel : http://i.imgur.com/GIBSbLF.png

Affichage avec les données mises en dur dans "dataChart" : http://i.imgur.com/RGBdFLW.png

Si je n'ai pas été assez clair ou que des précisions sont nécessaires je me ferai une joie de répondre.

Merci d'avance,
Pouyo.

Finalement j'ai réussi à résoudre le problème \o/

J'ai mis la requête Ajax dans le listener du click et j'ai un peu changé la requête et ça tourne bien, même avec les données générées à la volée. Si jamais voila le code de mes deux listeners.

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
google.maps.event.addListener(marker, 'click', (function (marker, i) {
    return function () {
        selectedname = locations[i][0];
        marker.setAnimation(google.maps.Animation.BOUNCE);
        stopAnimation(marker);
        var request = $.ajax({
            data: "selectedname=" + selectedname,
            type: "post",
            url: "./data.php",
            dataType: 'json'
        });
        request.done(function (data) {
            dataPrice = data;
            iw.setContent(contentDiv);
            iw.open(map, marker);
        });
    }
})(marker, i));
}
google.maps.event.addListener(iw, 'domready', function () {
    dataChart = {
        chart: {
            borderWidth: 2,
            renderTo: document.getElementById('container'),
            zoomType: 'x',
            type: "spline",
            height: 350,
            width: 350,
            marginRight: 40
        },
        rangeSelector: {
            enabled: false
        },
        title: {
            text: 'Price evolution of ' + selectedname
        },
        subtitle: {
            text: 'Click & drag to zoom'
        },
        xAxis: {
            title: {
                text: 'Date/Time'
            }
        },
        yAxis: [{
            title: {
                text: 'Price'
            },
            lineWidth: 2
        }],
        navigator: {
            enabled: false,
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Price',
            tooltip: {
                valueSuffix: '$'
            },
            marker: {
                enabled: true,
                radius: 2
            },
            turboThreshold: 0,
            data: dataPrice
        }]
    }
    chart = new Highcharts.StockChart(dataChart);
});

Bonjour et bienvenue sur DVP.

Pourquoi ne pas avoir mis le reDraw de l'infoBulle sur le load de ta Chart, par exemple (*)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
google.maps.event.addListenerOnce( iw, 'domready', function(){ // ne définir qu'une fois l'événement
 
// suite code
 
chart: {
  events: {
    load: function(event) {
      alert ('Merci de redessiner la fenêtre !');
      // force le reDraw de l'infoBulle
      google.maps.event.trigger( iw, 'content_changed');
    }
  },
  borderWidth: 2,

(*) sur base de ton code initial.

Je n'avais pas vu que l'on pouvait monitor le changement de contenu d'une infobulle, ça m'avait échappé dans l'API, pour être honnête j'avais même pas considéré le fait que ce soit possible :D

Ma version est certes fonctionnelle, mais peut-être pas la plus jolie. Je vais de toute façon m'y replonger pour y apporter des améliorations/modifications et regarder ça, je te remercie pour l'information.

PS : désolé pour l'indentation de mon code précédent, c'était l'heure de la pause, j'ai pas fait super gaffe !