Ho caricato l'API di Google Maps API v3 e stampato Google Map in div. Ma quando imposta la larghezza & altezza al 100% e auto non riesco a vedere la mappa.Imposta larghezza e altezza del contenitore di Google Maps 100%
Ecco uno snippet di codice HTML.
<!-- Maps Container -->
<div id="map_canvas" style="height:100%;width:100px;margin:0 auto;"></div>
C'è un modo per risolvere questo problema?
è necessario impostare tutti i contenitori padre ad una larghezza di 100%, se si vuole coprire l'intera pagina con esso. È necessario impostare un valore assoluto in larghezza e altezza per il div #content come minimo.
body, html {
height: 100%;
width: 100%;
}
div#content {
width: 100%; height: 100%;
}
Cosa succede se voglio solo che la mappa appaia in una parte del sito e non al 100%? @Machiel – CodeGuru
@RainbowHat specifica semplicemente la dimensione nel tuo CSS, modifica la larghezza e l'altezza dal contenuto div #. – Machiel
Per essere chiari, ogni elemento genitore dal div del contenuto (nel codice dell'OP è # map-canvas, non #content) ** deve ** avere un set larghezza/altezza specifico, sia esso relativo o esatto. Fallo e questa risposta è corretta. – Will
Se questo div è l'unica cosa sulla vostra pagina, impostare:
body, html {
height: 100%;
width: 100%;
}
http://stackoverflow.com/questions/13926371/google-map-inside-container#comment19198810_13926371 – CodeGuru
Gmap scrive posizione stile in linea rispetto al div. Sovrascriverlo con:
google.maps.event.addListener(map, 'tilesloaded', function(){
document.getElementById('maps').style.position = 'static';
document.getElementById('maps').style.background = 'none';
});
Spero che sia d'aiuto.
Impostare il contenitore della mappa in posizione rispetto al relativo. Ecco HTML.
<body>
<!-- Map container -->
<div id="map_canvas"></div>
</body>
E Semplice CSS.
<style>
html, body, #map_canvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
position: relative;
}
</style>
Testato su tutti i browser. Ecco lo Screenshot.
ho faticato molto per trovare la risposta.
Non hai davvero bisogno di fare nulla con le dimensioni del corpo. Tutto ciò che serve per rimuovere lo stile in linea dal codice mappa:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=new+york&aq=&sll=53.546224,-2.106543&sspn=0.02453,0.084543&ie=UTF8&hq=&hnear=New+York,+United+States&t=m&z=10&iwloc=A&output=embed"></iframe><br /><small><a href="https://maps.google.co.uk/maps?f=q&source=embed&hl=en&geocode=&q=new+york&aq=&sll=53.546224,-2.106543&sspn=0.02453,0.084543&ie=UTF8&hq=&hnear=New+York,+United+States&t=m&z=10&iwloc=A" style="color:#0000FF;text-align:left">View Larger Map</a></small>
rimuovere tutto lo stile in linea e aggiungere classe o ID e poi lo stile è il modo in cui ti piace.
Ho appena aggiunto lo stile in linea.
<div id="map_canvas" style="width:750px;height:484px;"></div>
E ha funzionato per me.
Pochissime persone si rendono conto della potenza del posizionamento css. Per impostare la mappa di occupare l'altezza al 100% del suo contenitore padre facciamo seguire:
#map_canvas_container {position: relative;}
#map_canvas {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
Se avete non elementi assolutamente posizionato all'interno #map_canvas_container Saranno impostare l'altezza di esso e la mappa prenderà l'esatto spazio disponibile.
Tecnica molto interessante. Sono stato un web dev per un po 'e non ero a conoscenza di questo. –
Peccato che la persona che ha downvoted questa domanda non si sia mai preoccupata di dire "perché?" ... Funziona alla grande per me – Chris
Questo ha funzionato per me.
È possibile impostare l'altezza a -webkit-fill-disponibili
<!-- Maps Container -->
<div id="map_canvas" style="height:-webkit-fill-available;width:100px;"></div>
questo lavoro per me.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#cont{
position: relative;
width: 300px;
height: 300px;
}
#map_canvas{
overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=APIKEY"></script>
<script type="text/javascript">
function initialize() {
console.log("Initializing...");
var latlng = new google.maps.LatLng(LAT, LNG);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="cont">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</div>
</body>
</html>
Qual è lo stile dell'elemento che contiene il div # gmap_canvas? – Machiel
'#content {background-color: #fff; border: solido 1px # a6a196; border-radius: 4px; -moz-border-radius: 4px; height: auto; overflow: hidden;} ' – BBKing