title: google maps api full screen
body: <p>Hi i'm working on a project that requires a specific full screen google map to sit between a header and footer. I'm sure the answer is quite simple but thought i'd ask anyway. The project consists of a form where users can drop markers once they've filled in their address etc, not sure if any of the customisation might have interfered or anything...</p>
  
  <p>When I've worked with the google map API in the past I'd normally just change the css height to 100% but for some reason instead of changing the size it removes the map entirely.</p>
  
  <pre><code>#map {
  height:500px;
  width:1200px;
  }
  </code></pre>
  
  <p>Here's the code.</p>
  
  <pre><code>var map;
  var marker;
  var Longitude = -1.8822221000000354;
  var Latitude = 50.72569620000001;
  var zoom = 20;
  var bounds = new google.maps.LatLngBounds();
  var markers;
  var new_marker;
  var C;
  var popupbubblepath = &lt;%= this.popupbubble.ToString() %&gt;;
  var infowindow = new google.maps.InfoWindow();
  var ib;
  
  function LoadMap() {
  
      // Create an array of styles.
      var styles = [
          {
              stylers: [
                  { saturation: -100 }, { lightness: -100 }
              ]
          },{
              featureType: "all",
              elementType: "all",
  
          }
      ];
  
      // Create a new StyledMapType object, passing it the array of styles,
      // as well as the name to be displayed on the map type control.
      //var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"});
  
      var myOptions = {
          zoom: zoom,
          center: new google.maps.LatLng(Latitude, Longitude),
          mapTypeControl: false,
          scaleControl: false,
          streetViewControl: true,
          overviewMapControl: false,
          zoomControl: true,
          mapTypeControlOptions: {
              style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
              position:google.maps.ControlPosition.LEFT_BOTTOM 
          },
          zoomControlOptions: {
              style: google.maps.ZoomControlStyle.SMALL
          },
          panControl: false,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      }
  
      map = new google.maps.Map(document.getElementById("map"), myOptions);
  </code></pre>