Resizing a Google Map with JavaScript

You've encountered an issue where Google tiles disappear after resizing a "mapwrap" div containing a Google map. This article aims to provide a solution to this problem by discussing the appropriate function to trigger a Google map adjustment.

Why Do Tiles Disappear?

When you resize the "mapwrap" div, the Google map doesn't automatically adjust to the new size. This results in a mismatch between the map dimensions and the display area, causing tiles to disappear.

Solution

To fix this, you need to explicitly trigger the resize event on the Google map object. This instructs the map to recalculate its layout and adjust to the new dimensions of the "mapwrap" div.

For Google Maps v3, use this function:

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

Demonstration

To clarify this concept, here's a demonstration using jQuery:

$(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 and trigger Google Maps to resize
  $(window).resize(function() {
    google.maps.event.trigger(map, "resize");
  });
});

This example ensures that whenever the window resizes, the Google map within the "map-canvas" div will automatically adjust to the new size, preventing tiles from disappearing.