title: Width and height of the Google map
body: <p>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</p>
  
  <p>Here is the code</p>
  
  <pre><code>        &lt;!DOCTYPE html&gt;
      &lt;html ng-app="myApp"&gt;
  
      &lt;head&gt;
          &lt;!-- Style Sheets includes --&gt;
          &lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt;
          &lt;style&gt;
      html, body, #map {
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
      }
      #map {
          position: relative;
      }
      &lt;/style&gt;
          &lt;link href="css/customstyle.css" rel="stylesheet" type="text/css"&gt;
  
          &lt;!-- Script includes --&gt;
          &lt;script data-require="angular.js@*" data-semver="1.3.14" src="js/angular.js"&gt;&lt;/script&gt;
          &lt;script src="js/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/ui-bootstrap-tpls-0.12.0.js"&gt;&lt;/script&gt;
          &lt;script src="#"&gt;&lt;/script&gt;
          &lt;script src="https://maps.googleapis.com/maps/api/js"&gt;&lt;/script&gt;
          &lt;script src="data.js"&gt;&lt;/script&gt;
          &lt;script src="app.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body ng-controller="ApplicationController as appctrl"&gt;
          &lt;div class="container"&gt;
  
  &lt;div id="map" &gt;&lt;/div&gt;
  
    &lt;/div&gt;
   &lt;/body&gt;
  
      &lt;/html&gt;
  </code></pre>