Blogink.it

1
GD Star Rating
loading...

Google map: calcola percorso indicazioni stradali

ed_r4d1cal marzo 29, 2010

Tool Calcola Percorso

Le informazioni contenute in questo articolo si basano su una versione delle Google Maps JavaScript API deprecata. E’ vivamente consigliato consultare il nuovo articolo per sviluppare la tua applicazione

close

Proseguendo la nostra panoramica sulle Api di Google Map in questo articolo vedremo come realizzare una mappa con puntatore (marker) implementando la funzionalità di “Calcola percorso” che permetterà all’utente di trovare facilmente le indicazioni stradali per raggiungere la destinazione specificata da un qualunque punto di partenza. Prima di proseguire con la lettura di questo articolo sarebbe preferibile leggere quest’altro articolo introduttivo.

1. Registrare una API key

Il primo passo da effettuare è registrare una chiave per il proprio dominio. Per questa procedura rimando al seguente articolo.

2. Import Google map API

Ottenuta la chiave la prima cosa che dobbiamo fare è importare le API sulla nostra pagina. A tal proposito basta inserire nel codice questa riga:

3. Lo script

Il codice seguente contiene il sorgente dello script che implementa la mappa con marker e la funzionalità “Calcola percorso”. Tale script va naturalmente aggiunto al codice della pagina web in cui intendiamo aggiungere la nostra mappa.

Per una questione di pulizia del codice sarebbe buona norma non copiare e incollare il codice sorgente dello script direttamente nella pagina html ma scriverlo in un file .js che successivamente viene importato nel codice html.

4. La pagina HTML

Nel body della pagina html che implementerà la mappa è necessario mettere una div per la visualizzazione della mappa, una div dove stampare le indicazioni stradali e una form dove l’utente può specificare il punto di partenza dal quale calcolare il percorso.

5. window.onload

L’ultimo passo consiste nell’inserire, all’evento window.onload della pagina html, una chiamata alla funzione initialize() che ha il compito di inizializzare la mappa.

La variabile idMap deve prendere il valore che abbiamo dato all’attributo id della div nel quale vogliamo che compaia la mappa. Allo stesso modo la variabile idPercorso prende il valore dell’id della div nel quale vogliamo che vengano stampate le indicazioni stradali.
Le variabili latitudineMarker e longitudineMarker devono invece prendere le coordinate (latitudine e longitune) del punto nel quale vogliamo che appaia il nostro marker e che dunque sarà la destinazione del percorso calcolato. Per trovare facilmente le coordinate di una determinata via rimando a questo articolo. Infine nella variabile infoMarker possiamo inserire del testo che apparirà nella tipica nuvoletta che compare al click del marker.

6. Esempio

Un esempio di quanto esposto in questo articolo è visionabile qui.

Tool Calcola Percorso

GD Star Rating
loading...

Google map: calcola percorso indicazioni stradali, 2.0 out of 5 based on 2 ratings

Comments (1)

Lascia un commento


codice di controllo

Loggati nel tuo account

Non riesco a ricordartiPassword ?

Registrati per questo sito!