Trudno to wyjaśnić, więc przesłałem zrzut ekranu tego problemu:

Jak widać, pomimo nieruchomości div na mapie (jest to rzeczywisty rozmiar), wyświetla tylko 1/6 mapy! Ten mały widżet może zostać zmieniony, ale nawet jeśli jest, zostanie odcięty. Jestem pewien, że robię coś złego, ale nie mogę tego zrozumieć. Oto kod CSS dla div, który zawiera mapę:

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

Oto javascript, który tworzy mapę:

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

i wreszcie plik javascript, który jest wywoływany, aby to wszystko się stało:

<code><script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&amp;sensor=false"></script>
</code>

Z góry dziękuję, zwłaszcza za poświęcenie czasu na przeczytanie długiego pytania w ten sposób!