Uncaught type error cannot read property "latitude" of undefined Google Maps on Mac

Question

I am working on a Google Map integration on my site, which is working for me on Windows * Chrome and Firefox as well as my Android browser, but I get an Uncaught type error on latitude in OSX only. Here is my code:

var lat = '44.519';
var lon = '-88.019'; 
var latlong = readCookie('zblatlong');
if (latlong) {
    var res = latlong.split(",");
    var lat = res[0];
    var lon = res[1];
} else {
        if (google.loader.ClientLocation) {
            var loc = google.loader.ClientLocation;
       }
       if (loc.latitude){
            var lat = loc.latitude;
       }
       if (loc.longitude){
            var lon = loc.longitude;
       }
    createCookie('zblatlong',lat+','+lon,30);
}
console.log(lat);
console.log(lon);

var geocoder;
var map, layer;

function initialize() {
       geocoder = new google.maps.Geocoder();
       console.dir(geocoder);
       var styles = [
                 {
                   "stylers": [
                     { "invert_lightness": true },
                     { "saturation": -100 },
                     { "gamma": 1 },
                     { "lightness": 11 }
                   ]
                 },{
                   "featureType": "water",
                   "stylers": [
                     { "lightness": -100 }
                   ]
                 }];
       var mapOptions = {
         center: new google.maps.LatLng(lat, lon),
         zoom: 6,
         mapTypeId: google.maps.MapTypeId.ROADMAP,
         styles: styles
       };     
       map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
       var layer = new google.maps.FusionTablesLayer({
          query: {
            select: 'latitude',
            from: 'tableid'
          },
          map: map,
          styleId: 2,
          templateId: 3
        });

  layer.setMap(map);


     }
     google.maps.event.addDomListener(window, 'load', initialize);


function changeLocation(){
    var location = jQuery('#modal1 #address').val();
    geocoder.geocode( { 'address': location}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        var lat = results[0].geometry.location.lat();
        var lon = results[0].geometry.location.lng();
        createCookie('zblatlong',lat+','+lon,30);
        var location = new google.maps.LatLng(lat, lon);
        map.setCenter(location);
        console.log(lat);
        console.log(lon);
    } else {
      console.log('Geocode was not successful for the following reason: ' + status);
    }
  });
}


function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

And the HTML:

<div id="map_canvas"></div>
                   <div class="medium metro btn default locChange"><a href="#" id="change-location" class="switch" gumby-trigger="#modal1"><i class="icon-location"></i> Change My Location</a></div>

The script is being called in the head of the document, so I tried moving it to the footer with no luck. I have seen a few posts about problems with Google Maps/Geolocation on newer versions of Mac, but no solutions on how to get it to work. I've checked my code with JSLint and everything seems to be OK. Does anything stand out to you that might be a problem?