Ottieni le coordinate del cliente con l'API di Google Maps in JavaScript (HMTL5, CSS3 e Bootstrap)

Cosa ci serve?

a) Conoscenze di base in html, css3, javascript e bootstrap (non limitativo).
B) Un editor di codice (nel mio caso userò il testo Sublime 3).
C) Un server locale da testare (utilizzerò il server Xampp)
Iniziamo …

Passo 1

Andiamo nella directory del nostro server locale, nel mio caso "C: / xampp / htdocs /" e creeremo una nuova cartella che chiamerò "Tutorial_geolocalizzazione", all'interno di questo aggiungeremo altre 2 chiamate "Cs" sì "Js".

INGRANDIRE

Passo 2

Apriremo il nostro editor di codice lo faremo "File> Nuovo" e scriviamo una struttura html5 al suo interno.

INGRANDIRE

Quindi salviamo questo nuovo file come "index.html" nella radice della cartella "tutorial_gelocalizacion".

Passaggio 3

Scarichiamo bootstrap dalla sua pagina ufficiale e copiamo il file "Bootstrap.min.css" nella nostra cartella css.

INGRANDIRE

Passaggio 4

Torniamo al nostro editor e aggiungiamo il riferimento a questo file nel nostro "Indice.html".

INGRANDIRE

Passaggio 5

Creeremo un nuovo file e lo chiameremo "Stile.css" lo salveremo nella cartella css …

INGRANDIRE

Passaggio 6

Aggiungeremo nel index.html i riferimenti al file css creato nel passaggio precedente. Inoltre includeremo anche uno script online che contiene il API JavaScript di Google Maps.

INGRANDIRE

Passaggio 7

Dovremo anche creare un nuovo file .js dove scriveremo la funzione che farà la geolocalizzazione e mostrerà la mappa, la salveremo nella cartella "js", la chiamerò "localiza.js". Aggiungerò anche un riferimento ad esso in index.html

INGRANDIRE

INGRANDIRE

Ora completeremo il layout del nostro HTML, puoi vedere il codice nell'immagine seguente:

INGRANDIRE

Passaggio 8

Dal momento che sarà il telaio principale e il conterrà la mappa quindi dovremo controllare le dimensioni e le caratteristiche che avranno, per questo scriveremo nel nostro file "Stile.css" il seguente codice.

INGRANDIRE

Con questo diciamo al browser che il layer # map-canvas avrà un margine automatico, un'altezza di 420 pixel, posizione relativa e una larghezza del 100% del layer o div che lo contiene, in questo caso si trova all'interno di un div con la classe .container, che gli stiamo dicendo di occupare il 90% dello schermo del dispositivo e mostrarlo centrato orizzontalmente.
Se lo vediamo nel nostro browser, il risultato finora sarebbe questo …

INGRANDIRE

Finora abbiamo solo il design ma ci manca la cosa più importante, la mappa, arriviamoci…

Passaggio 9

Nel file "localiza.js" creeremo una nuova funzione che otterrà le coordinate del browser del client e indicherà la sua posizione approssimativa sulla mappa. Nel caso in cui l'API non funzioni correttamente sul client, definiremo alcune coordinate predefinite e includono anche la possibilità per il cliente di trascinare il segnaposto nella sua posizione effettiva. Spiego passo passo nel codice, vediamo…

INGRANDIRE

Poiché abbiamo i nostri file pronti, possiamo fare un test sul nostro server locale e il risultato sarebbe il seguente.

INGRANDIRE

Passaggio 10

Ora renderemo la nostra mappa adattabile ai dispositivi mobili, per raggiungere questo obiettivo torniamo al nostro file "style.css" e aggiungeremo alcuni nuovi selettori chiamati media query con essi definiremo come si comporterà il nostro design in base al dimensioni dello schermo in cui si trova la visualizzazione… Andiamoci.

INGRANDIRE

Abbiamo già tutto ciò di cui abbiamo bisogno, ora vediamo i risultati emulando i dispositivi mobili, per questo possiamo usare "Google Chrome", con la nostra applicazione aperta nel browser, facciamo clic con il tasto destro e andiamo su "Ispeziona elemento".

INGRANDIRE

Si aprirà una finestra come quella qui sotto e selezioneremo lo strumento a forma di cellulare in basso a sinistra…

INGRANDIRE

Vedrai che in alto a sinistra ci sarà un selettore con l'etichetta "Dispositivo" se mostriamo dove dice “” Possiamo vedere un elenco con i nomi dei dispositivi mobili le cui dimensioni dello schermo sono più comuni, se selezioniamo ciascuno di essi possiamo vedere come si comporterà il nostro design sugli schermi di quei dispositivi, qualsiasi errore che vediamo può essere corretto con il supporto query che abbiamo aggiunto nel nostro file "Stile.css", per questo dovremmo solo apportare le modifiche necessarie all'interno della media query che rappresenta la dimensione del dispositivo in cui rileviamo il problema …
Vediamo come appare il nostro design attuale su alcuni cellulari…

Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo