Google Maps - Map not centering on resizing (responsive)

Hello All,

I'm working on a Google Maps implementation which is similar to the one outlined in this project. The API has changed since this video came out, but the core functionality appears to be the same.

I'm wanting the center to be preserved on window size, just like Andrew discusses in the video. However, i'm not quite able to make this happen.

Here is the script i'm using. This script is located on a PHP page just after the google maps API script tag (which includes my API key):

<script>
    var locationAddress = new google.maps.LatLng(30.13422,  -81.63824);
    var marker;
    var map1;
    var center;

    function initialize() {
        var map1Options = {
            center: locationAddress,
            zoom: 15
        };

        map1 = new google.maps.Map(document.getElementById('map1'), map1Options);

        marker = new google.maps.Marker({
            map: map1,
            draggable: false,
            animation: google.maps.Animation.DROP,
            position: locationAddress
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    google.maps.event.addDomListener(map1, 'idle', function() {
        center = map1.getCenter();
    });
    $(window).resize(function() {
        map1.setCenter(center);
    });
</script>

I've done some searching around to confirm if the method described in the video is still valid and it absolutely is, however the above code isn't working for me. The map shows, my marker shows, the map does not retain its center position when the page is resized.

Other helpful tidbits:

• Latest version of jQuery is included in the header. This script (and the gMaps script tag mentioned above) are located in the footer area at the end of the body element.

• My chrome console reports an error in the main.js file, which is part of the Google Maps API:

  Uncaught TypeError: Cannot read property 'addEventListener' of undefined
  

Any direction/assistance is most appreciated. Thanks!