18 Gen Rendere responsive la mappa di Google Maps
Google Maps è una gran comodità, inutile negarlo, la possibilità di integrare gratuitamente delle mappe per geolocalizzare attività o aree specifiche è indubbiamente un’ottima risorsa per chi lavora nel digitale.
Per i siti web l’esempio più classico è quello appunto di inserire la mappa della posizione geografica di un’attività commerciale, si tratta anche di un’operazione piuttosto semplice, poiché per farlo, una volta entrati nella mappa, basta cliccare sul pulsante Condividi. A questo punto Google aprirà una finestra con due opzioni: la prima è Inviare un link nel quale fornirà un indirizzo da copiare, l’altro invece è Incorporare una mappa. Quest’utimo invece genererà un codice HTML (iframe), con tanto di possibilità di scegliere le dimensioni della mappa fra Piccole, Medie, Grandi o Personalizzate esattamente come vedete di seguito.
Questo codice è quello che, una volta copiato, servirà poi per essere integrato all’interno della nostra pagina o del nostro articolo. Tutto semplice e normale fin qui, se non fosse per il fatto che per i dispositivi mobili non sempre è possibile gestire correttamente la dimensione della mappa di Google. Anzi, diciamo proprio che in diversi casi alcuni siti quando poi vengono visualizzati da mobile mostrano una mappa che generalmente va oltre lo schermo, e solitamente il problema primario viene generato dalla larghezza della mappa anzichè dalla sua altezza.
Questo problemino lato responsive però si può risolvere facilmente con tre mosse.
Come rendere responsive la mappa di Google Maps
Partiamo dal fatto che, a prescindere dalla grandezza scelta per la vostra mappa, il codice HTML che integrerete avrà al suo interno due valori numerici che ne identificano la sua larghezza e la sua altezza, e sono rispettivamente width=”600″ ed height=”450″.
La prima mossa è quella di modificare all’interno del codice la larghezza di quella mappa sostituendo il valore che genera Google con width=”100%“, e con questa soluzione il problema della mappa responsive per alcune tipologie di siti porebbe già risolversi.
Se così non fosse però, la seconda mossa da applicare è quella di integrare un div nel codice HTML fornito da Google.
Questo div è un tag che dirà alla mappa di leggere un CSS al fine di diventare poi responsive sui dispositivi mobili. Per farlo chiameremo questo div responsive-map e lo andremo ad inserire all’inizio del codice iframe (per poi chiudere il codice con il div alla fine).
La terza ed ultima mossa, è quella di andare ad aggiungere una piccola porzione di codice nel CSS Aggiuntivo del nostro tema di WordPress:
.responsive-map {
position: relative;
padding-bottom: 75%;
padding-top: 0;
height: 0;
overflow: hidden;
}
.responsive-map iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
Il gioco è fatto, a questo punto la vostra mappa sarà responsive anche dai dispositivi mobili.
Ricapitolando le tre mosse:
- Sostituire width=”600″ con width=”100%”.
- Inserire <div class=”responsive-map”> all’inizio del codice HTML di Google e poi inserire alla fine dello stesso codice </div>.
- Aggiungere il codice CSS fornito qui sopra nel CSS Aggiuntivo del vostro tema di WordPress.
Non ci sono commenti