14

Si scopre ogni giorno qualcosa di nuovo! Oggi, in particolare, montando la grafica di un sito per un cliente mi sono trovato a dover rendere responsive l’iframe di Google Map.

Detto fatto! E’ sufficiente inserire il codice di Google Map all’interno di un div contenitore responsive con position relative mentre l’iframe sarà posizionato all’interno in maniera assoluta.

Esempio Google Map Responsive

/* Wrap responsive */
.googlemap_wrap  {
    position: relative;
    padding-bottom: 65.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
/* iframe posizionato in maniera assoluta */
.googlemap_wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

  1. Ciao Alessandro,
    non so se è perché nel tempo Google ha modificato il codice ma ora basta prelevarlo e si adatta automaticamente al contenitore.

    Un saluto

  2. No, non mi pare che si adatti in automatico da Google. Ho provato a incorporare sul sito una mappa stasera e se non fosse stato per l’ottimo codice di Alessandro sarebbe rimasta delle dimensioni impostate da google. Grazie Alessandro, ottima pensata.

  3. Sembra interessante, ma per chi è alle prime armi si potrebbe avere qualche riga di codice in più?
    Io dovrei inserire l’iframe in un pagina di wordpress con template responsive, ma non ho idea di dove posizionare il codice dell’iframe. Potresti iutarmi?

  4. Ciao! Ottimo codice, ma il vero problema è che la mappa non rimane centrata, rimane ancorata all’angolo sinistro in alto!

  5. Ciao, io non sono uno sviluppatore ma ho commissionato un sito e dal beckend posso modificare vari aspetti inserendo i dati in un interfaccia. Ora, ho una voce che si chiama contact us map dove c’è un pezzo di codice che inizia per inframe e che nel front end restituisce una mappa google con uno specifico indirizzo. Tu o qualcuno che legge il mio messaggio potreste indicarmi cosa devo scrivere per far comparire il mio indirizzo: via cordedda 6 Sassari coordinate 40°42’54.0″N 8°33’13.0″E?
    posso postare quello che c’è scritto di default nel mio beckend o rischio di pubblicare delle api private?

    1. Ciao Francesco,

      Tendenzialmente sconsiglio i “non tecnici” a metter mano a parti di codice del proprio sito internet. Ad ogni modo, solitamente, per ottenere il codice di inclusione mappa di google si procede come segue:

      1. Si apre google map nel browser
      2. Si cerca l’indirizzo voluto
      3. Si clicca sull’icona del menu in alto a sinistra (tre barrettine orizzontali)
      4. Si clicca su “condividi o incorpora mappa”
      5. Si clicca su “incorpora mappa”
      6. Si copia/incolla il codice presente nel campo input superiore

      Ti esorto comunque a consultare l’agenzia che ti sta seguendo per effettuare tale operazione.
      In caso non sia possibile effettua per lo meno un backup del codice attualmente presente nel campo “contact us map” in modo che se qualcosa dovesse andar storto potrai ripristinare la situazione attuale.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *