Google Map redimensionner ne fonctionne pas

Question

Im essayant de montrer une carte de google avec un effet de SlideToggle comment jamais la carte ne montre complètement.

la classe css a déjà 100% de largeur. Comment puis-je utiliser l'option de redimensionnement correctement?

var map; 
function initialize() { 
    var mapOptions = { 
    zoom: 11, 
    center: new google.maps.LatLng(<?php $custom = $this->item->extra_fields; echo $custom[0]->value; ?>, <?php $custom = $this->item->extra_fields; echo $custom[1]->value; ?>), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 

    }; 
    map = new google.maps.Map(document.getElementById('map-canvas<?php echo $this->item->id; ?>'), 
     mapOptions); 

    } 

google.maps.event.addDomListener(window, 'load', initialize); 

jQuery(document).ready(function ($) { 
    $('#mostrarmapa<?php echo $this->item->id; ?>').click(function() { 

     $('#map-canvas<?php echo $this->item->id; ?>').slideToggle(); 
     $('#map-canvas<?php echo $this->item->id; ?>').addClass('showmap'); 
    }); 
}); 

google.maps.event.trigger(map, 'resize'); 

Answer 1

Ajouter l'événement déclencheur resize de votre carte dans la fonction de rappel de votre slideToggle.

$('#map-canvas<?php echo $this->item->id; ?>').slideToggle(function(){ 
    google.maps.event.trigger(map, 'resize'); 
});