Google map not printing properly

Question

I'm having some trouble with printing a Google Map through the JavaScript API V3. The problem is that the Map is displayed in two parts and the top and bottom part of the map are partly overlaying each other.

The code looks like this:

  var geocoder;
  var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var mapOptions = {
      zoom: 12,
      center: latlng,
      scrollwheel: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    codeAddress();             
  }


  function codeAddress() {
    var address = document.getElementById('address').value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });      
  }

Can anyone say what's wrong?

Answer 1

Try this it works

.map{
    width: 1000px;
    height: 410px;
    overflow: visible;
    position: absolute;
    background-color: rgb(229, 227, 223);
}   

Html tag inside (div id="map_canvas" class="map")