mappa google che si adatta allo schermo

[mbistato]

Ciao a tutti,

sto realizzando una pagina web a due colonne utilizzando il css di bootstrap.

vi posto il codice html:

<div class="col-sm-2">
			.....
		</div>
<div class="col-sm-10">			<div id="map"></div>
		</div>

e la regola css che sto applicando

#map {    width: 100%;
    height: 100%;
    }

il problema è che la mappa non viene visualizzata. Se invece specifico le dimensioni (in px) della larghezza e dell'altezza del div #map, allora la mappa viene visualizzata ma cosi facendo non si adatta allo schermo.

Qualcuno saprebbe dirmi cosa non sto considerando nel mio codice?

[Fandango Visual]

Ciao! Domanda: per incorporare la mappa nel tuo sito stai usando l'iframe di Google Maps?

[mbistato]

no non lo sto usando.

[Fandango Visual]

Potresti dirmi allora cosa stai usando come mappa? Comunque potresti usare direttamente una classe col visto che usi bootstrap..invece di mettere gli attributi css dai class="col-sm-12" per esempio

[mbistato]

sto utilizzando uno script java che inserisce la mappa nel div con id="map". L'istruzione è la seguente:

var map = new GMap2(document.getElementById("map"));

dove "map" deve essere un id e non una classe.

[quote]
invece di mettere gli attributi css dai class="col-sm-12" per esempio
[quote]

Sto già usando:

<divclass="col-sm-10">         
    <divid="map"></div>
</div>

[Fandango Visual]

<divclass="col-sm-10">         
    <divid="map"></div>
</div>

Ecco, oltre a mettere col-sm-10 al div contenitore, mettilo anche al div #map:
<div id="map" class="col-sm-12"> (12 o il numero di colonne che preferisci)

[mbistato]

Ecco, oltre a mettere col-sm-10 al div contenitore, mettilo anche al div #map:
<div id="map" class="col-sm-12"> (12 o il numero di colonne che preferisci)

Mi spiegheresti perchè non funziona se col-sm-10 lo metto solo al div contenitore? Qual'è la logica?

Ho provato cmq a fare quello che hai detto ma la mappa viene visualizzata schiacciata (praticamente una linea nella parte alta del contenitore). Questo perchè, tra le regole css del bootstrap, riscontro la presenza di questa:

min-height: 1px;

Se aumento questa misura la mappa si comincia a vedere. Io vorrei impostare l'altezza in modo tale da non dover scrollare in basso o in alto.

[Fandango Visual]

Vediamo se riesco a spiegarmi:
Se tu dai "col-sm-10" al div questo diventa 10/12 del div che lo contiene, ma se dentro questo div ne metti un altro senza dargli misure col-sm-qualcosa a quel punto questo div (che poi è #map nel tuo caso) prende le dimensioni del proprio contenuto, che è una mappa senza alcuna dimensione in questo caso, a questo punto quindi bisogna dare una larghezza anche al tuo #map e quindi bootstrap in questo ti viene incontro con le sue colonne.
Si a questo punto dovresti dargli un'altezza a mano oppure facendolo adattare a qualcosa. Da quello che ho capito tu vuoi una mappa che si adatti all'altezza del dispositivo con cui la si guarda giusto? Perché in questo caso sarebbe un po' più complicato che mettere solo delle misure a mano...

[mbistato]

Vediamo se riesco a spiegarmi:
Se tu dai "col-sm-10" al div questo diventa 10/12 del div che lo contiene, ma se dentro questo div ne metti un altro senza dargli misure col-sm-qualcosa a quel punto questo div (che poi è #map nel tuo caso) prende le dimensioni del proprio contenuto, che è una mappa senza alcuna dimensione in questo caso, a questo punto quindi bisogna dare una larghezza anche al tuo #map e quindi bootstrap in questo ti viene incontro con le sue colonne.

Questo è chiaro grazie!

Si a questo punto dovresti dargli un'altezza a mano oppure facendolo adattare a qualcosa. Da quello che ho capito tu vuoi una mappa che si adatti all'altezza del dispositivo con cui la si guarda giusto? Perché in questo caso sarebbe un po' più complicato che mettere solo delle misure a mano...

esatto. è tanto + complicato? bootstrap non mi può aiutare anche in questo caso?