How to make a simple google map page show in IntelXDK

Question

I am trying to make a simple page where a google map is displayed, centered on the current location.

I have been able to sucessfully get the lat/long with the following, from where I also store it in localStorage. :

var geooptions = {timeout: 10000, maximumAge: 11000, enableHighAccuracy: true };
var geofail = function(){
  alert("Geolocation failed. \nPlease enable GPS in Settings.");
};
var geosuc = function(p){
  localStorage.lat = p.coords.latitude;
  localStorage.lon = p.coords.longitude; 
  localStorage.latlon = p.coords.latitude + ', ' + p.coords.longitude;    
};
var getLocation = intel.xdk.geolocation.watchPosition(geosuc,geofail,geooptions);
var stopGeolocation = function(){
        intel.xdk.geolocation.clearWatch(geolocationWatchTimer);
}

When I try to draw the map with this, nothing happens - I have a div with id="page_4":

function drawMap() {
    //Creates a new google maps object
    var latlng = new google.maps.LatLng(localStorage.lat, localStorage.lon);
    myLatLng = latlng;
    var mapOptions = {
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL,
            position: google.maps.ControlPosition.LEFT_TOP
        },
    };
    var mymap = new google.maps.Map(document.getElementById("page_4"), mapOptions);
}

Answer 1

Found issue, wasn't clear / obvious in any of the XDK examples, but you obviously still have to include the google map api script...