Hi I am trying to add google map on a JQM page but it does not render properly.
I only can see partial map not the whole map. Can some one please let me know
how to resolve this issue. Here is the code. Thanks in advance.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Main Page</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css";
/>
<script src="http://code.jquery.com/jquery-1.4.3.min.js";></script>
<script
src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js";></script>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false";></script>
<script type="text/javascript">
// When map page opens get location and display map
$('.page-map').live("pagecreate", 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>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>Main Page</h1></div>
<div data-role="content">
<p><a href="#mapPage">Map</a></p>
</div>
</div>
<div data-role="page" data-theme="b" class="page-map"
style="width:100%; height:100%;" id="mapPage">
<div data-role="header"><h1>Map Page</h1></div>
<div data-role="content" style="width:100%; height:100%;
padding:0;">
<div id="map_canvas" style="width:100%;
height:100%;"></div>
</div>
</div>
</body>
</html>
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
