Hey guys!
I have been working with this for over a week, and I'm STILL stuck....cannot get a simple map to load in my jquery mobile app (output with PhoneGap).
I have a 5 tab app built with JQuery mobile and converted to an .apk by PhoneGap, all content works fine...static stuff, RSS, JSON data.....the last tab is a map/location pin, and it simply comes up blank. I've tried dozens of iterations of code, and looked at tons of examples online. Still nothing.
Here are the vital parts I have coded...all paths to JS and CSS are correct and working. I would be eternally grateful if anyone could point me in the right direction as to what I'm screwing up here.
I have the following included in the HEAD section:
<link href="jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css">
<link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
In my HTML, this is the page template for the page in question:
<div data-role="page" id="location">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="jquery-mobile/jquery-ui-map-3.0-rc/ui/jquery.ui.map.js"></script>
<script type="text/javascript" src="jquery-mobile/jquery-ui-map-3.0-rc/ui/jquery.ui.map.services.js"></script>
<script type="text/javascript" src="jquery-mobile/jquery-ui-map-3.0-rc/ui/jquery.ui.map.extensions.js"></script>
<script type="text/javascript">
$("div:jqmData(role='page'):last").bind('pageinit', function() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
initialize(position.coords.latitude,position.coords.longitude);
});
}
});
function initialize(lat,lng) {
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
</script>
<div id="map_canvas" style="height: 100%; width: 100%;"></div>
</div>
Thanks in advance for any help guys, I appreciate it!