Personalizzare la propria mappa
Scritto da Gabriele Rocca il 28 Giu 2006 | Categoria: API How to
Una volta integrata Google Maps ad una pagina web come descritto nel post precedente “Come aggiungere Google Maps ad una pagina Web”, possiamo personalizzarla a nostro piacimento, aggiungendo tutti i servizi che ci interessano. Per esempio, se volessimo inserire dei marker alla nostra mappa, è sufficiente modificare la funzione load () vista precedenza aggiungendo alcune righe di comando:
function load()
{
if (GBrowserIsCompatible()) {
// Come nel post precedente creiamo la mappa, la centriamo
// e aggiungiamo dei controlli
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(45.068150,7.688050), 10,G_HYBRID_MAP);
// Funzione che crea il Marker a cui vengono passati il punto e la
// descrizione
function createMarker(point, description) {
// Crea il marker nel punto che viene passato
var marker = new GMarker(point);
// Aggiunge al marker una finestra HTML in cui viene messa la
// descrizione
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(description);
});
return marker;
}
// Aggiunge il Marker "Prova Via di prova 10100 Torino, Italia"
// alle coordinate latitudine 45.068150 e longitudine 7.688050
map.addOverlay(createMarker(new GLatLng(45.068150,7.688050), "<b>Prova</b><br><br>Via di prova 10100 Torino, Italia"));
}
}
Per coloro che possiedono un minimo di conoscenze di pagine Web e desiderano ulteriormente personalizzare la propria mappa, è possibile aggiungere molte altre opzioni seguendo le indicazioni mostrate nella documentazione ufficiale di Google Map.
In pochissimo tempo, è possibile realizzare una mappa come questa.
Popularity: 39% [?]
Articoli collegati
Esiste qualche modo interessante per recuperare le coordinate x ed y direttamente immettendo città , via, numero oppure bisogna conoscerle a priori?
Si, è possibile recuperare le coordinate geografiche di latitudine e longitudine grazie alla funzione geocoder () di google. Nell’esempio pratico che avevamo riportato nel post, era infatti incluso un form che ricercava un luogo indicandone l’indirizzo. Per poterlo fare è necessario per prima cosa modificare lo script che richiama la libreria di googlemaps dove viene inserita la KEY:
<script src="http://maps.google.com/maps?file=api&v=2.x&key= INSERISCI_LA_KEY" type="text/javascript"></script>
Sucessivamente si deve aggiungere nella funzione load () la chiamata al geocoder:
function load() {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(45.068150,7.688050), 17,G_HYBRID_MAP);
// Richiama il geocoder
geocoder = new GClientGeocoder();
}
Ora è sufficiente realizzare una funzione che sfrutti le proprietà di ricerca del geocoder:
function showLocation() {
<!--se si vuole passare l'indirizzo tramite un form sono necessarie entrambe le prossime righe, altrimenti è sufficiente la seconda ma bisogna passare la variabile address alla funzione showLocation(address)//-->
var address = document.forms[0].q.value;
geocoder.getLocations(address, addAddressToMap(point));
}
La funzione showLocation() mostrata in questo esempio è richiamata quando si fa un click sul pulsante “cerca” di un form. Questa grazie al geocoder trova le coordinate dell’indirizzo e richiama la funzione addAddressToMap che, nel caso in cui l’indirizzo sia stato trovato, crea un marker.
Una possibile implementazione di quest’ultima può essere:
function addAddressToMap(point) {
//Verifica se il geodecoder ha trovato una soluzione
if (!point || point.Status.code != 200) {
alert("Sorry, we were unable to geocode that address");
} else {
//Se ha trovato una soluzione crea il marker
marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
map.setCenter( point, 13,G_HYBRID_MAP);
}
}
}
Infine ecco la struttura del body:
<body onload="load()">
<!--Crea un form in cui immettere l'indirizzo da ricercare //-->
<form action="#" onsubmit="showLocation(); return false;" align="center">
<div id="form">
<b>Cerca una località:</b>
<input type="text" name="q" value="Via Conte Giambattista Bogino, 9, 10123 Torino, Italy" class="address_input" size="40" />
<input type="submit" name="find" value="Cerca" />
</div>
</form>
<div id="map" style="width: 600px; height: 450px; top: 20px; left: 300px;">Il tuo Browser non supporta Google Maps o non è attivato Javascript</div>
</body>
L’ho provato anch’io e funziona perfettamente!!!
ma si puo creare anche un percorso con google maps
ess:
parto da ………..
vado a………..
??
e se si
che informazione mi da riguardo questo
mi puo dare la distanza??
o qualche altro opzione?.
datemi una risposta
e inportante
thix
Si, il form può essere ripetuto per due o più punti in modo da avere un punto di partenza e uno d’arrivo.
Inoltre può essere calcolata la distanza in linea d’aria (usando formule di geometria) e possono essere personalizzati i due (o più) marker, aggiungendo icone o descrizioni diverse.
Nel post “Inserire icone personalizzate assegnandole ad un marker” abbiamo mostrato come personalizzare le icone.
Le possibilità e gli utilizzi sono pressochè infiniti.
Scusate l’ignoranza, io vorrei inserire le coordinate iniziali di una città nel lazio chiamata terracina! ho provato a controllare le coordinate su google hearth e ho cambiato il codice su map.setCenter ma quando vado a provare non mi cambia niente. Mi potete dare una mano?
Ho risolto!!
Ciao Gabriele, cercavo appunto anche io di personalizzare le icone nelle mappe ma il tuo link qui sopra porta ad una pagina che nn c’è più.
Cortesemente, come potrei recuperare questa informazione?
Grazie tante
ALessandro
la pagina che nn c’è più è: “Inserire icone personalizzate assegnandole ad un marker”
Grazie per la segnalazione Alessandro, purtroppo avevo erroneamente cancellato il post ma ora l’ho ripristinato.
Comuque se ti interessa approfondire la personalizzazione di un marker ti consiglio di dare un’occhiata al post “Tutto sulle icone di Google Maps“.
salve,
qualcuno sa se esiste qualche funzione che dati due indirizzi restituisce la distanza ??
bye
Ciao, ho inserito nel mio sito una mappa google dando la possibilità agli utenti di cercare un indirizzo preciso. Ora però ho un enorme problema: Se inserisco Via Alfano a Napoli su http://maps.google.it/ mi escono 3 occorrenze perchè effettivamente a Napoli ci sono 3 diverse via Alfano. Sul mio sito invece non riesco a trovare il modo di implementare il “Forse cercavi:” di google maps e quindi lo script mi ritrorna la prima occorrenza che trova. Mi potete aiutare?
Grazie
Giulia
Ciao Giulia, in realtà l’esempio di mappa che avevo realizzato sul sito al link http://etech.top-ix.org/etech/googlemap.php forniva già la soluzione al tuo problema, ma non l’avevo mai riportata in nessun mio precedente post o commento. Comunque, facendo pochissime modifiche alle funzioni che ho riportato in precedenza come risposta ad Andrea, si può risolvere il tuo problema.
Nella funzione:
function showLocation() {
<!--se si vuole passare l’indirizzo tramite un form sono necessarie entrambe le prossime righe, altrimenti è sufficiente la seconda ma bisogna passare la variabile address alla funzione showLocation(address)//-->
var address = document.forms[0].q.value;
geocoder.getLocations(address, addAddressToMap(point));
}
richiamando la funzione addAddressToMap() si passava un “point” solo (tra l’altro non so come facesse a funzionare visto che usavo point come delle coordinate!!!), ma in realtà questo è un vettore di “Placemark”.
Un Placemark contiene fondamentalmente due dati:
1) il nome dell’indirizzo
Placemark.Address2) e le coordinate del punto
Placemark.Point.coordinates[1],Placemark.Point.coordinates[0]Ora ti riporto un esempio delle modifiche da fare alle funzioni showLocation() e addAddressToMap() che ho scritto prima:
function addAddressToMap(response) {
// La funzione verifica se esiste una risposta
if (!response || response.Status.code != 200) {
alert("Sorry, we were unable to geocode that address");
} else {
// nella variabile place viene messo il primo
// Placemark mentre il secondo è identificato
// con response.Placemark[1]
place = response.Placemark[0];
// crea il Marker estraendo le coordinate e
// l'indirizzo del primo Placemark
point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
marker = new GMarker(point);
map.addOverlay(marker);
// Oltre all'indirizzo estrae anche
// il Country code (es: IT,UK ecc...)
description = place.address + '<br>' + '<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode;
map.addOverlay(createMarker(point, description));
marker.openInfoWindowHtml(description);
}
}
function showLocation() {
var address = document.forms[0].q.value;
// Nella variabile address viene messo l'indirizzo da cercare
// che viene passato alla funzione geodecoder.getLocations()
// la getLocations passa un vettore di Placemark alla funzione
// addAddressToMap se ha trovato uno o più risultati
// dell'address specificato, altrimenti passa "null"
geocoder.getLocations(address, addAddressToMap);
}
Utilizzando un ciclo for si possono estrarre tutti i Placemark trovati e mettere un marker per ciascuno o visualizzare semplicemente l’indirizzo trovato e far decidere all’utente quale scegliere.
Spero di essere stato sufficientemente chiaro.
Ciao Gabriele.
ciao ragazzi ho un problema mi sapete indicare qlc editor che funziona con google maps (Api).
Ciao Rachid,
da una rapida ricerca ho trovato che esiste un editor nella parte code di google:
http://code.google.com/gme/
che per ora è ancora in beta e l’utilizzo è limitato ad alcuni sviluppatori (tentare di provare non nuoce).
Ho trovato anche un altro editor che dovrebbe funzionare:
http://www.click2map.com/
ne esistono diverse versioni ma anche quella gratuita dovrebbe fornirti gli strumenti necessari per creare la tua mappa.
Consiglio però sempre vivamente di provare a scrivere la propria mappa “a mano” anche se non si hanno grandi competenze di HTML o JAVASCRIPT.
I post che ho scritto forniscono tutti gli strumenti per creare una propria mappa e personalizzarla partendo proprio da zero.
Inoltre se avessi dei problemi puoi sempre scrivere un commento e chiederci una risposta.
Ciao Gabriele.