How to Resize a Google Map Dynamically with JavaScript?

How to Resize a Google Map with JavaScript after Loading

When working with Google Maps, it's sometimes necessary to resize the map after it has already loaded. This can be achieved through JavaScript, but it requires some specific steps to ensure that the map tiles adjust accordingly.

To resize a Google Map in v3, follow this procedure:

1. Resize the parent
   or container element that holds the Google Map using JavaScript or CSS.
2. Trigger the "resize" event on the Google Map object.

Triggering the Resize Event

In Google Maps v3, the resize event needs to be triggered explicitly:

<code class="javascript">google.maps.event.trigger(map, "resize");</code>

where map is the Google Map object that needs resizing.

Example with jQuery

Here's an example using jQuery to handle window resizing and triggering the Google Map resize:

<code class="javascript">$(function() {
  var map = new google.maps.Map($("#map-canvas")[0], mapOptions);

  $(window).resize(function() {
    google.maps.event.trigger(map, "resize");
  });
});</code>

By following these steps, you can effectively resize a Google Map and ensure that the map tiles adjust and display properly within the new dimensions.