Safari Javascript error with Google Maps

I'm getting this error when I load my page in Safari:

TypeError: Result of expression 'map.getCenter' [undefined] is not a function.

The same page loads absolutely fine in every other major browser (Chrome, FF, and IE).

I'm using Google Maps Javascript API V3 along with their Geolocation API.

Has anyone had this issue before?

Here's the code path:

$(document).ready(function () {
        initialize();
    });


function initialize() {
        var myOptions = {
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map"), myOptions);
        google.maps.event.addListener(map, 'idle', function() {
         saveSession();
        });
        getInitialLocation();
    }

function getInitialLocation()
    {
        // Try W3C Geolocation (Preferred)
        if (navigator.geolocation) {

            browserSupportFlag = true;
            navigator.geolocation.getCurrentPosition(function (position) {
                initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                map.setCenter(initialLocation);

            }, function () {
                handleNoGeolocation(browserSupportFlag);
            });
            // Try Google Gears Geolocation
        } else if (google.gears) {

            browserSupportFlag = true;

            var geo = google.gears.factory.create('beta.geolocation');
            开发者_如何转开发geo.getCurrentPosition(function (position) {
                initialLocation = new google.maps.LatLng(position.latitude, position.longitude);
                map.setCenter(initialLocation);
            }, function () {
                handleNoGeoLocation(browserSupportFlag);
            });
            // Browser doesn't support Geolocation
        } else {
            browserSupportFlag = false;
            handleNoGeolocation(browserSupportFlag);
        }

        function handleNoGeolocation(errorFlag) {
            if (!errorFlag)
            {
                initialLocation = new google.maps.LatLng(geoip_latitude(), geoip_longitude());
                map.setCenter(initialLocation);
            }
        }
    }

You see the idle is bound to saveSession()

function saveSession() {
        if ((map != undefined) && (map.getCenter() != undefined)
        {
            // do stuff
        }
    }

But this should only run the code if that stuff ISN'T undefined. Also, once again, this WORKS in everything but Safari.

EDIT: Run this in JFiddle WITH safari. It will come up and work after about 5 seconds. But then run it again (either update or hit run again). It will not work.

http://jsfiddle.net/gYJrF/1/

Have you tried switching these two lines of code

    google.maps.event.addListener(map, 'idle', function() {
     saveSession();
    });
    getInitialLocation();

to

    getInitialLocation();
    google.maps.event.addListener(map, 'idle', function() {
     saveSession();
    });

in case safari fires the idle event before having set the center of the map.

or even better if you could bind to the idle event after certainly having set the map center. So maybe set it inside the getInitialLocation in the success callbacks and for the failed in the handleNoGeolocation

It seems that it is a wide-spread issue with Safari.

• https://discussions.apple.com/message/11780026?messageID=11780026
• http://www.phpfreaks.com/forums/index.php?topic=318586.0

I am assuming it is a desktop-only problem, as from posts i see that devices with GPS will work with (iphone etc)

Javascript is telling you that it doesn't know what map.getCenter is. It probably means that map wasn't initialized, was deleted, or is not available in whatever function is generating the error. Try setting a breakpoint and look backwards through the stack trace to see where things have gone wrong.

You can reproduce the error with something like this:

<script>
function init() {
    var map = new google.maps.Map( /* params */ );
}

function get_map_center() {
    return map.getCenter();  // map is not defined here, it was only defined
                             // in the init() function above. 
}
</script>

...

<body onload="init">
...
</body>