title: Google map sometimes not loading
body: <p>I am currently working on a phonegap application where I followed the single page architecture. I have an index page <code>index.html</code> and all others pages are added as templates.</p>
  
  <p>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.</p>
  
  <p>I have loaded the map API on <code>index.html</code>, it is available throughout the application as it was loaded on the master page.
  To load Google API I have used following link:</p>
  
  <pre><code>https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;callback=initMap
  </code></pre>
  
  <p>And to define map I have a global variable <code>map</code>, defined as:</p>
  
  <pre><code>var map = new google.maps.Map(document.getElementById("myMapCanvas"), myMapOption);
  </code></pre>
  
  <p>But for a while it loads the map, and then stops loading anything.</p>
  
  <p>I tested this in various ways:</p>
  
  <ul>
  <li>By removing other map event listeners</li>
  <li>By adding height/width on map div (as an inline style); I at first defined it via external css</li>
  <li>By defining the dimension of the map's parent div.</li>
  <li>Encapsulated the block with try/catch even though it was not throwing an exception.</li>
  </ul>