title: Centre Google Maps on Responsive Website
body: <p>I am using a Google Map on my website through an API. It works fine however I have two additional bits of code. One to make it responsive and one to keep it centred. For some reason I can't integrate both bits of code at the same time.</p>
  
  <p>Here's the current working code (with responsive part):</p>
  
  <pre><code>&lt;script&gt;
      var map;
  jQuery(function($) {
      $(document).ready(function() {
          var latlng = new google.maps.LatLng(-40.893591, 132.023621);
          var myOptions = {
              zoom: 5,
              center: latlng,
              disableDefaultUI: true,
              draggable: false,
              scrollwheel: false,
              navigationControl: false,
              mapTypeControl: false,
              scaleControl: false,
             };
  
          map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
          // init Height
          $('#map_canvas').height($( window ).height());
          });
          // On Resize
          $(window).resize(function(){ 
          $('#map_canvas').height($( window ).height());});
  
        var center;
  function calculateCenter() {
    center = map.getCenter();
  }
  google.maps.event.addDomListener(map, 'idle', function() {
    calculateCenter();
  });
  google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(center);
  });
  
  });
      &lt;/script&gt;
  </code></pre>
  
  <p>Thanks in advance.</p>