Emulare la geolocalizzazione per lo sviluppo con Google Chrome

Nelle ultime settimane mi è capitato di lavorare ad un progetto con alcune funzionalità di ricerca basate sulle mappe di Google e la geolocalizzazione.

Lavoro principalmente con Google Chrome e quindi ho dato un’occhiata alle funzionalità di emulazione per capire se c’era la possibilità di simulare la posizione del mio client.

Lavorando in un solo ufficio, non è possibile testare tutte le situazioni legate alle possibili differenze che esistono da una piccola città come Cesena (quella in cui lavoro) ad una grande città come Milano, piena di quartieri che possono distare svariati km dal centro.

E infatti, qualche bug l’ho risolto proprio grazie all’emulazione che Google Chrome permette di fare tramite il suo emulatore della Console, vediamo come fare:

1. Apriamo la console
Per aprire la console di Chrome è possibile usare il tasto veloce alt + cmd + i su Mac o ctrl + alt + i su Windows:

 

google-chrome-developer-tools-menu

2. Attiviamo il cassetto degli strumenti per sviluppatori
Sul pannello superiore, in alto a sinistra troverete un pulsante che apre il drawer, che contiene le funzionalità di ricerca, emulazione ed altro.

 

02-open-google-chrome-developer-tools-drawer

3. Andiamo sul pannello Emulation e Sensors
Dentro al drawer, troveremo il tab Emulation, da li clicchiamo su Sensors così che potremo attivare l’emulazione della geolocalizzazione.

 

03-select-emulation-tab-of-drawer-developer-tools

4. Emuliamo la geolocalizzazione

Spuntando Emulate geolocation coordinates sarà possibile attivare l’emulazione e specificare la latitudine e la longitudine da usare per la localizzazione.

 

04-emulate-geolocation-coordinates

Arrivati a questo punto sarà necessario aggiornare la pagina sulla quale ci troviamo per rendere effettive le modifiche di geolocalizzazione con le nuove coordinate che abbiamo definito.

Se volete sapere come ottenere delle coordinate valide per simulare la geolocalizzazione date un’occhiata qui: https://support.google.com/maps/answer/18539?hl=it.