Vai a: [ Contenuti ] [ Categorie ] [ Cerca ]

Elucubrato da saibal

Addì 17 aprile 2015

Google Maps Responsive con lista di marker da indirizzi utilizzando GMap3 e jQuery

Google Maps Responsive con lista di marker da indirizzi utilizzando GMap3 e jQuery


Il codice che segue permette di creare una mappa con le API Google Maps visualizzando una lista di marker partendo da indirizzi. Il codice sfrutta il plugin GMap3 per instanziare la mappa.

Per gestire la lista degli indirizzi da cui ricavare latitudine e longitudine per i marker avrei potute usare la funzione nativa del plugin stesso ma ho notato che, con array superiori ai 10 item, si crea un effetto poco piacevole. Quando la lista è numerosa, infatti, il codice impiega diverso tempo per ottenere le coordinate: la mappa viene immediatamente istaziata ma può passare anche qualche secondo prima che tutti i “balloon” vengano visualizzati.

Ho quindi cambiato approccio scrivendo una funzione che non chiama tutti gli indirizzi insieme ma li scorre uno ad uno mostrando i marker un po’ alla volta con un buon risultato. Altre funzioni sono:

- la mappa si centra sul primo indirizzo utile trovato
- viene offerta la possibilità di impostare il centro della mappa indipendentemente dagli indirizzi
- opzione per l’autofit in base ai marker
- in caso di mancanza di risultati validi la mappa si posiziona sulle coordinate di default (in questo caso Roma)

In più il codice è valido anche per mappe “responsive” dato che, al resize, viene riposizionato il centro della mappa sulle coordinate relative. Il codice è abbastanza chiaro e contiene commenti abbastanza esaustivi.

La demo è su questa pagina mentre il download è disponibile a questo link.

Nascondi linee numerate

ChiudiChiudi tutti

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
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275

<!DOCTYPE html>
<html>
	<head>
	<title>googlemaps geocode address con timeout - jquery</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="content-language" content="it" />
	<meta name="robots" content="noindex,nofollow,all" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
 
	<style type="text/css">
 
		#container {
			border:solid 1px #000;
			width:100%;
			height: 250px;
		}
 
		#map_canvas1 {
			margin: 0;
			padding: 0;
			width:100%;
			height: 100%;
		}
 
		/* test media query per responsive */
		@media all and (min-width: 768px) {
 
			#container {
				margin: 0 auto;
				border:solid 1px #000;
				width:80%;
				height: 500px;
			}
		}
 
	</style>
 
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 
	<!-- caricamento asincrono della libreria -->
	<script type="text/javascript">
 
		var gskey = 'VOSTRA_APIKEY';
 
		$.ajax({
			dataType: "script",
			cache: true,
			url: "http://maps.googleapis.com/maps/api/js?key=" + gskey + "&sensor=false&callback=$.fn.callbackMap"
		});
 
	</script>
	<!-- caricamento asincrono della libreria -->
 
	<!-- funzione di callback con gmap3 -->
	<script type="text/javascript">
 
		(function($) {
 
			/**
			* $.fn.callbackMap
			*
			* callback senza parametri che richiama la drawMap con parametri
			*/
			$.fn.callbackMap = function() {
 
				$.fn.drawMap({
					"canvasElem": "#map_canvas1",
					"zoom": 12,
					"autoFit": true,
					"scriptPath": "js/gmap3.min.js",
					"markers": [
						{data:"Edificio 1", address:"Corso Italia 100, Roma"},
						{data:"Edificio 2", address:"Via del Corso 100, Roma"},
						{data:"Edificio 3", address:"Via Flaminia 100, Roma, Italia"},
						{data:"Edificio 4", address:"Via Trionfale 100, Roma, Italia"},
						{data:"Edificio 5", address:"Via Cola di rienzo 100, Roma, Italia"},
						{data:"Edificio 6", address:"Via Appia 100, Roma, Italia"},
						{data:"Edificio 7", address:"Via Salaria 100, Roma, Italia"},
						{data:"Edificio 8", address:"Via Mondello 100, Roma, Italia"},
						{data:"Edificio 11", address:"Via Laurentina 760, Roma"},
						{data:"Edificio 12", address:"Via Cristoforo Colombo 98, Roma, Italia"},
						{data:"Edificio 13", address:"Via Anagnina 760, Roma"},
						{data:"Edificio 14", address:"Via Ardeatina 100, Roma, Italia"},
						{data:"Edificio 15", address:"Via Castrense 100, Roma, Italia"},
						{data:"Edificio 16", address:"Via della Montagnola, Roma, Italia"},
						{data:"Edificio 17", address:"Via Nomentana 100, Roma, Italia"},
						{data:"Edificio 18", address:"Via Tiburtina 100, Roma, Italia"}
					]
				});
			};
 
			/**
			* $.fn.drawMap
			*
			* istanzia e disegna la mappa
			*/
			$.fn.drawMap = function(customOptions) {
 
				var defParams = {
					canvasElem		: "#map_canvas",
					addressItem 	: "",
					zoom			: 10,
					mapCenter		: "",
					defaultCenter	: [41.834986, 12.397830],
					defaultZoom		: 5,
					autoFit			: true,
					queryDelay		: 250,
					queryAttempt	: 10,
					markerAction	: "click",
					scriptPath		: "gmap3.min.js",
					isDebug			: true,
					isCache			: true
				}
 
				var self = {};
 
				var opt = $.extend(defParams, customOptions);
 
				// init della funzione
				self.init = function() {
 
					// carico il plugin in modalità asincrona
					$.ajax({
						dataType: "script",
						cache: opt.isCache,
						url: opt.scriptPath
 
					}).done(function() {
 
						// imposto i valori di default sulla mappa opt.canvasElem
						newmap = $(opt.canvasElem).gmap3({
							defaults: {
								verbose: opt.isDebug,
								queryLimit: {
									delay: opt.queryDelay,
									attempt: opt.queryAttempt,
								},
								map: {
									center: opt.defaultCenter,
									zoom: opt.defaultZoom
								},
							},
							map:{
								// callback per caricare i marker dopo aver istanziato la mappa
								callback: function (objmap) {
 
									self.addMarker(objmap);
								}
							}
						});
					});
 
					// ricentro la mappa al resize
					$(window).on('resize', function(){
 
						this.center = newmap.gmap3('get').getCenter();
						newmap.gmap3({trigger:"resize"});
						newmap.gmap3('get').setCenter(this.center);
 
                                                // chiudo eventuali infowindow
                                                var infowindow = newmap.gmap3({ get:{ name:"infowindow" }});
						if (infowindow) infowindow.close();
 
					})
				};
 
				self.addMarker = function(objmap) {
 
					$.each(opt.markers, function(key, value) {
 
						// sulla prima chiave imposto lo zoom e il centro
						if (key == 0) {
 
							objmap.setZoom(opt.zoom);
 
							// imposto il centro della mappa se passato come parametro
							if (opt.mapCenter != "") {
 
								opt.mapCenter = new google.maps.LatLng(opt.mapCenter[0], opt.mapCenter[1]);
								objmap.setCenter(opt.mapCenter);
 
								self.toLog('centro impostato su: ' +opt.mapCenter);
							}
						}
 
						if (value["address"] != "") {
 
							$(opt.canvasElem).gmap3({
								marker:{
									address:value["address"],
									events:{
										click: function(marker) {
 
											// imposto l'azione in base al parametro markerAction
											if (opt.markerAction == "click") {
 
												var infowindow = $(this).gmap3({ get:{ name:"infowindow" }});
												if (infowindow) infowindow.close();
 
												$(this).gmap3({infowindow:{
													anchor:marker,
													options:{content:"<strong>" +value["data"]+ "</strong><br>" +value["address"]}
												}});
											}
										},
										mouseover: function(marker){
 
											// imposto l'azione in base al parametro markerAction
											if (opt.markerAction == "mouseover") {
 
												var infowindow = $(this).gmap3({ get:{ name:"infowindow" }});
												if (infowindow) infowindow.close();
 
												$(this).gmap3({infowindow:{
													anchor:marker,
													options:{content: opt.markers[key]['data']}
												}});
											}
										},
										//~ mouseout: function(){
											//~ var infowindow = $(this).gmap3({get:{name:"infowindow"}});
											//~ if (infowindow){
											  //~ infowindow.close();
											//~ }
										//~ }
									},
									callback: function(marker) {
 
										// setto il centro sulla mappa sul primo risultato utile (se non è presente)
										if (opt.mapCenter == "") {
 
											opt.mapCenter = marker.getPosition();
											$(this).gmap3('get').setCenter(opt.mapCenter);
 
											self.toLog('centro impostato su: ' +value["address"]);
										}
 
										self.toLog('indirizzo trovato: ' +value["address"]);
									}
								}
							});
						}
					});
 
					// imposto l'autofit
					if (opt.autoFit == true) $(opt.canvasElem).gmap3("autofit");
				};
 
				// funzione log attiva se impostato il parametro a true
				self.toLog = function(msg) {
					if (opt.isDebug === true) {
						(window.console && window.console.log) ? window.console.log(msg) : alert(msg)
					}
				};
 
				self.init();
 
				return self;
			};
		})(jQuery);
 
	</script>
	<!-- 1 plugin jquery -->
 
</head>
<body>
 
<h2>soluzione jquery</h2>
 
<div id="container">
	<div id="map_canvas1"></div>
</div>
 
</body>
</html>
  • 438 visite
  • Voto negativoVoto positivo Vota: -- Loading ... Loading ...

link sponsorizzati

Consiglialo su Facebook

Post precedente

Post successivo


Scrivi un commento

Commenti totali: 1


  1. [1] salvo ha scritto:

    ottimo script!!
    bella la visualizzazione punto per punto…
    ma si potrebbe visualizzare anche la linea che unisce i vari punti? come quando si vede proprio l’itinerario seguito?

    scritto il 15 gennaio 2017 alle 11:00

Lascia un Commento

Iscriviti alle discussione senza commentare

Torna: [ Inizio ] [ Contenuti ] [ Categorie ] [ Cerca ]

Pagina renderizzata in soli 0,203 secondi dopo aver eseguito ben 69 query. Wordpress... prestazioni da urlo!