Script ajax: Visualizzare sul proprio sito un indirizzo con Google maps
difficoltà:
Download
Script simili
25/4/2007
Vedremo in questo script come inserire nel proprio sito una mappa personalizzata prelevata da google maps. Nell'esempio Script ajax: Inserire una mappa di google maps nel proprio sito abbiamo visto come inserire una mappa e visualizzare un punto inserendo le coordinate della zona da visualizzare. In questo esempio vedremo invece come visualizzare nella mappa un indirizzo, inserendo non le coordinate, ma più semplicemente l'indirizzo stesso, comprendente via, città e numero civico.
Vi ricordo di prelevare una API Key da
http://www.google.com/apis/maps/signup.html
(per maggiori info riguardate Script ajax: Inserire una mappa di google maps nel proprio sito)
Attraverso Geocoder vediamo ora come modificare lo script visto in precedenza per poter visualizzare un indirizzo con le mappe di google sul nostro sito.
Avremo in particolare due funzioni. La funzione load() caricherà la mappa. Visualizzando un punto iniziale. Ad esempio la visualizzazione di tutta l'Italia. Con la funzione showAddress() andremo a posizionarci in un punto preciso, all'indirizzo richiesto.
Vediamo lo script completo:
<script src="http://maps.google.com/maps?file=api&v=2.x&key=INSERIRE_QUI_LA_API_KEY" type="text/javascript"></script>La funzione load() la abbiamo già spiegata qui, carichiamo la mappa e la centriamo su Roma, zoom 5, quindi visualizziamo tutta l'Italia.
<script type="text/javascript">
var map = null;
var geocoder = null;
function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(41.91633, 12.482185), 5);
geocoder = new GClientGeocoder();
}
}
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");
} else {
map.setCenter(point, 16);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
}
</script>
<body onload="load();showAddress('Via Rosmini Antonio, 9, 00184 Roma (RM), Italy');" onunload="GUnload();">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
Alla funzione showAddress() passiamo l'indirizzo, ad esempio Via Rosmini Antonio, 9, 00184 Roma (RM), Italy.
Se non viene trovato l'indirizzo (attenzione a scriverlo in un formato corretto) viene visualizzato un alert con un errore:
if (!point) {
alert(address + " not found");
}
altrimenti viene visualizzato il punto cercato a zoom 16:map.setCenter(point, 16);volendo possiamo visualizzare un segnaposto per la via
var marker = new GMarker(point);E addirittura un fumetto con il nome del posto:
map.addOverlay(marker);
marker.openInfoWindowHtml('Ristorante xxxx');
o della via:marker.openInfoWindowHtml(address);
Permalink:
Tag:
Script Simili:
Script ajax: Calcolare il percorso con google maps sul sito
Script ajax: Mappe Google maps sul proprio sito metodo veloce in iframe
Script ajax: Caricare su Google maps coordinate da xml o feed rss con georss
Script ajax: Mappe personalizzate kml su google maps con georss e Mapplets
Link utili:
Vota:
Commenti
2/5/2007 23:48:20
Metti in onload
onload="load();showAddress('Via Rosmini Antonio, 9, 00184 Roma (RM), Italy');"
? Se metti un indirizzo in modo non corretto potrebbe non trovare il punto cercato.
4/5/2007 12:04:05
Ciao Fabio, scusami ma forse nel post precedente non mi sono spiegato bene, allora quando scrivo:
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml('Ristorante xxxx');
ovvero per inserire un segnaposto e un fumetto, mi dice che l'argomento passato a GMarker ovvero "point" è nullo e che "map" è nullo o non è un oggetto....grazie ancora....ciao
Mario
4/5/2007 12:21:53
ah ok..allora anche se map è nullo potrebbe non aver inizializzato il tutto. Che cosa hai fatto tu? Hai scaricato il file da 'Download'?
Hai poi creato una API key per il sito in cui hai inserito il codice (specificando la cartella) e inserito la api key al posto di INSERIRE_QUI_LA_API_KEY nel codice?
Se hai fatto tutto e ti da l'errore nn riesco a capire che puo' essere. In questo caso se vuoi posta il link della pagina che ci do un occhio, oppure mandala per mail (dalla pagina contatti)
5/5/2007 18:42:46
ciao, vorrei unire i:
marker.openInfoWindowHtml(address); con marker.openInfoWindowHtml('MIO NOME');
ma non so' come unirli.
E' possibile inoltre unire informazioni piu' dettagliate nel fumetto?
grazie!
5/5/2007 19:09:12
Come testo puoi inserire una stringa anche formattata html o sommare + stringhe. Per esempio:
stringafinale="<b>Nome ristorante</b><br>"+address;
marker.openInfoWindowHtml(stringafinale);
9/5/2007 12:10:19
ciao, son tornato....
- per aggiungere la zoom-slide-bar in alto a sinistra?
- è possibile gestire dei percorsi di navigazione da "qui" a "li" preimpostati?
9/5/2007 12:24:30
Per avere la barra dello zoom completa al posto di
map.addControl(new GSmallMapControl());
metti
map.addControl(new GLargeMapControl());
per i percorsi preimpostati invece non ti so dire..a dire il vero non credo sia possibile..comunque provo a dare un occhiata
10/5/2007 13:45:17
ciao, molto utile il tuo script... ma non è possibile inserire due mappe diverse nella stessa pagina, a quanto mi sembra di capire, giusto?
10/5/2007 14:10:00
mah...in realtà credo sia possibile..
devi pero' inserire tutto doppio, da div contenente la mappa(con altro id) e l'inizializzazione della mappa riferendosi non a map ma all'altro id.
10/5/2007 14:26:56
per le doppie mappe ho trovato...
doppie mappe
29/5/2007 23:35:27
Finalmente uno script che visualizza la mappa non solo con le coordinate ma anche con l'indirizzo con via e città!!!
17/7/2007 12:16:40
Ciao, avrei bisogno di un aiuto:
ho inserito una mappa sul mio sito, ma vorrei ora raggruppare i markers, come posso fare?
Ah la mappa che ho richiamato è quella de "Le mie Mappe" nell'account google.
www.publycitta.com
Grazie
17/7/2007 12:31:01
Se le posizioni dei markers le prendi da un database puoi fare una query in modo che a un certo livello di zoom mostri i risultati raggruppati per range di cap o range di coordianate. C'è un controllo per gestire i markers e i livelli di zoom.
http://www.google.it/apis/maps/documentation/#Marker_Manager_Examples
Se no per 'le mie mappe' dai un'occhio alla documentazione delle Mapplets:
Documentazione mapplets
Sinceramente non sono ancora riuscito a studiarmi tutte le funzioni.
24/7/2007 17:11:18
Grazie provo a guardare il link e poi ti faccio sapere
27/8/2007 21:42:29
Ho avuto problemi con questo script, sia scaricandolo che copiandolo e incollandolo (lo faccio sempre prima di testare gli script), ho ricevuto l'errore "Via Rosmini". ecc. not found.
27/8/2007 23:24:55
@Fabio2:
Le 2 cose che mi vengono in mente per cui possa non funzionare sono:
- Hai creato una API key per il sito in cui hai inserito il codice (specificando la cartella) e inserito la api key al posto di INSERIRE_QUI_LA_API_KEY nel codice?
- Hai inserito la via in modo corretto ad es.:
Via del viminale, 00184 Roma (RM), Italy
fammi sapere se il problema fosse dovuto ad altro
7/4/2008 15:48:39
Ciao,
ti volevo ringraziare per lo script , è proprio quello che cercavo!! solo una cosa, ..ma se volessi inserire + di una mappa nella stessa pagina come posso fare ?
ho provato richiamandomi la funzione ShowAddress + di una volta ..ma nulla,.. sicuro sono io che sbaglio .. sono praticamente un dilettante.
grazie mille!!
ciao
14/4/2008 16:28:25
ciao a tutti volevo vedere qlc esempio di kml,anzi come faccio ad estrarre dati dal data base sqlserver vome file kml e li do in pasto a google maps.
15/4/2008 11:41:59
E' possibile far visualizzare il fumetto con l'indirizzo ma far visualizzare il segnaposto in base alle coordinate (e non alla via che c'è nel fumetto)?
22/5/2008 23:07:47
salve, funziona tutto benissimo grazie.. ma non ho trovato come mettere il rettangolino con il 'navigatore' in basso a destra... sai aiutarmi?
23/2/2009 13:00:58
Ciao, è possibile anche aggiungere la street view di un determinato posto se è disponibile?
27/11/2009 15:46:55
..anch'io volevo sapere se è possibile inserire direttamente l'opzione street view!! ne sapete qualcosa ??
16/12/2009 10:45:38
Ciao, volevo sapere come è possibile inserire più punti nella stessa mappa per identificare, ad esempio, indirizzi presi da un database.
Grazie
Feed Rss
2/5/2007 18:49:58
Ciao, volevo ringraziarti x l'ottimo post che hai fatto, solo volevo segnalarti che quando vado ad inserire il segnaposto mi dice che "point" non è definito...come faccio a definire point?? grazie ancora
Mario