title: Replace Google Map with image when offline
body: <p>I'm fairly new to javascript and I'm just wondering if there is a way to change a div that has a google map in it, to a static image when connection gets lost. The code does location tracking, so caching the map would be useless to me. I have a function that updates the map every 10 seconds (this will be used in a car with a mobile wifi system), but does so only when there is a connection. Is there a way I can change the map to an image when offline? I've tried using the visibility and display properties, but the map remains in place. The image I want to overlay is id="alt_img"</p>
  
  <pre><code>&lt;div id="right_top_div" style="position:absolute; right: 0; width:50%; height:768px; z-index:10; background-color: #FFF" &gt;
      &lt;img id="show_more_button" src="images/show_more_button.png" style="position:absolute; left:0;top:38%; width:40px; height:150px; z-index: 12" /&gt;
      &lt;img id="alt_img" style="position:absolute;left:0%;visibility:hidden; z-index:10" src="images/greencab_ad.png" /&gt;
      &lt;div id="map_canvas" style="position:absolute; right:0; width:100%; height:100%; background-color: #FFF" &gt;
          &lt;img style="position:absolute;left:48%;top:50%; z-index:1" src="images/ajax-loader.gif" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>