Meine Google Maps sind abgeschnitten. Ich frage mich, warum. Javascript, V

Es ist schwer zu erklären, deshalb habe ich einen Screenshot des Problems hochgeladen:

Wie Sie sehen können, wird trotz der Div-Immobilien auf der Karte (dies ist die tatsächliche Größe) nur 1/6 der Karte angezeigt! Dieses kleine Widget kann in der Größe geändert werden, aber selbst wenn es abgeschnitten ist. Ich bin sicher, dass ich etwas falsch mache, aber ich kann es nicht herausfinden. Hier ist der CSS-Code für das Div, das die Map enthält:

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

Hier ist das Javascript, mit dem die Karte erstellt wird:

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

und schließlich die Javascript-Datei, die aufgerufen wird, um dies alles zu ermöglichen:

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

Vielen Dank im Voraus, insbesondere, dass Sie sich die Zeit genommen haben, eine lange Frage wie diese zu lesen!

Antworten auf die Frage(1)

Ihre Antwort auf die Frage