Make GMAP api aware that the gmap has been resized

Question

I'm using jquery and css to toggle my gmap between full screen and normal size. However, since the original height is 200px, when I press the full screen button, it only draws 200px of the map and the rest is covered with a gray color. Is there a way to "let the GMap api know" that the map is resized so that it will draw the rest of the map and center the location selected to the new size?

Answer 1

With regular GMaps API, you would need to reinitialize the map or trigger the resize event to start recalculation/replotting the map.

However, this seems to be a common problem for several users of GMap module and there were no direct answers 1 2 3 4.

This is one of the workarounds:

1. Go to admin/config/services/gmap and check collapsehack. This feature is supposed to be used when the map is in Drupal's collapsible fieldsets, but what it does is that it triggers map resizing on hash change. You can see this in the source code of gmap/gmap.js.
2. In your trigger add any hashchange - such as #open-map and #close-map.

Here's an example node content. JS/CSS are injected there just to give you an idea:

[gmap markers=blue::41.902277040963696,-87.6708984375 |zoom=5 |center=42.94033923363183,-88.857421875 |width=300px |height=200px |control=Small |type=Map]

<p><a id="toggle" href="#open-map">Toggle gmap size</a></p>

<style>
.gmap-control.open {
  width: 640px!important;
  height: 480px!important;
}
</style>
<script>
jQuery.noConflict();
jQuery(document).ready(function($) {
  $('#toggle').click(function() {
    if ($('.gmap-control').hasClass('open')) {
      $(this).attr('href', '#close-map');
    }
    else {
      $(this).attr('href', '#open-map');
    }
    $('.gmap-control').toggleClass('open');
  });
});
</script>

I tested this and it worked perfectly.