title: google maps event listener only running once
body: <p>I am opening a modal on click to show a google map.  As the site is responsive I added an event listener to make sure the map is centered on window resize.  All of this works, but the event listener only runs on the initial modal open.  If I close the modal and open it up again the listener no longer works/runs and there is no centering on map resizing.</p>
  
  <p>Ideas?</p>
  
  <pre><code>// show google map
  $('#datatable').on('click', '.dtMap', function () {
  
      var data = {'activity_id': $(this).parents('tr').attr('id')};
  
      // equals 40.0989, -83.1615, but need to make into two variables or in this case an array
      var latlong = $(this).closest('tr').find('.latlong').text();
      var coordinates = latlong.split(', ');
  
      $('#modal-ajax')
      //this event fires when the modal has finished the animation
      //the size of #map_canvas is available now
      //create the map when this event fires
      .one('shown.bs.modal', function(){
  
          latLng = new google.maps.LatLng(parseFloat(coordinates[0]), parseFloat(coordinates[1]));
  
          var mapOptions = {
               zoom: 12,
               center: latLng,
               mapTypeId: google.maps.MapTypeId.ROADMAP
              },
  
              map = new google.maps.Map($('#map_canvas')[0], mapOptions),
  
              marker = new google.maps.Marker({
                      position: latLng,
                      map: map,
                      title: 'test'
              });
  
          // make sure the map and marker stays centered on resizing
          google.maps.event.addDomListener(window, "resize", function() {
              var center = map.getCenter();
              google.maps.event.trigger(map, "resize");
              map.setCenter(center); 
          });
  
      })
  
      .load('/modals/m_view_map.php', data, function() {
          google.load('maps', '3',
              {other_params:'sensor=false', 
                  callback: function(){
                      //show the modal
                      $('#modal-ajax').modal('show');
                  }
              }
          );
  
      });
  
  });
  </code></pre>
  
  <p><strong>SOLUTION:</strong></p>
  
  <p>Why I never thought of this before... this properly centers the map/marker on resizing at all times...</p>
  
  <pre><code>google.maps.event.addDomListener(window, "resize", function() {
                  google.maps.event.trigger(map, "resize");
                  map.setCenter(latLng); 
              });
  </code></pre>