Home/ Questions/Q 7990393
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T12:59:40+00:00

I’m fairly new to javascript and I’m just wondering if there is a way

  • 0

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”

<div id="right_top_div" style="position:absolute; right: 0; width:50%; height:768px; z-index:10; background-color: #FFF" >
    <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" />
    <img id="alt_img" style="position:absolute;left:0%;visibility:hidden; z-index:10" src="images/greencab_ad.png" />
    <div id="map_canvas" style="position:absolute; right:0; width:100%; height:100%; background-color: #FFF" >
        <img style="position:absolute;left:48%;top:50%; z-index:1" src="images/ajax-loader.gif" />
    </div>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    what about just having the image in another div that is on top (z-index) of the map, and then you would just adjust it’s visibility, not really changing the map itself (that way you wouldn’t have to re-initialize the map over and over, as those would count against your map quota):

    <div id="right_top_div" style="position:absolute; right: 0; width:50%; height:768px; z-index:10; background-color: #FFF" >
    <div id="not_connected" style="position:absolute; right:0; width:100%; height:100%; z-index:15; display:none;"><img src="image_for_no_connection.png"></div>
    <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" />
    <img id="alt_img" style="position:absolute;left:0%;visibility:hidden; z-index:10" src="images/greencab_ad.png" />
    <div id="map_canvas" style="position:absolute; right:0; width:100%; height:100%; background-color: #FFF" >
        <img style="position:absolute;left:48%;top:50%; z-index:1" src="images/ajax-loader.gif" />
    </div>

    • 0