Script ajax: Visualizzare sul proprio sito un indirizzo con Google maps

   difficoltà:  script script script script script

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&amp;v=2.x&amp;key=INSERIRE_QUI_LA_API_KEY" type="text/javascript"></script>
<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>
La funzione load() la abbiamo già spiegata qui, carichiamo la mappa e la centriamo su Roma, zoom 5, quindi visualizziamo tutta l'Italia.
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);
map.addOverlay(marker);
E addirittura un fumetto con il nome del posto:
marker.openInfoWindowHtml('Ristorante xxxx');
o della via:
marker.openInfoWindowHtml(address);


Social:


Donazione:
Se questo script ti grave; stato utile e ti ho fatto risparmiare tempo e denaro fai una
qualsiasi cifra è ben accetta! 1€, 3€, 5€ ,10€, 50€ ;-) fai te!


Permalink: Tag:
script   ajax   google   maps   mappa  
Script Simili: Permalink: Link utili:
Tools:
Feed RSS     Download  
Vota:



Commenti


  Mario

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

  Fabio

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.

  Mario

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

  Fabio

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)

  daniele

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!

  Fabio

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);


  daniele

8/5/2007 13:56:47

fantastico!
grazie... tra l'altro è pure divertente!

  daniele

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?

  Fabio

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

  Ste

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?


  Fabio

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.

  daniele

10/5/2007 14:26:56

per le doppie mappe ho trovato...

doppie mappe




  Ste

10/5/2007 16:34:10

Grazie! ci darò un'occhiata!

  Roberta

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à!!!

  Fabrizio

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

  Fabio

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.


  Fabrizio

24/7/2007 17:11:18

Grazie provo a guardare il link e poi ti faccio sapere

  Fabio2

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.

  Fabio

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

  Marco

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

  mocadada

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.


  mocadada

14/4/2008 16:30:18

nessuno puoi aiutarmi?


  Larry

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)?

  daniela

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?

  Luca

23/2/2009 13:00:58

Ciao, è possibile anche aggiungere la street view di un determinato posto se è disponibile?

  manlio

27/11/2009 15:46:55

..anch'io volevo sapere se è possibile inserire direttamente l'opzione street view!! ne sapete qualcosa ??

  Giò

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

  Riccardo

7/5/2010 16:55:57

Ciao, complimenti per lo script.E' molto utile.
non ho molta esperienza, avevo bisogno di chiederti come spostare lo script all'interno di una pagina web,va aggiunto qualcosa nel codice html per posizionarlo in una determinata posizione?

Grazie



Lascia un commento


Codice di controllo*:
Nome*:
Email/Link:
Testo*:
 
I campi contrassegnati con * sono obbligatori.