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...
- 27.08.08: Very short snippet: inviare email in HTML con PHP (0)
- 26.08.08: Skypemote.com: dillo con le emotions (3)
- 21.08.08: WP-ABS: aggiungere il proprio blog al search del browser (7)
- 20.08.08: Simple Accordion con la classe USimpleTabStrip (0)
- 19.08.08: Flick e Flock (2)
villa centopino ha detto:
Non riesco a fargli inserire il fumetto…è possibile avere un’esempio o maggiori informazioni in italiano su come fare?
grazie
Giovambattista Fazioli ha detto:
@Villa Centopino: l’esempio è quello mostrato nel Post. Quale problema hai riscontrato esattamente? Di da qualche errore?
villa centopino ha detto:
ciao
si non mi inseriva il fumetto copiando ed incollando, nessun errore…
però continuando a cercare ho risolto
ciao e grazie
armando ha detto:
è possibile ricavare latitudine e longitudine a partire dal nome della città e la strada?
Google Maps: come ottenere Latitudine e Longitudine da un indirizzo | Undolog.com ha detto:
[...] 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 [...]
Alberto ha detto:
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
Alex ha detto:
Grazie!!!
beppe ha detto:
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