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

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

Posted by: admin November 29, 2017 Leave a comment


I have a ‘mapwrap’ div set to 400px x 400px and inside that I have a Google ‘map’ set to 100% x 100%. So the map loads at 400 x 400px, then with JavaScript I resize the ‘mapwrap’ to 100% x 100% of the screen – the google map resizes to the whole screen as I expected but tiles start disappearing before the right hand edge of the page.

Is there a simple function I can call to cause the Google map to re-adjust to the larger size ‘mapwrap’ div?


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


for Google Maps v3, you need to trigger the resize event differently:

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

See the documentation for the resize event (you’ll need to search for the word ‘resize’): http://code.google.com/apis/maps/documentation/v3/reference.html#event


This answer has been here a long time, so a little demo might be worthwhile & although it uses jQuery, there’s no real need to do so.

$(function() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  var map = new google.maps.Map($("#map-canvas")[0], mapOptions);

  // listen for the window resize event & trigger Google Maps to update too
  $(window).resize(function() {
    // (the 'map' here is the result of the created 'var map = ...' above)
    google.maps.event.trigger(map, "resize");
body {
  height: 100%;
#map-canvas {
  min-width: 200px;
  width: 50%;
  min-height: 200px;
  height: 80%;
  border: 1px solid blue;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&dummy=.js"></script>
Google Maps resize demo
<div id="map-canvas"></div>


The popular answer google.maps.event.trigger(map, "resize"); didn’t work for me alone.

Here was a trick that assured that the page had loaded and that the map had loaded as well. By setting a listener and listening for the idle state of the map you can then call the event trigger to resize.

$(document).ready(function() {
    google.maps.event.addListener(map, "idle", function(){
        google.maps.event.trigger(map, 'resize'); 

This was my answer that worked for me.


Wolfgang Pichler’s map-in-a-box offers to

Load a map in a draggable and resizable div element.


This is best it will do the Job done.
It will re-size your Map.
No need to inspect element anymore to re-size your Map.
What it does it will automatically trigger re-size event .

    google.maps.event.addListener(map, "idle", function()
            google.maps.event.trigger(map, 'resize');

        map_array[Next].setZoom( map.getZoom() - 1 );
    map_array[Next].setZoom( map.getZoom() + 1 );


First of all, thanks for guiding me and closing this issue. I found a way to fix this issue from your discussions. Yeah, Let’s come to the point.
The thing is I’m Using GoogleMapHelper v3 helper in CakePHP3. When i tried to open bootstrap modal popup, I got struck with the grey box issue over the map. It’s been extended for 2 days. Finally i got a fix over this.

We need to Update the GoogleMapHelper to fix the issue

Need to add the below script in setCenterMap function

google.maps.event.trigger({$id}, \"resize\");

And need the include below code in JavaScript

google.maps.event.addListenerOnce({$id}, 'idle', function(){
   setCenterMap(new google.maps.LatLng({$this->defaultLatitude},