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!
I temi neri li vedevo bene 10 anni fa! 
Ciao, Emanuele
come darti torto…
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…
io lo scritto cosi:
... onload="load(); showAddress('Via della Portichina, 20 55049 Viareggio LU, Italia');" onunload="GUnload();" ......grazie mille
Bookmarks dal 18 Ottobre al 24 Ottobre - Dexle ha detto:
[...] 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”; [...]
Adotta un post | Undolog.com ha detto:
[...] 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 [...]
Andreas ha detto:
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
Giovambattista Fazioli ha detto:
@Andreas: dear Andreas, can you write your question in english?
Andreas ha detto:
@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 ha detto:
Ti chiedo se è possibile trovare un sito in cui agisca al contrario, cioè inserendo le coordinate si possa trovare il luogo .
Giovambattista Fazioli ha detto:
@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:L’handler del click usa l’oggetto
GClientGeocoderper recuperare le informazioni del luogo partendo da latitudine e longitudine:Poi, alla fine, l’handler
showAddressmostrerà le info del luogo tramiteplace.addressAngeliam ha detto:
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!!!
Claudio ha detto:
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
enrico beb ha detto:
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?
Giovambattista Fazioli ha detto:
@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.