How to Use Google.Maps.Event.Trigger(Map, 'Resize')

How to use google.maps.event.trigger(map, 'resize')

There were actually a couple of problems with your source code.

• The initialize() function is created, but never called
• The $(document).ready should be called after jQuery us loaded
• The map should be a global variable (like @Cristiano Fontes said) and not a var map
• (Important) The click event is never called. You're trying to combine the two methods Reveal from Zurb provides to open a dialog (one with JS, one with only HTML). You need to use the only JS method.
• You're using the wrong ID (#myModal1 is never located in the HTML).

And now: Download the solution (Please provide us with a download/JSFiddle next time, so we don't need to create this ourselves).

Hope it helped!

Where do i insert - google.maps.event.trigger(map, 'resize');

Best option I know is to use following code:

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

Issue with google.maps.event.trigger(map, resize)

You have just call the initialize function to draw map again after the map-canvas dimensions changed in animate function callback.

$(function() {
    $("#expand-map").click(function() {
        $("#map-canvas").animate({"height" : "800px"}, 500,function(){
            initialize();
        });

    });
});

see here:
demo jsfiddle

Google map API resize doesn't work

Ok so i found the solution.

I just add a setTimeout which one execute a function that trigger the resize event.

$("#show-full-map").on("click", function(){
            modal.init($('#full-map'))
            modal.popup();
            var refresh = function() {
                var center = map.getCenter();
                    google.maps.event.trigger(map, "resize");
                    map.setCenter(center);
                }
                setTimeout(refresh, 500);
                open = true;
            });

Google Maps API v3 resize event

Whenever the map is resized, the bounds will chage. Therefore, you can use the bounds_changed event:

google.maps.event.addListener(map, 'bounds_changed', function() {
    var bounds = map.getBounds();
});

It has the following description:

This event is fired when the viewport bounds have changed.

---

If you only want the event to be called after the map is resized, you can use a boolean variable to track whether the map has just been resized, like so:

var mapResized = false;

Then, whenever you trigger the resize function, you can set the mapResized variable to true. You can do so using a function:

function resizeMap(map) {
    google.maps.event.trigger(map, 'resize');
    mapResized = true;
}

Then, in the bounds_changed event, you can only react to call if mapResized is true, and afterwards set mapResized to false:

google.maps.event.addListener(map, 'bounds_changed', function() {
    if (mapResized) {
        // react here
    }
    mapResized = false;
}

How do I resize a Google Map with JavaScript after it has loaded?

If you're using Google Maps v2, call checkResize() on your map after resizing the container. link

UPDATE

Google Maps JavaScript API v2 was deprecated in 2011. It is not available anymore.

---

Related Topics