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 rend
I think the right approach would be to trigger the event when partial tile is loaded once. Below code snippet will help you in achieving that.
google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
google.maps.event.trigger(map,'resize');
});
You have <html>
and <body>
at 100% size, but not the <div>
s in the hierarchy between <body>
and <div id="map_canvas">
.
Try adding those to your CSS as well (the content
one will need an id
).
You may also need to ensure that the API knows the size of the map <div>
by triggering a resize
event when everything is ready. Showing only a single tile is a classic symptom of the API getting it wrong (and generally assuming it has zero size).
Instead of firing a resize, I solved this by wrapping my js in a 'pagecreate' event... like this:
$(document).on('pagecreate', '#map', function() {
var mapOptions = {
center: new google.maps.LatLng(40.773782,-73.974236),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
});
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.
I found the issue for me was that JQuery mobile uses Ajax to load the pages. I am not sure if it is the best practice but I simply forced it to load my map page normally by putting the following code in the anchor tag:
data-ajax="false"