Question

It’s kinda hard to explain so I uploaded a screen shot of the issue:

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:

#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;
}

here’s the javascript that is making the map:

 //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);
}
   }

and finally the javascript file that is being called to make this all happen:

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

Thanks in advance, especially for taking the time to read a long question like this!

Answer 1

Whenever your ‘map‘ div changes its sizes, you need to trigger ‘resize‘ event explicitly on Google Maps component:

Developers should trigger this event on the map when the div changes
size: google.maps.event.trigger(map, ‘resize’) .

https://developers.google.com/maps/documentation/javascript/reference#Map