I am trying to incorporate google map api v3 in my phonegap app. However, It just loads on the top left corner of the screen. Here is my code.
<!DOCTYPE html>
<html>
<head>
<title>QC App</title>
<!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
<meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.mobile-1.4.0.min.js"></script>
<link href="css/jquery.mobile.structure-1.4.0.min.css" rel="stylesheet">
<link href="css/jquery.mobile.theme-1.4.0.min.css" rel="stylesheet">
<link href="css/jquery.mobile-1.4.0.min.css" rel="stylesheet">
<link href="css/photoswipe.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/listview-grid.css" rel="stylesheet">
<script src="js/script.js"></script>
<style>
#map-canvas {
height: 90%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function writeAddressName(latLng) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
"location": latLng
},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
document.getElementById("address").innerHTML = results[0].formatted_address;
else
document.getElementById("error").innerHTML += "Unable to retrieve your address" + "<br />";
});
}
function geolocationSuccess(position) {
var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// Write the formatted address
writeAddressName(userLatLng);
var myOptions = {
zoom : 16,
center : userLatLng,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// Draw the map
var mapObject = new google.maps.Map(document.getElementById("map"), myOptions);
google.maps.event.addListenerOnce(mapObject, 'idle', function() {
google.maps.event.trigger(mapObject, 'resize');
});
// Place the marker
new google.maps.Marker({
map: mapObject,
position: userLatLng
});
// Draw a circle around the user position to have an idea of the current localization accuracy
var circle = new google.maps.Circle({
center: userLatLng,
radius: position.coords.accuracy,
map: mapObject,
fillColor: '#0000FF',
fillOpacity: 0.5,
strokeColor: '#0000FF',
strokeOpacity: 1.0
});
mapObject.fitBounds(circle.getBounds());
}
function geolocationError(positionError) {
document.getElementById("error").innerHTML += "Error: " + positionError.message + "<br />";
}
function geolocateUser() {
// If the browser supports the Geolocation API
if (navigator.geolocation)
{
var positionOptions = {
enableHighAccuracy: true,
timeout: 10 * 1000 // 10 seconds
};
navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError, positionOptions);
}
else
document.getElementById("error").innerHTML += "Your browser doesn't support the Geolocation API";
}
window.onload = geolocateUser;
</script>
</head>
<body>
<!-- homepage --> <!-- id home -->
<div data-role="page" id="home">
<div data-role="header" data-theme="b" data-position="fixed">
<h1 class="header_style"> <img src="images/QC_App_White.png"> </h1>
</div><!-- /header -->
<div data-role="content">
<div class="pt-menu">
<a data-theme="d" data-corners="false" data-role="button" href="#attractions">
<img src="images/icons/256/256_attractions_nowords_colored.png" alt="attractions">
<p>Attractions</p>
</a>
<a data-theme="d" data-corners="false" data-role="button" href="#attractions">
<img src="images/icons/256/256_dining_nowords_colored.png" alt="dining">
<p>Dining</p>
</a>
<a data-theme="d" data-corners="false" data-role="button" href="#attractions">
<img src="images/icons/256/256_educationandbusiness_nowords_colroed.png" alt="educationbusiness">
<p>Education</p>
</a>
<a data-theme="d" data-corners="false" data-role="button" href="#attractions">
<img src="images/icons/256/256_activitiesandevents_nowords_colored.png" alt="eventsactivities">
<p>Events</p>
</a>
<a data-theme="d" data-corners="false" data-role="button" href="#attractions">
<img src="images/icons/256/256_holyplaces_nowords_colored.png" alt="holyplaces">
<p>Holy Places</p>
</a>
<a data-theme="d" data-corners="false" data-role="button" href="#attractions">
<img src="images/icons/256/256_hospitals_nowords_colored.png" alt="hospital">
<p>Hospitals</p>
</a>
<a data-theme="d" data-corners="false" data-role="button" href="#attractions">
<img src="images/icons/256/256_accommodations_nowords_colored.png" alt="hotels">
<p>Hotels</p>
</a>
<a data-theme="d" data-corners="false" data-role="button" href="#attractions">
<img src="images/icons/256/256_shopping_nowords_colored.png" alt="shopping">
<p>Shopping</p>
</a>
<a data-theme="d" data-corners="false" data-role="button" href="#attractions">
<img src="images/icons/256/256_services_nowords_colored.png" alt="services">
<p>Services</p>
</a>
<a data-theme="d" data-corners="false" data-role="button" href="#attractions">
<img src="images/icons/256/256_transportation_nowords_colored.png" alt="transportation">
<p>Transport</p>
</a>
<a data-theme="d" data-corners="false" data-role="button" href="#">
<img src="images/icons/256/256_maps_nowords_colored.png" alt="map">
<p>Map</p>
</a>
</div>
</div>
</div>
<!-- /responsive grid --- list of categories--> <!-- id attractions -->
<div data-role="page" id="attractions">
<div data-role="header" data-theme="b" data-position="fixed">
<h1>Attractions</h1>
<a href="#left-panel1" data-icon="grid" class="ui-btn-left">Menu</a>
<a href="#map" class="ui-btn ui-shadow ui-corner-all ui-icon-location ui-btn-icon-notext ui-btn-inline"></a>
</div><!-- /header -->
<div role="main" class="my-page ui-content jqm-fullwidth">
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search..." data-inset="true">
<li><a href="#LaMesaDam">
<img src="images/LaMesaDam.png" class="ui-li-thumb">
<h2>La Mesa Dam</h2>
<p>121 km</p>
<!--<p class="ui-li-aside">iOS</p>-->
</a></li>
<li><a href="#LaMesaDam">
<img src="images/LaMesaEcoPark.png" class="ui-li-thumb">
<h2>La Mesa Eco Park</h2>
<p>at Quezon City</p>
<!--<p class="ui-li-aside">BlackBerry</p>-->
</a></li>
<li><a href="#LaMesaDam">
<img src="images/QuezonMemorialCircle.png" class="ui-li-thumb">
<h2>Quezon Memorial Circle</h2>
<p>at Quezon City</p>
<!--<p class="ui-li-aside">Windows Phone</p>-->
</a></li>
<li><a href="#LaMesaDam">
<img src="images/LaMesaDam.png" class="ui-li-thumb">
<h2>La Mesa Dam</h2>
<p>at Quezon City</p>
<!--<p class="ui-li-aside">iOS</p>-->
</a></li>
<li><a href="#LaMesaDam">
<img src="images/LaMesaEcoPark.png" class="ui-li-thumb">
<h2>La Mesa Eco Park</h2>
<p>at Quezon City</p>
<!--<p class="ui-li-aside">BlackBerry</p>-->
</a></li>
<li><a href="#LaMesaDam">
<img src="images/QuezonMemorialCircle.png" class="ui-li-thumb">
<h2>Quezon Memorial Circle</h2>
<p>at Quezon City</p>
<!--<p class="ui-li-aside">Windows Phone</p>-->
</a></li>
<li><a href="#LaMesaDam">
<img src="images/LaMesaDam.png" class="ui-li-thumb">
<h2>La Mesa Dam</h2>
<p>at Quezon City</p>
<!--<p class="ui-li-aside">iOS</p>-->
</a></li>
<li><a href="#LaMesaDam">
<img src="images/LaMesaEcoPark.png" class="ui-li-thumb">
<h2>La Mesa Eco Park</h2>
<p>at Quezon City</p>
<!--<p class="ui-li-aside">BlackBerry</p>-->
</a></li>
<li><a href="#LaMesaDam">
<img src="images/QuezonMemorialCircle.png" class="ui-li-thumb">
<h2>Quezon Memorial Circle</h2>
<p>at Quezon City</p>
<!--<p class="ui-li-aside">Windows Phone</p>-->
</a></li>
</ul>
</div><!-- /content -->
<!-- id nav-panel-->
<div data-role="panel" id="left-panel1" data-theme="b">
<ul data-role="listview" data-theme="b" data-divider-theme="b" data-inset="false">
<li data-icon="false"><a href="#home">Home</a></li>
<li data-icon="false"><a href="#map">Map</a></li>
<li data-role="list-divider">Categories</li>
<li><a href="#attractions">Attractions</a></li>
<li><a href="#home">Dining</a></li>
<li><a href="#home">Education</a></li>
<li><a href="#home">Events</a></li>
<li><a href="#home">Holy Places</a></li>
<li><a href="#home">Hospitals</a></li>
<li><a href="#home">Hotels</a></li>
<li><a href="#home">Shopping</a></li>
<li><a href="#home">Services</a></li>
<li><a href="#home">Transport</a></li>
</ul>
</div><!-- /panel -->
</div><!-- /page -->
<!-- portfolio page 1 -->
<div data-role="page" id="LaMesaDam" data-title="LaMesaDam">
<div data-role="header" data-theme="b" data-position="fixed">
<h1>Attractions</h1>
<a href="#left-panel2" data-icon="grid" class="ui-btn-left">Menu</a>
<a href="#" class="ui-btn ui-shadow ui-corner-all ui-icon-location ui-btn-icon-notext ui-btn-inline"></a>
</div>
<div role="main" class="desc_img my-page ui-content jqm-fullwidth">
<div>
<img class="imgdisplay" src="images/LaMesaDam.png">
<p> <img style="width:16px;" src="images/icons/193-location-arrow.png"> 12 km </p>
</div>
<div role="main" class="my-page desc_page ui-content jqm-fullwidth">
<h1>La Mesa Dam</h1>
<h5>The La Mesa Dam is a dam in Quezon City in the Philippines. It is part of the Angat-Ipo-La Mesa water system, which supplies most of the water supply of Metro Manila. The La Mesa Dam is an earth dam whose reservoir can hold up to 50.5 million cubic meters occupying an area of 27 square kilometers.
Metro Manila and its surrounding areas are divided into two water concessionaires: Maynilad Water (red) and Manila Water (blue).
The water collected in the reservoir is treated on-site by the Maynilad Water Services, and at the Balara Treatment Plant further south by the Manila Water. Both water companies are private concessionaires awarded by the Metropolitan Waterworks and Sewerage System, the government agency in charge of water supply.</h5>
<a href="#nearby" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-right ui-icon-carat-r">Nearby Places</a>
</div>
</div>
<!-- id nav-panel-->
<div data-role="panel" id="left-panel2" data-theme="b">
<ul data-role="listview" data-theme="b" data-divider-theme="b" data-inset="false">
<li data-icon="false"><a href="#home">Home</a></li>
<li data-icon="false"><a href="#map">Map</a></li>
<li data-role="list-divider">Categories</li>
<li><a href="#attractions">Attractions</a></li>
<li><a href="#attractions">Dining</a></li>
<li><a href="#attractions">Education</a></li>
<li><a href="#attractions">Events</a></li>
<li><a href="#attractions">Holy Places</a></li>
<li><a href="#attractions">Hospitals</a></li>
<li><a href="#attractions">Hotels</a></li>
<li><a href="#attractions">Shopping</a></li>
<li><a href="#attractions">Services</a></li>
<li><a href="#attractions">Transport</a></li>
</ul>
</div><!-- /panel -->
</div>
<!-- /responsive grid --- list of categories--> <!-- id attractions -->
<div data-role="page" id="nearby">
<div data-role="header" data-theme="b" data-position="fixed">
<h1>Attractions</h1>
<a href="#left-panel3" data-icon="grid" class="ui-btn-left">Menu</a>
<a href="#map" class="ui-btn ui-shadow ui-corner-all ui-icon-location ui-btn-icon-notext ui-btn-inline"></a>
</div><!-- /header -->
<div role="main" class="my-page ui-content jqm-fullwidth">
<ul data-role="listview" data-inset="true">
<li><a href="#LaMesaDam">
<img src="images/QuezonMemorialCircle.png" class="ui-li-thumb">
<h2>Quezon Memorial Circle</h2>
<p>at Quezon City</p>
<!--<p class="ui-li-aside">Windows Phone</p>-->
</a></li>
<li><a href="#LaMesaDam">
<img src="images/LaMesaDam.png" class="ui-li-thumb">
<h2>La Mesa Dam</h2>
<p>at Quezon City</p>
<!--<p class="ui-li-aside">iOS</p>-->
</a></li>
<li><a href="#LaMesaDam">
<img src="images/LaMesaEcoPark.png" class="ui-li-thumb">
<h2>La Mesa Eco Park</h2>
<p>at Quezon City</p>
<!--<p class="ui-li-aside">BlackBerry</p>-->
</a></li>
<li><a href="#LaMesaDam">
<img src="images/QuezonMemorialCircle.png" class="ui-li-thumb">
<h2>Quezon Memorial Circle</h2>
<p>at Quezon City</p>
<!--<p class="ui-li-aside">Windows Phone</p>-->
</a></li>
</ul>
</div><!-- /content -->
<!-- id nav-panel-->
<div data-role="panel" id="left-panel3" data-theme="b">
<ul data-role="listview" data-theme="b" data-divider-theme="b" data-inset="false">
<li data-icon="false"><a href="#home">Home</a></li>
<li data-icon="false"><a href="#attractions">Map</a></li>
<li data-role="list-divider">Categories</li>
<li><a href="#attractions">Attractions</a></li>
<li><a href="#attractions">Dining</a></li>
<li><a href="#attractions">Education</a></li>
<li><a href="#attractions">Events</a></li>
<li><a href="#attractions">Holy Places</a></li>
<li><a href="#attractions">Hospitals</a></li>
<li><a href="#attractions">Hotels</a></li>
<li><a href="#attractions">Shopping</a></li>
<li><a href="#attractions">Services</a></li>
<li><a href="#attractions">Transport</a></li>
</ul>
</div><!-- /panel -->
</div><!-- /page -->
<!-- MAP here -->
<div data-role="page" id="map" data-title="map" data-url="map">
<div data-role="header" data-theme="b" data-position="fixed">
<h1>Map</h1>
<!--<a href="#left-panel2" class="ui-btn ui-shadow ui-corner-all ui-icon-grid ui-btn-icon-notext ui-btn-inline"></a>-->
<a href="#left-panel4" data-icon="grid" class="ui-btn-left">Menu</a>
<a href="#map" class="ui-btn ui-shadow ui-corner-all ui-icon-location ui-btn-icon-notext ui-btn-inline"></a>
</div>
<div role="main" class="ui-content" id="map-canvas">
<!-- map loads here... -->
</div>
<!-- id nav-panel-->
<div data-role="panel" id="left-panel4" data-theme="b">
<ul data-role="listview" data-theme="b" data-divider-theme="b" data-inset="false">
<li data-icon="false"><a href="#home">Home</a></li>
<li data-icon="false"><a href="#map">Map</a></li>
<li data-role="list-divider">Categories</li>
<li><a href="#attractions">Attractions</a></li>
<li><a href="#attractions">Dining</a></li>
<li><a href="#attractions">Education</a></li>
<li><a href="#attractions">Events</a></li>
<li><a href="#attractions">Holy Places</a></li>
<li><a href="#attractions">Hospitals</a></li>
<li><a href="#attractions">Hotels</a></li>
<li><a href="#attractions">Shopping</a></li>
<li><a href="#attractions">Services</a></li>
<li><a href="#attractions">Transport</a></li>
</ul>
</div><!-- /panel -->
</div>
<!-- / MAP here -->
</body>
</html>
Attached here is a screenshot. 
