{"id":1056,"date":"2012-03-15T00:01:25","date_gmt":"2012-03-14T23:01:25","guid":{"rendered":"http:\/\/www.manuelmarangoni.it\/sir-bit\/?p=1056"},"modified":"2016-01-22T17:22:27","modified_gmt":"2016-01-22T16:22:27","slug":"google-maps-php-trasformare-un-indirizzo-in-coordinate-latitudine-e-longitudine","status":"publish","type":"post","link":"https:\/\/www.manuelmarangoni.it\/sir-bit\/1056\/google-maps-php-trasformare-un-indirizzo-in-coordinate-latitudine-e-longitudine\/","title":{"rendered":"Google Maps, PHP – Trasformare un indirizzo in coordinate (latitudine e longitudine)"},"content":{"rendered":"
\"Google<\/a>

Ecco come apparir\u00e0 la nostra google maps una volta caricato l’indirizzo di un utente<\/p><\/div>\n

Nell’articolo precedente<\/a> abbiamo visto come \u00e8 possibile aggiornare latitudine e longitudine semplicemente cliccando su un punto della mappa o trascinando il marker<\/em> alla posizione voluta.<\/p>\n

Oggi vi presento uno script pi\u00f9 completo che, oltre a quanto detto sopra, ci dar\u00e0 la possibilit\u00e0 di convertire un indirizzo fisico in coordinate con la semplice pressione di un tasto<\/strong>. Una volta recuperate le coordinate in questo modo, saranno aggiornati anche gli input che contengono le nuove latitudine e longitudine. Trattandosi di un semplice form, potrete poi gestirlo a vostro piacimento (per esempio salvarlo nel database).<\/p>\n

Per lo scopo sar\u00e0 utile aver letto l’articolo precedente, perch\u00e9 le nozioni spiegate non saranno ripetute qui ma soltanto riprese: si dar\u00e0 quindi per assodato il fatto di aver compreso il funzionamento del javascript per creare l’evento “aggiorna coordinate in caso di click sulla mappa o di trascinamento del marker”. Si tratta comunque di un codice fisso e se non avete necessit\u00e0 di personalizzarlo, anche in questo caso potete limitarvi a scaricare lo script<\/strong> e a modificarne solo la struttura grafica.<\/p>\n

Funzionamento dello script<\/h2>\n

Lo script \u00e8 commentato dove serve. Nel codice sar\u00e0 adoperato un misto di html, javascript, jquery, php e mysql.
\nPer quanto riguarda il php e il mysql, sono richieste soltanto conoscenze di base: uso delle variabili, come connettarsi a un database di tipo mysql e recuperare i dati da una tabella. Per chi avesse poca dimestichezza con l’interazione php-mysql, \u00e8 a disposizione un articolo di base dettagliato<\/a>.<\/strong><\/p>\n

La completa comprensione dello script richiede, naturalmente, una conoscenza approfondita del javascript e delle api di Google Maps, ma se quello che cercate \u00e8 un codice pronto da usare vi baster\u00e0 prenderlo cos\u00ec com’\u00e8 e cambiare la grafica per adattarla al vostro sito.<\/p>\n

Vediamo in breve le funzionalit\u00e0<\/strong> che lo script vi metter\u00e0 a disposizione:
\n– possibilit\u00e0 di caricare la pagina con una mappa predefinita
\n– possibilit\u00e0 di cambiare le coordinate (latitudine e longitudine) con un click sulla mappa o trascinando il marker<\/em>; gli input saranno di conseguenza aggiornati
\n– possibilit\u00e0 di scrivere un indirizzo e di trasformarlo in coordinate alla pressione di un tasto, aggiornando la mappa<\/p>\n

All’interno dello zip troveremo<\/strong> sei file:
\n– index.php<\/code> : la pagina principale, che richiamer\u00e0 tutti gli altri file. Al suo interno troveremo dunque il form, la mappa stampata e i campi di input.
\n– config.inc.php<\/code>: contiene i dati per la connessione al database.
\n– jquery.js<\/code>: include le librerie JQuery, necessarie per gli aggiornamenti in tempo reale degli input.
\n– google_maps.js<\/code>: contiene le funzioni javascript che si preoccupano di interagire con la Google Maps. E’ il cuore dello script.
\n– style.css<\/code>: il foglio di stile per formattare l’aspetto del form e della mappa.
\n– utenti.sql<\/code>: \u00e8 la tabella degli utenti, che potete importare nel vostro database.<\/p>\n\n

Download script<\/h2>\n
\n
\"[JAVASCRIPT,<\/div>\n
Pagina diretta alla scheda e al download del codice<\/a><\/strong><\/div>\n <\/div>\n
<\/div>\n

Le basi: inclusioni e database<\/h2>\n

Nel file index.php<\/code> dobbiamo prima di tutto includere i file di base e cio\u00e8 i file config.inc.php<\/code>, jquery.js<\/code>, style.css<\/code> e google_maps.js<\/code>. Dell’ultimo ci occuperemo in seguito: per adesso ci basta sapere che contiene il javascript che abbiamo visto nell’articolo precedente (messo per l’appunto in questo js a parte per comodit\u00e0), con l’aggiunta di una funzione.
\nDobbiamo inoltre richiamare le api di Google Maps<\/strong>, sempre come javascript. Nel complesso sar\u00e0 qualcosa di questo tipo:<\/p>\n

\n\n\n\n
\n
1\r\n2\r\n3\r\n4<\/pre>\n<\/td>\n
\n
<<\/span>link rel=<\/span>\"stylesheet\"<\/span> type=<\/span>\"text\/css\"<\/span> href=<\/span>\"style.css\"<\/span>><\/span>\r\n<<\/span>script type=<\/span>\"text\/javascript\"<\/span> src=<\/span>\"jquery.js\"<\/span>><\/<\/span>script><\/span>\r\n<<\/span>script type=<\/span>\"text\/javascript\"<\/span> src=<\/span>\"http:\/\/maps.googleapis.com\/maps\/api\/js?sensor=false\"<\/span>><\/<\/span>script><\/span>\r\n<<\/span>script type=<\/span>\"text\/javascript\"<\/span> src=<\/span>\"google_maps.js\"<\/span>><\/<\/span>script><\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
L’unica considerazione va fatta per il database. Dovete creare una semplice tabella chiamata “utenti”, il cui scopo sar\u00e0 di elencare gli utenti che hanno accesso al sito. A ogni utente sar\u00e0 associato un indirizzo fisico e le coordinate latitudine e longitudine per trovare quell’indirizzo sulla mappa.
\nNello specifico, la tabella avr\u00e0 almeno questi campi<\/strong>:
\n– id (autoincrementale e univoco)
\n– indirizzo
\n– citta
\n– cap
\n– provincia
\n– lat : conterr\u00e0 la latitudine dell’indirizzo
\n– lng : conterr\u00e0 la longitudine dell’indirizzo
\nDa notare che i quattro campi dell’indirizzo potrebbero essere riuniti in un unico campo (va modificato di conseguenza lo script). Qui sono distinti per questione di efficienza: spesso, infatti, nei siti si richiede di specificare ogni singolo campo.<\/p>\n
Assumiamo di prendere il primo utente (id=1) e di estrarre inizialmente i suoi dati dal database.<\/p>\n
Index.php<\/h2>\n
Il form della pagina conterr\u00e0 i due campi input destinati a mostrare la latitudine e la longitudine. Inoltre, saranno presenti i quattro campi input visti sopra (indirizzo, citt\u00e0, cap e provincia). Tutti questi input dovranno avere associato un id<\/strong>, grazie al quale potremmo aggiornare i loro valori. Saranno cio\u00e8 di questa forma:<\/p>\n\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4<\/pre>\n<\/td>\n
\n
<div<\/span> class<\/span>=<\/span>\"blocco\"<\/span>><\/span>\r\n    <div<\/span> class<\/span>=<\/span>\"nome_campo\"<\/span>><\/span>Indirizzo<\/<\/span>div<\/span>><\/span>\r\n    <input<\/span> type<\/span>=<\/span>\"text\"<\/span> name<\/span>=<\/span>\"indirizzo\"<\/span> id<\/span>=<\/span>\"indirizzo\"<\/span> value<\/span>=<\/span>\"<?php if(isset($row['indirizzo'])) echo $row['indirizzo'];?><\/span><\/span>\" class=\"input\" \/>\r\n<\/<\/span>div<\/span>><\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Il valore $row['indirizzo']<\/code> deriver\u00e0 dai dati dell’utente che abbiamo estratto da database (se non \u00e8 vuoto).
\nCome potete vedere nello script, sotto agli input per l’indirizzo e prima di stampare la Google Maps, si trova un pulsante:<\/p>\n
\n\n\n\n
\n
1<\/pre>\n<\/td>\n
\n
<<\/span>input type=<\/span>\"button\"<\/span> value=<\/span>\"Ricarica la mappa\"<\/span> class<\/span>=<\/span>\"input\"<\/span> onclick=<\/span>\"codeAddress( $('#indirizzo').val()+', '+$('#citta').val()+' '+$('#cap').val()+' '+$('#provincia').val())\"<\/span>><\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
A questo \u00e8 associato un evento JQuery, che sar\u00e0 richiamato alla pressione del pulsante stesso. In pratica, al click, recupereremo i valori dei quattro campi input e la funzione codeAddress()<\/code> si occuper\u00e0 di convertirli in latitudine e longitudine<\/strong> (esamineremo dopo questa funzione).<\/p>\n
Ci resta da analizzare le varie condizioni che stabiliscono, di volta in volta, i valori della latitudine e longitudine, necessarie per aggiornare la mappa. Il codice \u00e8 il seguente:<\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n21\r\n22\r\n23\r\n24\r\n25\r\n26\r\n27\r\n28\r\n29\r\n30\r\n31\r\n32\r\n33\r\n34\r\n35\r\n36<\/pre>\n<\/td>\n
\n
<?php<\/span>\r\n\/\/ se lat e lng sono state salvate su db, vengono prese di default;<\/span>\r\nif<\/span>(<\/span>$row<\/span>[<\/span>'lat'<\/span>]<\/span>!=<\/span>\"\"<\/span> and $row<\/span>[<\/span>'lng'<\/span>]<\/span>!=<\/span>\"\"<\/span>)<\/span>{<\/span>?><\/span>\r\n\t<script type=\"text\/javascript\">\r\n\tvar lat='<?php echo <\/span>$row<\/span>[<\/span>'lat'<\/span>]<\/span>?><\/span>';\r\n\tvar lng='<?php echo <\/span>$row<\/span>[<\/span>'lng'<\/span>]<\/span>?><\/span>';\r\n\t$(window).load(function(){\r\n\t\tinitialize();\r\n\t});\r\n\t<\/script>\r\n<?php<\/span>\r\n\r\n\/\/ se non esistono, centro la mappa in base all'indirizzo<\/span>\r\n}<\/span>elseif<\/span>(<\/span>isset<\/span>(<\/span>$row<\/span>[<\/span>'citta'<\/span>]<\/span>)<\/span> and $row<\/span>[<\/span>'citta'<\/span>]<\/span>!=<\/span>''<\/span>)<\/span>{<\/span>?><\/span>\r\n\t<script type=\"text\/javascript\">\r\n\t\tvar address=\"<?php echo <\/span>$row<\/span>[<\/span>'indirizzo'<\/span>]<\/span>.<\/span>\", \"<\/span>.<\/span>$row<\/span>[<\/span>'citta'<\/span>]<\/span>.<\/span>\" \"<\/span>.<\/span>$row<\/span>[<\/span>'provincia'<\/span>]<\/span>?><\/span>\";\r\n\t\t$(window).load(function(){\r\n\t\t\tinitialize();\r\n\t\t\tcodeAddress(address);\r\n\t\t});\r\n\t<\/script>\r\n<?php<\/span>\r\n\r\n\/\/ se non esiste nemmeno l'indirizzo, setto la mappa in un indirizzo di default<\/span>\r\n}<\/span>else<\/span>{<\/span>?><\/span>\r\n\t<script type=\"text\/javascript\">\r\n\t\tvar lat='0';\r\n\t\tvar lng='0';\r\n\t\tvar address=\"verona, italia\";\r\n\t\t$(window).load(function(){\r\n\t\t\tinitialize();\r\n\t\t\tcodeAddress(address);\r\n\t\t});\r\n\t<\/script>\r\n<?php<\/span> }<\/span>?><\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
1) La prima condizione si verifica se nei dati estratti dal database troviamo i campi lat<\/code> e lng<\/code> non vuoti, cio\u00e8 se all’utente sono gi\u00e0 state salvate in precedenza delle coordinate. In questo caso le coordinate per inizializzare la mappa all’apertura della pagina risultano essere esattamente quelle del database.<\/p>\n
2) La seconda condizione si verifica nel caso in cui si \u00e8 premuto sul pulsante Ricarica la mappa<\/code>: in questo caso viene preso l’indirizzo fisico dei quattro input, che viene passato nella funzione codeAddress()<\/code>, la quale lo convertir\u00e0 in nuove coordinate (la mappa sar\u00e0 aggiornata in base a queste).<\/p>\n
3) Infine, la condizione di default prende un indirizzo di base da noi stabilito: nel nostro caso “Verona”. Sar\u00e0 passato nello stesso modo del punto 2. Questa condizione, quindi, si verificher\u00e0 anche all’apertura della pagina nel caso in cui l’utente estratto dal database abbia i campi lat<\/code> e lng<\/code> vuoti.<\/p>\n
Google_maps.js<\/h2>\n
Le funzioni presenti nel javascript sono fondamentalmente quelle che abbiamo visto nell’articolo precedente. Come noterete, per\u00f2, nella funzione initialize()<\/code> (che sar\u00e0 richiamata in index.php<\/code>) \u00e8 stata aggiunta questa riga:<\/p>\n
\n\n\n\n
\n
1<\/pre>\n<\/td>\n
\n
geocoder =<\/span> new<\/span> google.maps<\/span>.Geocoder<\/span>(<\/span>)<\/span>;<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Il Geocoder \u00e8 la chiave che ci permette di convertire un indirizzo civico in latitudine e longitudine<\/strong>, richiamando le api di Google Maps. Senza di questa, otterremo un errore nel codice del browser che ci impedir\u00e0 di caricare la mappa.
\nCon questa riga, dunque, inizializzeremo l’oggetto geocoder<\/code> e potremmo richiamare dove serve la funzione codeAddress()<\/code> (punti 2 e 3 delle condizioni nell’index.php<\/code>). Il codice:<\/p>\n
\n\n\n\n
\n
1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13<\/pre>\n<\/td>\n
\n
\/\/ funzione che trasforma un indirizzo in coordinate, e le imposta sulla mappa e negli input<\/span>\r\nfunction<\/span> codeAddress(<\/span>address)<\/span> {<\/span>\r\n\tgeocoder.geocode<\/span>(<\/span> {<\/span> 'address'<\/span>:<\/span> address}<\/span>,<\/span> function<\/span>(<\/span>results,<\/span> status<\/span>)<\/span>{<\/span>\r\n\t\tif<\/span>(<\/span>status<\/span> ==<\/span> google.maps<\/span>.GeocoderStatus<\/span>.OK<\/span>)<\/span>{<\/span>\r\n\t\t\tmap.setCenter<\/span>(<\/span>results[<\/span>0<\/span>]<\/span>.geometry<\/span>.location<\/span>)<\/span>;<\/span>\r\n\t\t\tmarker.setPosition<\/span>(<\/span>results[<\/span>0<\/span>]<\/span>.geometry<\/span>.location<\/span>)<\/span>;<\/span>\r\n\t\t\t$(<\/span>'#coord_lat'<\/span>)<\/span>.val<\/span>(<\/span>results[<\/span>0<\/span>]<\/span>.geometry<\/span>.location<\/span>.lat<\/span>(<\/span>)<\/span>)<\/span>;<\/span>\r\n\t\t\t$(<\/span>'#coord_lng'<\/span>)<\/span>.val<\/span>(<\/span>results[<\/span>0<\/span>]<\/span>.geometry<\/span>.location<\/span>.lng<\/span>(<\/span>)<\/span>)<\/span>;<\/span>\r\n\t\t}<\/span>else<\/span>{<\/span>\r\n\t\t\talert<\/span>(<\/span>\"Geocode ha rilevato questo errore: \"<\/span> +<\/span> status<\/span>)<\/span>;<\/span>\r\n\t\t}<\/span>\r\n\t}<\/span>)<\/span>;<\/span>\r\n}<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Il metodo usato \u00e8 molto simile al solito settaggio delle coordinate: cambia soltanto l’uso di funzioni adatte per convertire l’indirizzo in coordinate.
\nOltre a centrare la mappa con le nuove coordinate, notiamo anche come aggiorniamo gli input che hanno l’id coord_lat<\/code> e coord_lng<\/code> tramite JQuery: assumeranno, infatti, i valori delle nuove latitudini e longitudini.<\/p>\n
Link esterni<\/em><\/strong><\/div>\n
Documentazione ufficiale di Google Maps<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Uno script completo da scaricare che mostra come convertire un indirizzo immesso in coordinate adatte per la google maps, aggiornabili con un click sulla mappa.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[78],"tags":[8,52,12,11,4,6],"class_list":["post-1056","post","type-post","status-publish","format-standard","hentry","category-php-mysql","tag-google","tag-google-maps","tag-javascript","tag-jquery","tag-php","tag-script","cat-78-id"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/posts\/1056"}],"collection":[{"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/comments?post=1056"}],"version-history":[{"count":15,"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/posts\/1056\/revisions"}],"predecessor-version":[{"id":2293,"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/posts\/1056\/revisions\/2293"}],"wp:attachment":[{"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/media?parent=1056"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/categories?post=1056"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.manuelmarangoni.it\/sir-bit\/wp-json\/wp\/v2\/tags?post=1056"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}