Ich habe Google Maps API v3 geladen und Google Map in div
gedruckt. Wenn Sie width & height auf 100% und auto einstellen, kann ich die Karte nicht sehen.
Hier ist ein HTML-Code-Snippet.
<!-- Maps Container -->
<div id="map_canvas" style="height:100%;width:100px;margin:0 auto;"></div>
Gibt es eine Möglichkeit, dieses Problem zu beheben?
Sie müssen alle übergeordneten Container auf eine Breite von 100% einstellen, wenn Sie die gesamte Seite damit abdecken möchten. Sie müssen mindestens einen absoluten Wert für Breite und Höhe für den #content div einstellen.
body, html {
height: 100%;
width: 100%;
}
div#content {
width: 100%; height: 100%;
}
Festlegen, dass Map Container relativ positioniert wird, um den Trick auszuführen. Hier istHTML.
<body>
<!-- Map container -->
<div id="map_canvas"></div>
</body>
Und einfachCSS.
<style>
html, body, #map_canvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
position: relative;
}
</style>
In allen Browsern getestet. Hier ist der Screenshot .
Sehr wenige Leute erkennen die Macht der Positionierung von CSS. Gehen Sie folgendermaßen vor, um die Karte so einzustellen, dass sie 100% Höhe des übergeordneten Containers einnimmt:
#map_canvas_container {position: relative;}
#map_canvas {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
Wenn in #map_canvas_container nicht absolut positionierte Elemente vorhanden sind, wird die Höhe des Elements festgelegt, und die Karte nimmt genau den verfügbaren Platz ein.
Diese Arbeit für mich.
<!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>
Sie können die Höhe auf -webkit-fill-available einstellen
<!-- Maps Container -->
<div id="map_canvas" style="height:-webkit-fill-available;width:100px;"></div>
Wenn Sie die Elemente Ihrer Eltern nicht beeinflussen können (wie in einer verschachtelten Komponentensituation), können Sie height: 100vh
verwenden. Dadurch wird die gesamte Fensterhöhe (= Ansicht);
Gmap schreibt die Inline-Stilposition relativ zum div. Überschreibe das mit:
google.maps.event.addListener(map, 'tilesloaded', function(){
document.getElementById('maps').style.position = 'static';
document.getElementById('maps').style.background = 'none';
});
Ich hoffe es hilft.