Problem Displaying Google map within phone gap Android

Posted 21 February 2013 - 03:34 PM

Hi Guys im looking at phone gap for android and ive been going through a tutorial that adds a google map to the index.html
all I am getting is a white screen

/>

Index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Geolocation</title>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?&sensor=false"></script>
		<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" charset="utf-8" src="cordova-2.4.0.js"></script>
        <script type="text/javascript" src="googlemap.js"></script>
		<script type="text/javascript" charset="utf-8">
		
			document.addEventListener("deviceready", loaded, false);
			function onDeviceReady(){
			var map = new GoogleMap();
			map.initialize();
			}
			
       </script>
    </head>
    <body>
		<div id="map_canvas"></div>
       
    </body>
</html>

googlemap.js

function GoogleMap(){
 
this.initialize = function(){
var map = showMap();
}
 
 var showMap = function(){
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
 
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
 
return map;
}
}