CODEWITHSUNDEEP
javascripthtmlcssgoogle-maps
erasmuss22
erasmuss22

Reputation: 105

Replace Google Map with image when offline

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>

Upvotes: 1

Views: 1113

Answers (2)

dda
dda

Reputation: 6203

You can periodically save an image of the current map:

var google_tile = "http://maps.google.com/maps/api/staticmap?sensor=false&center="+
  currentPosition.lat() + "," + currentPosition.lng()+
  "&zoom="+selectedZoom+"&size="+w+"x"+h;
// w=width of canvas/map; h = height

var canvas = document.getElementById("saved_image");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function(){
  context.drawImage(imageObj, 0, 0);
}
imageObj.src = google_tile;

There you go, the canvas saved_image contains now a "screenshot" of your map. Put that into a function, and call it regularly. When the connection drops, display that instead.

Upvotes: 1

Robot Woods
Robot Woods

Reputation: 5687

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>

Upvotes: 2

Related Questions