API карт Google не отображается в fancybox

Я могу распечатать карту Google с помощью php. Однако, когда я пытаюсь отобразить его в fancybox (отлично работает), он отображает часть карты в верхнем левом углу, а остальная часть просто серая.

Код

<script type="text/javascript">
    $(document).ready(function() {


        $('.fancybox').fancybox({

      'hideOnContentClick': false, // so you can handle the map
'overlayColor'      : '#ccffee',
  'overlayOpacity'    : 0.8,
  'autoDimensions': true, // the selector #mapcontainer HAS css width and height
       'aftershow': function(){
        google.maps.event.trigger(map, "resize");

      }
     });
      });   




 jQuery(function($) {
    // Asynchronously Load the map API 
    var script = document.createElement('script');
    script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
});

function initialize() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };

    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.setTilt(45);


// Multiple Markers
var markers =['description', 35.179649, 25.708952],];


// Info Window Content
var infoWindowContent = [
    ['<div class="info_content">' +
    '<h3>desvription</h3>' +
    '<p>Blah blah blah......</p>' +
    '</div>'],       
];

// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;

// Loop through our array of markers & place each one on the map  
for( i = 0; i < markers.length; i++ ) {
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    bounds.extend(position);
    marker = new google.maps.Marker({
        position: position,
        map: map,
        title: markers[i][0]
    });

    // Allow each marker to have an info window    
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infoWindow.setContent(infoWindowContent[i][0]);
            infoWindow.open(map, marker);
        }
    })(marker, i));

    // Automatically center the map fitting all markers on the screen
    map.fitBounds(bounds);
}

// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
    this.setZoom(14);
    google.maps.event.removeListener(boundsListener);
});

}
    </script>

ссылка для отображения карты

<div class="googlemaptitle"><a class="fancybox" href="#viewthemap" title="View the map">View the map</a></div>

div, который печатает карту (скрытую)

<div id="viewthemap" style="width:800px; height:780px; display: none;">
    <div id="map_wrapper">
<div id="map_canvas" class="mapping"></div>

результат в fancybox

Также как изменить значок маркеров на карте google с иконкой с моего сервера?