I am currently working on a phonegap application where I followed the single page architecture. I have an index page index.html and all others pages are added as templates.
I have multiple tabs where in one of them I am displaying a Google map; it works fine but after navigating to different pages, sometimes when I come back to this map page, it is no longer displaying the map. When this happens it'll never start showing it again either, I need to explicitly restart the app.
I have loaded the map API on index.html, it is available throughout the application as it was loaded on the master page.
To load Google API I have used following link:
https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initMap
And to define map I have a global variable map, defined as:
var map = new google.maps.Map(document.getElementById("myMapCanvas"), myMapOption);
But for a while it loads the map, and then stops loading anything.
I tested this in various ways:
- By removing other map event listeners
- By adding height/width on map div (as an inline style); I at first defined it via external css
- By defining the dimension of the map's parent div.
- Encapsulated the block with try/catch even though it was not throwing an exception.
