Google Map not displaying on page, no JS errors

I have the following HTML with a map canvas:

   <div style="height:100%; width:100%;">
        <div id="map-canvas"></div>
    </div>

I have the following jQuery:

jQuery( document ).ready(function($) {

console.log(lat_long_vars.latitude);
console.log(lat_long_vars.longditude);

var map;
var map_properties = {
    center:new google.maps.LatLng(lat_long_vars.latitude,lat_long_vars.longditude),
    zoom:5,
    mapTypeId:google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map($('#map-canvas')[0], map_properties);

})

I've also included the google maps CDN above my own jQuery. (https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize)

However, the map canvas does not display. The obvious issue might be that the latitude and longitude variables are not set, they definitely are though. Could anyone suggest what the issue could be here? I don't pull back any JS errors.