title: My google maps is cut off, I'm wondering why? Javascript, V
body: <p>It's kinda hard to explain so I uploaded a screen shot of the issue:
  <img src="https://i.stack.imgur.com/9q9RL.png" alt="enter image description here"></p>
  
  <p>As you can see, despite the div real-estate on the map (this is actual size), it only displays 1/6th of the map! This little widget can be resized but even when it is it is cut off. I'm sure I'm doing something wrong but can't figure it out. Here's the CSS code for the div that contains the map:</p>
  
  <pre><code>#map {
  border-right-color: black;
  border-left-color: black;
  border-right-width: 1px;
  border-left-width: 1px;
  position: absolute;
  margin-top: 0px;
  top: 38px;
  left: 0px;
  width: auto;
  height: auto;
  right: 0px;
  bottom: 10px;
  background-color: rgb(204, 204, 204);
  border-bottom-style: solid;
  border-top-style: solid;
  border-bottom-width: 1px;
  border-top-width: 1px;
  border-bottom-color: rgb(204, 204, 204);
  border-top-color: rgb(204, 204, 204);
  overflow: hidden;
  }
  </code></pre>
  
  <p>here's the javascript that is making the map:</p>
  
  <pre><code> //google maps apis
   var marker;
   var setLocation =  new google.maps.LatLng(59.32522, 18.07002);
  
   var marker;
  
   function placeMarker(location) {
     if ( marker ) {
       marker.setPosition(location);
     } else {
       marker = new google.maps.Marker({
    position: location,
    map: map,
    draggable: true
       });
     }
   }
  
    function searchGoogleMaps(event) { 
  var address =event.target.value;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
  
          placeMarker(results[0].geometry.location)
  
  
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
       });
     }  
  
  
    var geocoder;
     var map;
     function initialize() {
       geocoder = new google.maps.Geocoder();
       var latlng = new google.maps.LatLng(-34.397, 150.644);
       var myOptions = {
    zoom: 2,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map"), myOptions);
     }
  
  
     function toggleBounce() {
  
  if (marker.getAnimation() != null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
     }
  </code></pre>
  
  <p>and finally the javascript file that is being called to make this all happen:</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&amp;amp;sensor=false"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Thanks in advance, especially for taking the time to read a long question like this!</p>