Google Map won't update after resize

Question

Fiddle, the code will speak for itself. I just want a panel on the left side that can be toggled. So if I click it will slide out, and if I click again it will slide back in. I was able to resize the google map displayed on its right pretty easily but, whenever the panel slides out the 'new part' of the map remains unloaded. I tried with what suggested on the documentation using:

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

but I feel like I'm missing something.

To better understand, whenever you click on the panel to reduce it, you will notice that the far right side of the map is not loaded. How can I fix this ? What am I doing wrong ?

code snippet (from linked fiddle):

var toggle = true;

google.maps.event.addDomListener(window, "load", function() {

  var map = new google.maps.Map(document.getElementById("map_div"), {
    center: new google.maps.LatLng(33.808678, -117.918921),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  $('#infoWindow').click(function() {
    if (toggle) {
      $('#infoWindow').animate({
        left: -160
      });
      $('#map_div').animate({
        width: $('#map_div').width() + 160,
        left: 40
      });
      google.maps.event.trigger(map, 'resize');
    } else {
      $('#infoWindow').animate({
        left: 0
      })
      $('#map_div').animate({
        width: $('#map_div').width() - 160,
        left: 200
      });
    }
    toggle = !toggle;
  });
});

body {
  margin: 0;
  padding: 0;
  font: 12px sans-serif;
}
h1,
p {
  margin: 0;
  padding: 0;
}
#map_div {
  z-index: 0;
  position: absolute;
  top: 0px;
  left: 200px;
  right: 0;
  bottom: 0px;
  width: calc(100% - 200px);
}
#infoWindow {
  z-index: 10;
  top: 0px;
  position: absolute;
  width: 200px;
  bottom: 0px;
  -webkit-box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.43);
  -moz-box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.43);
  box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.43);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<div id="infoWindow"></div>
<div id="map_div" style="height: 400px;"></div>

Answer 1

You need to trigger the 'resize' after the animate completes. You can use the .animate .complete function (documentation):

.animate( properties [, duration ] [, easing ] [, complete ] )

definition:

complete | Type: Function()

A function to call once the animation is complete, called once per matched element.

  $('#map_div').animate({
    width: $('#map_div').width() + 160,
    left: 40
  }, function() {
    google.maps.event.trigger(map, 'resize');
  });

and

  $('#map_div').animate({
    width: $('#map_div').width() - 160,
    left: 200
  }, function() {
    google.maps.event.trigger(map, 'resize');
  });

proof of concept fiddle

code snippet:

var toggle = true;

google.maps.event.addDomListener(window, "load", function() {

  var map = new google.maps.Map(document.getElementById("map_div"), {
    center: new google.maps.LatLng(33.808678, -117.918921),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  $('#infoWindow').click(function() {
    if (toggle) {
      $('#infoWindow').animate({
        left: -160
      });
      $('#map_div').animate({
        width: $('#map_div').width() + 160,
        left: 40
      }, function() {
        google.maps.event.trigger(map, 'resize');
      });
    } else {
      $('#infoWindow').animate({
        left: 0
      })
      $('#map_div').animate({
        width: $('#map_div').width() - 160,
        left: 200
      }, function() {
        google.maps.event.trigger(map, 'resize');
      });
    }
    toggle = !toggle;
  });
});

body {
  margin: 0;
  padding: 0;
  font: 12px sans-serif;
}
h1,
p {
  margin: 0;
  padding: 0;
}
#map_div {
  z-index: 0;
  position: absolute;
  top: 0px;
  left: 200px;
  right: 0;
  bottom: 0px;
  width: calc(100% - 200px);
}
#infoWindow {
  z-index: 10;
  top: 0px;
  position: absolute;
  width: 200px;
  bottom: 0px;
  -webkit-box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.43);
  -moz-box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.43);
  box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.43);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<div id="infoWindow"></div>
<div id="map_div" style="height: 400px;"></div>