Come inserire Google Map nel proprio Web
martedì 23 gennaio, 2007Web2.0 significa anche software distribuito tramite API (Interfaccia di Programmazione di un’Applicazione). 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.
1 2 3 4 5 6 | 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 DIVpresente sulla pagina, in questo caso un DIVcon 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 è:
1 2 3 4 5 6 | 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.
1 2 3 4 5 6 7 8 9 10 11 | 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!












1

Non riesco a fargli inserire il fumetto…è possibile avere un’esempio o maggiori informazioni in italiano su come fare?
grazie
@Villa Centopino: l’esempio è quello mostrato nel Post. Quale problema hai riscontrato esattamente? Di da qualche errore?
ciao
si non mi inseriva il fumetto copiando ed incollando, nessun errore…
però continuando a cercare ho risolto
ciao e grazie
è possibile ricavare latitudine e longitudine a partire dal nome della città e la strada?
[...] 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 [...]
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
Grazie!!!
Ciao a tutti volevo chiedervi come mai non visualizzo il markatore dell’indirizzo e non mitrova l’indirizzo…
2
....
io lo scritto cosi:
2
3
4
5
onload="load();
showAddress('Via della Portichina, 20 55049 Viareggio LU, Italia');"
onunload="GUnload();"
......
grazie mille
[...] Come inserire Google Map nel proprio Web – heyos_ad_user = 8748; heyos_ad_type = “G”; heyos_ad_format = “8″; heyos_color_border = “000066″; heyos_color_bg = “FFFFFF”; heyos_color_link = “005B88″; heyos_color_text = “000000″; heyos_color_url = “5F5F5F”; [...]
[...] esempio, nel memento in cui scrivo uno dei post più visti rimane Come inserire Google Map nel proprio Web, con 17410 visualizzazioni. Se avete servizi o prodotti inerenti a Google Map o, comunque, che [...]
Hej!
Är helt ny till det här med Google MAPS API.
Jag önskar hjälp med att få på plats de kod-bitar som krävs. Följande önskar jag uppnå.
Har en webbsida där man fyller i lite uppgifter, där bland annat adress, stad och land. Man klickar “submit” och all information lagras så klart i en databas.
Min önskan, är nu att man på en visningssida skall kunna klicka på en post i databasen och då hämtas all information och visas på en sida. Det som jag önskar skall ske, är att en karta visas där man har en liten pin-point på just den adress, ort och land som var registrerad för den posten.
HUR går jag tillväga för att skapa detta på ett enkelt och bra sätt.
Skriver lite PHP och jobbar mot MySQL.
Tacksam om någon önskar hjälpa en okunnig själ!
–Andreas
@Andreas: dear Andreas, can you write your question in english?
@Giovambattista Fazioli:
Hello!
Are completely new to this with the Google Maps API.
I want help to get into place the code-bit as needed. The following, I wish to achieve.
Have a website where you fill in some data, which among other things, address, city and country. You click “submit” and all information stored so clearly in a database.
My wish now is that on a display page is to click on an entry in the database and then retrieved all the information and displayed on a page. What I hope will happen is that a map shows where you have a small pin-point just at the address, city and country that was registered for the post.
HOW do I go about to create this in a simple and useful way.
Writes a little PHP and works against MySQL.
Grateful if anyone wishing to help an ignorant soul!
-Andrew
@Dario: vedi Geocoding Reverse. Sbirciando nel sorgente della pagina troverai il codice necessario, comunqueq sia, il “core” della soluzione è:
Aggiungere un listener per intercettare il click e creare un oggetto
GClientGeocoder:2
geocoder = new GClientGeocoder();
L’handler del click usa l’oggetto
GClientGeocoderper recuperare le informazioni del luogo partendo da latitudine e longitudine:2
3
4
5
6
if (latlng != null) {
address = latlng;
geocoder.getLocations(latlng, showAddress);
}
}
Poi, alla fine, l’handler
showAddressmostrerà le info del luogo tramiteplace.addressTi chiedo se è possibile trovare un sito in cui agisca al contrario, cioè inserendo le coordinate si possa trovare il luogo .
Ciao a tutti!
Chiedo a mano di esperti, perchè mi sono imbattuto in un problema che non riesco a risolvere…ora vi spiego:
devo utilizzare le api di google maps per rendere navigabile e zoomabile una mappa con estenzione .tiff che è georeferenziata! Ho trovato delle indicazioni con le ho quali ho capito che prima di tutto la mia immagine deve essere divisa in tiles, solo che sulle risorse che ho trovato io si dice che si può fare questo con photoshop o paint shop pro (o con qualche altro programmino, credo) ma non mi dice come…e mi sono bloccato in questo punto!
Vi prego…aiutatemi, ne ho davvero bisogno!!!
Ola estou querendo passar meu mapa, ja feito em Google Earth e Maps para Api , para poder ter a visão em meu blog igual a um Google Earth, local em meu computador. Se que e posivel, mas desconhesco como fazerlo. Me poderiam dar algumas dicas de como fazer, o onde procurar algum exemplo.
Meu temor es ter que recadastrar tudo cadastrado em meu mapa, todos os wait point.
Grato pela ajuda.
Claudio G. Pagliaro
cgpagliaro.arroba.gmail.com
Salve a tutti, ho un problema, ho generato il codice API per inserire google maps nel mio sito. In locale funziona senza problemi ma una volta ke lo inserisco in internet e vado a visitare la pagina dove è inserito mi esce la scritta ke il server API ha rifiutato la richiesta e questo perchè il codice API non è valido perchè generato per un’altro sito. Cosa devo fare?
@enrico beb: puoi rigenerare la chiave! O meglio! Se l’hai utilizzato in “locale”, come sostieni, avrai generato una chiave per un host diverso da quello online? In pratica devi generare una chiave a seconda del server su cui lo usi.
[...] è veramente banale. Vediamo subito lo script base da integrare alla normale procedura di inserimento di google map nel sito. Vediamo dapprima come attivare la pubblicità tradizionale e poi la toolbar di [...]
[...] In Adobe Flash è possibile utilizzare un vasto assortimento di Web API esterne fornite da servizi come Facebook, Twitter o Flickr. In questo tutorial vedremo come integrare, in modo davvero semplice, i servizi di Google Maps in un filmato/applicazione Adobe Flash CS4. Premetto che il procedimento per poter utilizzare Google Maps in Flash è molto simile a quello che accade in HTML/Javascript (vedi per dettagli Come inserire Google Map nel proprio Web). [...]
[...] ha reso disponibile le API – in Javascript – per inserire le sue mappe in qualsiasi sito Web. Viediamo come realizzare la stessa cosa con [...]
Scusate, sapete come eliminare le scritte di google in basso dei “crediti”?
Ho una mappa mostrata come ibrida, ma è abbastanza piccola, quindi il testo va in eccedenza, ed è graficamente bruttino.