Impostare Google Maps come background
Si vede su molti siti Google Maps impostato come background di un div o di un qualsiasi altro componente.
Su di un sito che sto sviluppando anche io ho avuto la necessità di metterlo come background.
Impostare altezza e larghezza al 100% non basta ovviamente.
Vi mostro il mio esempio, omettendo la parte Javascript di inizializzazione che è sempre la stessa.
Per il nostro scopo ci basta HTML e CSS una volta caricata la mappa.
Partendo da questo codice HTML:
<section id="dove_siamo" class="story" data-speed="10" data-type="background">
<article>
<div id="map"></div>
</article>
</section>
Basta questa semplice regola CSS:
article { width: 100%; position: absolute; text-align: center; }
#dove_siamo #map { width: 100%; height: 1000px; }
Vi ho messo il CSS che uso anche per il tag article, giusto per darvi l'idea.
Ma la regola che ci serve di più è l'ultima.
Nel mio caso ho usato il tag HTML 5 section, ma dovrebbe andare per qualsiasi altro componente.
In effetti nel CSS faccio riferimento solo all'id.
Ciao!
javascript google google maps html css section article
Commentami!