[JAVASCRIPT, JQUERY, PHP] Google Maps – Trasformare un indirizzo in coordinate di longitudine e latitudine

Descrizione

Uno script per caricare una Google Map con indirizzo pre-impostato, che sarà poi modificato in tempo reale attraverso due azioni possibili:

• trascinando il marker
• cliccando su un punto qualsiasi della mappa
• digitando un indirizzo civico attraverso un form

In quest’ultimo caso, l’utente dovrà compilare i campi input di un form: indirizzo, città, CAP e provincia. All’invio del form, l’indirizzo sarà trasformato in coordinate di longitudine e latitudine.

A ogni modifica – trascinamento del marker, click su un punto o invio del form – la Google Map sarà ricaricata con il nuovo indirizzo e i campi di input nascosti che tengono traccia di latitudine e longitudine saranno aggiornati (in caso di errore nell’indirizzo inserito comparirà un alert).

Note

I campi input del form possono essere uniti in un solo campo input dove l’utente dovrà digitare l’indirizzo completo. Il codice, naturalmente, va modificato di conseguenza.

L’esempio presuppone la connessione a un database MySQL, nel quale deve essere presente la tabella contenente i dati degli utenti e i loro indirizzi civici (il dump è presente nello script da scaricare). Una volta inviato l’indirizzo tramite form, l’indirizzo sarà salvato in questa tabella e la pagina ricaricherà la mappa.

Release

3 marzo 2012
Data di prima pubblicazione.

Download

Composizione dello script

Si compone di una cartella contenente i seguenti file:

• utenti.sql: contiene il dump da importare in un database MySQL, che genera la tabella degli utenti con un utente d’esempio.
• index.php: la pagina principale, attraverso cui sono richiamate tutte le altre. Questo file stampa a video il form per inviare l’indirizzo civico da convertire e da salvare nel database; inoltre stampa la Google Map sulla quale si potrà agire per cambiare direttamente l’indirizzo.
• config.inc.php: il file con le variabili di configurazione per accedere al database.
• style.css: un foglio di stile minimale per la stampa a video del form e della mappa.
• jquery.js: il classico file di JQuery, versione 1.7.1, scaricato dal sito ufficiale.
• google_maps.js: contiene le funzioni per inizializzare la mappa e per trasformare un indirizzo civico in coordinate di latitudine e longitudine.

Approfondimento

Vai all'articolo di approfondimento dello script