CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
ngplayground
ngplayground

Reputation: 21617

Google Map API V3 detecting container width/height change

I am trying to detect when a maps container has changed so that I can run google.maps.event.trigger(map, 'resize'); but I can't seem to get it to work. Is there a Listener to detect when the container has changed size? I know it doesn't work as the map will have a section which is greyed out.

I have trie the following but all seem to fail when the container size has changed, bounds_changed works when the map is dragged by my cursor.

google.maps.event.addListener(map, 'bounds_changed', function() {
    google.maps.event.trigger(map, 'resize');
});

google.maps.event.addDomListener(map, 'resize', function() {
    google.maps.event.trigger(map, 'resize');
});

map declaration and init()

var map, mapOptions, mapElement,valMap,valZoom;
google.maps.event.addDomListener(window, 'load', init);
function init() {
    mapOptions = {
        zoom: 2,
        center: new google.maps.LatLng(40.697299 , -73.809815),
        panControl:true
    };
    mapElement = document.getElementById('map');
    map = new google.maps.Map(mapElement, mapOptions);
    mapCenter();
    mapZoom();
    google.maps.event.addListener(map, 'center_changed', function() {
        mapCenter();
    });
    google.maps.event.addListener(map, 'zoom_changed', function() {
        mapZoom();
    });
google.maps.event.addListener(map, 'bounds_changed', function() {
    google.maps.event.trigger(map, 'resize');
});

}

key up resize

$("#width, #height").keyup(function() {
    delay(function(){
        size();
    }, 500 );
        console.log('0');
        mapElement = document.getElementById('map');
        console.log(mapElement);
        google.maps.event.addDomListener( mapElement, 'resize', function(e){
            console.log( 'Resize', e);
            google.maps.event.trigger(map, 'resize');
            console.log('1');
        });
        console.log('2');
});

Upvotes: 0

Views: 2473

Answers (1)

Sunny Patel
Sunny Patel

Reputation: 8078

Have you tried using something like google.maps.event.addDomListener( mapElement, 'resize', function(e){console.log( 'Resize', e)} );?

Maybe the listener for the Map object doesn't support 'resize'.

Edit: JSFiddle

Upvotes: 2

Related Questions