Google Maps

Come rendere responsive l'iframe di Google Maps

Come rendere "responsive" l'iframe di Google Maps

Esistono molte estensioni che permettono di inserire una mappa di Google all'interno di una pagina o in modulo del sito, ma c'è sempre la possibilità - altrettanto semplice ed efficace - di utilizzare il codice fornito direttamente dal sito di Google Maps.

Anche se ai più sarà ben nota la procedura per ottenere il codice "iframe" da utilizzare per l'embedding, la riassumiamo qui a beneficio di coloro i quali non ne fossero ancora a conoscenza.

Una volta visualizzata la mappa con il punto di nostro interesse, non ci resta che cliccare sul link "condividi" che è presente nel riquadro laterale che compare a sinistra della schermata. Dopo aver cliccato sul link si aprirà una finestra con due tab: "Condividi link" e "Incorpora mappa"; naturalmente quello che ci interessa è il secondo, vale a dire "Incorpora mappa", e in questo tab comparirà il codice che potremo facilmente selezionare e copiare.

Solo una piccola osservazione. Nel tab Incorpora mappa è possibile scegliere la dimensione dell'iframe che vorremo poi utilizzare. L'impostazione di default è su "Medie" (600x450 px), ma sono presenti anche le opzioni "Piccole" (400x300 px), "Grandi" (800x600 px) e "Personalizzate", e in questo caso è l'utente che imposta direttamente larghezza e altezza dell'iframe da visualizzare.

Va da sé, ed è l'oggetto di questo breve articolo, che la mappa che verrà visualizzata nel nostro sito dopo aver incorporato l'iframe non sarà affatto responsive, non si adatterà cioé alle diverse risoluzioni dei display - come oggi siamo abituati quando utilizziamo i nostri dispositivi mobili per navigare in rete - ma creerà la fastidiosissima e giustamente vituperata barra di scorrimento orizzontale...

La soluzione è in realtà alquanto semplice e consta di un brevissimo codice CSS:

<style>
    .google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
</style>

E di un altrettanto semplicissimo codice HTML che non è altro che un TAG DIV entro il quale inserire l'iframe ricavato da Google Maps (il codice dell'esempio sottostante è quello relativo alla mappa che vedete più in basso):

<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d2689.2893582036927!2d-122.3514661!3d47.6205063!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5490151f4ed5b7f9%3A0xdb2ba8689ed0920d!2sSpace+Needle!5e0!3m2!1sit!2sit!4v1493841973826" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Questo è il risultato finale. Provate a ridimensionare la finestra del browser per accertarvi del comportamento "fully responsive" della mappa così incorporata.

© 2017 Disegnare il Web. Tutti i diritti riservati.

disegnareilweb.cloud non è collegato con joomla.org
tutti i marchi riportati appartengono ai legittimi proprietari

Cookie Policy

Privacy Policy