My google maps is cut off, I'm wondering why? Javascript, V

Go To


It's kinda hard to explain so I uploaded a screen shot of the issue: enter image description here

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 ) {
   } else {
     marker = new google.maps.Marker({
  position: location,
  map: map,
  draggable: true

  function searchGoogleMaps(event) { 
var address;
geocoder.geocode( { 'address': address}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {


  } 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) {
} else {

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

<script type="text/javascript" src=";sensor=false"></script>

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

2012-04-04 07:22
by Philll_t
Just a stab in the dark, but have you tried setting the width of the div to something specific such as a px measurement just to test - dougajmcdonald 2012-04-04 07:27
Hi doug, I'll give it a try right now - Philll_t 2012-04-04 07:29
Tried it out, still did the same thing. The reason the width && height is set to auto is to maintain it's parent's width and height when the resize occurs. Thank you - Philll_t 2012-04-04 07:32


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') .

2012-04-04 07:30
by Engineer
works like a charm, I hope others find this helpful too. Thank you Engineer - Philll_t 2012-04-04 07:44