Auto resize a Google Map to fit in the content (Gmap & Responsive Web Design)

(I don’t have the time to translate this thing, sorry, but it’s a quite easy solution)

Un paio di appunti veloci che mi consentono di riprendere a parlare

Sto sviluppando siti web in html5, css3 e sono ancora in fase di studio del cosiddetto Adaptive Web o, ancora meglio, Responsive Web Design (leggere articolo su A List Apart, ne esiste anche la traduzione italiana) con tutte le varie problematiche tecniche che comporta.

Mi sono trovato a dover inserire una mappa di google all’interno di una pagina contatti, ma impostando dimensioni fisse – soprattutto in larghezza – andava a perdersi il concetto di “Responsive”. Avendo fatto un po’ di ricerche in rete c’era chi parlava di Api, javascript e altri marchingegni che andavano soltanto ad appesantire la struttura.
Soluzione? Really easy.

Impostare larghezza a 100% per l’Iframe contenente la Gmap. Riadattate il vostro layout Responsive. Done.

Resume for english speakers:

– do you have a responsive layout?
– do you want to insert a Google Map and auto resize it to fit in your layout?
– set iframe width to 100% (note: you can’t set a % height, you’ve to set a fixed height – example: 350px)
– done.

Lascia un Commento

XHTML: Puoi usare questi tag: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>