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!