Menu
I am simply trying to display a google map within a jquery mobile page. If I load the page directly it works. However, if I navigate to the page from another page it only renders a single map tile. At first glance it would appear that my issue was similar to https://forum.jquery.com/topic/google-maps-inside-jquery-mobile
However, I was already performing my initialization within the 'pageinit' event and my map div has a set width and height.
I have seen http://code.google.com/p/jquery-ui-map/ but I would rather not use a (another) third party plugin if at all possible.
Here's what my page looks like:
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="cordova-1.6.1.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.1.0.min.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src="global.js"></script>
<script src="jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div id="mapPage" data-role="page">
<style type="text/css">
html
{
height: 100%;
}
body
{
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas
{
height: 100%;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=***API_KEY_REMOVED***&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var height = $(window).height() - 50;
var width = $(window).width();
$("#map_canvas").height(height);
$("#map_canvas").width(width);
var myLatlng = new google.maps.LatLng(39.962799, -82.999802);
var myOptions = {
center: myLatlng,
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
//alert($(map.getDiv()).width());
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: ""
});
google.maps.event.trigger(map, 'resize')
}
$("#mapPage").live('pageinit', function () {
initialize();
});
</script>
<div data-role="header" id="menuHeader">
<a href="MenuDialog.htm" class="menuLink" data-role="none" data-rel="dialog">
<img class="headerIcon" style="height: 40px; border-right: 1px solid #333333; padding-right: 5px;"
id="MenuIcon" src="images/menuIcon.png" /></a>
<p>
Loc
</p>
</div>
<div data-role="content">
<div id="map_canvas" style="margin-top: 50px;">
</div>
</div>
</body>
<html>
Thanks in advance for you help.
Update:
After some experimenting I added the following delay to my resize event:
setTimeout(function() {
google.maps.event.trigger(map,'resize');
}, 500);
This seemed to fix the issue. Hopefully this helps someone else.
727
I read on a website that if you have this problem it's beacuse the dom isn't totally loaded when you initialize your google map. You must add this in your code:
$( document ).bind( "pageshow", function( event, data ){
google.maps.event.trigger(map, 'resize');
});
It works for me. It's maybe brutal to resize at every page you show but ... it works.
184
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
