Come inserire Google Map nel proprio Web
Martedì, 23 Gennaio 2007Web2.0 significa anche software distribuito via API. La possibilità di sfruttare funzioni e funzionalità remote altrove risulta estremamente utile in realtà come Internet. Oltre a Yahoo, con il suo ToolKit 2.0 style, anche Google - nell'ambito della geo-referenzazione - propone i suoi strumenti free, in questo caso per la manipolazione e gestione delle mappe.
Google Maps API permette di inserire Google Maps nelle proprie pagine Web tramite Javascript.
La prima cosa da fare, prima di poter iniziare a sperimentare le API, è registrarsi sul sito http://www.google.com/apis/maps/ in modo da ottenere una chiave (una UID) relativa al sito di utilizzo. Di fatto per ogni Web è necessaria una chiave!
Google fornisce sia un servizio gratuito che uno Enterprise, per soluzioni intranet e utilizzi avanzati - vedi: Google Maps for Enterprise
La versione gratuita, tuttavia, risolve già tutte le possibili esigenze. Ottenuta la chiave viene automaticamente proposta una pagina di riepilogo con una codice Javascript di esempio. Il primo passo è recuperare longitudine e latidudine della zona che si vuole visualizzare.
-
function showMap() {
-
if (GBrowserIsCompatible()) {
-
var map = new GMap2(document.getElementById("map"));
-
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
-
}
-
}
Il codice di esempio è abbastanza semplice. Esso si basa sull'instanza di una classe GMap2() collegata ad un DIV presente sulla pagina, in questo caso un DIV con id="map".
La documentazione completa delle API fornisce poi ulteriori spunti di visualizzazione, come l'impostazione della vista ibrida - satellite/mappa - l'attivazione dei controlli per lo Zoom e gli spostamenti, la possibilità di collegare un "fumetto" con indicazioni personalizzate.
Un modo per attivare una serie di controlli è:
-
var map = new GMap2(document.getElementById("map"));
-
var center = new GLatLng(37.4419, -122.1419);
-
map.setCenter(center, 17, G_HYBRID_MAP); // Mappa ibrida
-
map.addControl(new GMapTypeControl());
-
map.addControl(new GLargeMapControl());
-
map.addControl(new GScaleControl()); // Zomming
È inoltre possibile associare un GMarker, un "fumetto" con ulteriori indicazioni e farlo reagire al click del mouse.
-
var WINDOW_HTML = '<div class="td_testo"><strong>Prova Mio Nome</strong><br />Via Roma, 100<br />00100 - Roma, Italia</div><div class="menu"><a href="http://maps.google.com/maps?f=q&hl=it&q=Via+Roma,+42,+Roma&ie=UTF8&om=1&z=17&ll=41.851366,12.473409&spn=0.005786,0.013561&iwloc=A">Come arrivare da noi</a></div>';
-
-
var marker = new GMarker(center);
-
map.addOverlay(marker);
-
GEvent.addListener(marker, 'click', function() {
-
marker.openInfoWindowHtml(WINDOW_HTML);
-
});
-
GEvent.addListener(marker, 'infowindowclose', function() {
-
map.recenterOrPanToLatLng(center, 2);
-
});
-
marker.openInfoWindowHtml(WINDOW_HTML);
Sul sito la documentazione completa esaudisce ogni nostro desiderio, dall'uso di speciali Marker, JSON, Ajax e moltissimo altro. Tra l'altro troverete moltissimi esempi di codice con esempi direttamente online. Un tool - free - da usare da subito!
Vedi anche...
- 25.06.08: Tecniche di Text Replacement in Flash (0)
- 23.06.08: Tecniche di Text Replacement in HTML/CSS (4)
- 19.06.08: OnAir: scegli il video con il nuovo on-demand (0)
- 17.06.08: PicLens in Flash con Papervision3D 2.0: parte II (1)
- 16.06.08: Creare un preloader generico in Actionscript 3.0 (1)
16 Marzo 2008 alle 20:45
Non riesco a fargli inserire il fumetto…è possibile avere un’esempio o maggiori informazioni in italiano su come fare?
grazie
17 Marzo 2008 alle 13:12
@Villa Centopino: l’esempio è quello mostrato nel Post. Quale problema hai riscontrato esattamente? Di da qualche errore?
28 Marzo 2008 alle 21:34
ciao
si non mi inseriva il fumetto copiando ed incollando, nessun errore…
però continuando a cercare ho risolto
ciao e grazie
13 Maggio 2008 alle 19:19
è possibile ricavare latitudine e longitudine a partire dal nome della città e la strada?
14 Maggio 2008 alle 06:02
[...] questa volta rispondo ad un commento con un Post, visto il generale interesse. Armando mi chiedeva se era possibile, tramite Google Maps, ottenere Latitudine e Longitudine a partire da [...]
26 Maggio 2008 alle 02:47
Ciao,
mi servirebbe una mano.
vorrei che il mio fumetto fosse gia visualizzato senza dover necessariamente fare il click col mouse.
Inoltre vorrei che il fumetto contenesse le opzioni “trova il percorso A QUI e DA QUI”.
E’ una settimana che ci sbattola testa, dammi una manoper favore.
Grazie e a presto
14 Giugno 2008 alle 15:59
Grazie!!!
2 Luglio 2008 alle 16:20
Ciao a tutti volevo chiedervi come mai non visualizzo il markatore dell’indirizzo e non mitrova l’indirizzo…
(alert(address + " not found");
....
io lo scritto cosi:
...
onload="load();
showAddress('Via della Portichina, 20 55049 Viareggio LU, Italia');"
onunload="GUnload();"
......
grazie mille