Width and height of the Google map

javascript html css google-maps

10,714

If the div map is inside other div (eg: container) all the parent div must have an height and width setted .. in your case the

<div class="container">

is not setted

try this way

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

code snippet:

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>

10,714

Author by

imadfooki fooki

Updated on June 25, 2022

Comments

imadfooki fooki almost 2 years

I am trying to Set the Width and the height of the google map. I want to make it larger on the html page. I am trying to change the styles but the widht and height of the maps is not changing. it seems that my styles are not affecting the map. Can anyone help me to fix the issue

Here is the code

        <!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>