谷歌地图的宽度和高度

Question

我正在尝试设置谷歌地图的宽度和高度。我想让它在 html 页面上变大。我正在尝试更改样式，但地图的宽度和高度没有改变。看来我的风格并没有影响地图。谁能帮我解决这个问题

这里是代码

        <!DOCTYPE html>
    <html ng-app="myApp">

    <head>
        <!-- Style Sheets includes -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <style>
    html, body, #map {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    #map {
        position: relative;
    }
    </style>
        <link href="css/customstyle.css" rel="stylesheet" type="text/css">

        <!-- Script includes -->
        <script data-require="angular.js@*" data-semver="1.3.14" src="js/angular.js"></script>
        <script src="js/jquery-2.1.4.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/ui-bootstrap-tpls-0.12.0.js"></script>
        <script src="#"></script>
        <script src="https://maps.googleapis.com/maps/api/js"></script>
        <script src="data.js"></script>
        <script src="app.js"></script>
    </head>

    <body ng-controller="ApplicationController as appctrl">
        <div class="container">

<div id="map" ></div>

  </div>
 </body>

    </html>

Answer 1

如果 div 地图位于其他 div 内（例如：容器），则所有父 div 都必须设置高度和宽度。在您的情况下，

<div class="container">

未设置

试试这个方法

html, body, .container,  #map {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#map {
    position: relative;
}

代码sn-p：

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, .container,  #map {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#map {
    position: relative;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div class="container">

  <div id="map"></div>

</div>