Question

I’m using Google Mpas Api v3 to display a map in a 200px high div:

<div id='propertyKaart'></div>

With the normal javascript i’m using this div to display the map:

$(document).ready(function(){
        var map = new google.maps.Map(document.getElementById("propertyKaart"),
                    mapOptions);
                    map.setCenter(punt);
                    map.setZoom(14);
})

With a click on a button with class .mapPuller I want to change the height of the chart to lets say 600px:

var mapState        
$('.mapPuller').click(function(e){
        if(mapState == 'klein'){
            $('#propertyKaart').animate({height: '600px'}, 200);
            mapState = 'groot'

        }else{
            $('#propertyKaart').animate({height: '200px'}, 200);
            mapState = 'klein';

        }
         //---- here
    })

Works like a charm, with only one problem. The map (the tiles, so to say) still think the div is 200px high.

In the documentation I found I had to trigger the resize event when changing the container div. So I added the following code in the .mapPuller function on the //------ here spot.

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

But this doesn’t work……
Am I missing something?

When I resize my browser window, the event gets triggered and the tiles seem to do their work…..

Answer 1

I tried resizing the map with jquery’s animate function and had the same problem with you. The map tiles didn’t adapt. But triggering the map resize event fixed the problem.

So, maybe there’s a problem with scoping. Make sure that the map variable is accessible inside mapPuller function and make sure that there isn’t other errors in the console.