wake-up-neo.com

Festlegen der Breite und Höhe von Google Maps Container DIV auf 100%

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?

cssgoogle-mapsgoogle-maps-api-3css-positiongoogle-maps-api-2
55
BBKing

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%;
}
63
Machiel

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 .

enter image description here

40
Madan Sapkota

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.

37
YaroslavS120

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>
2
Mostafa

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>
0
Naresh Chennuri

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);

0
YoniXw

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.

0
abhilashv