html - google maps height 100% of div parent

Question

Welcome To Ask or Share your Answers For Others

html - google maps height 100% of div parent

asked Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - google maps height 100% of div parent

Is it possible make a google map height 100% of the parent div? I noticed that with the height 100%, the map is not visible, but if I add the height of the div with the map in pixel the map is correctly visualize. is there some tricks to achieve the map 100% of the parent div? this doesn't works

<div class="block halfrect">
    <div id="map" style="height:100%;"></div>
</div>

this works

    <div class="block halfrect">
        <div id="map" style="height:590px;"></div>
    </div>

any idea?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-17T00:50:13+0000

reference: Mike Williams' Google Maps Javascript API v2 tutorial page: Using a percentage height for the map div

If you try to use style="width:100%;height:100%" on your map div, you get a map div that has zero height. That's because the div tries to be a percentage of the size of the <body>, but by default the <body> has an indeterminate height. There are ways to determine the height of the screen and use that number of pixels as the height of the map div, but a simple alternative is to change the so that its height is 100% of the page. We can do this by applying style="height:100%" to both the <body> and the <html>. (We have to do it to both, otherwise the <body> tries to be 100% of the height of the document, and the default for that is an indeterminate height.)

code snippet:

var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

}
google.maps.event.addDomListener(window, "load", initialize);

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="block halfrect" style="height:100%">
  <div id="map" style="height:100%;"></div>
</div>

Categories

html - google maps height 100% of div parent

html - google maps height 100% of div parent

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags