Question

I am trying to show either google map or image. So, what i want is that for default i want to show the image, if image does not exist, show google map. To do so, as a default I disable google maps with #map_canvas {display:none;}. Then, I need something like a boolean conditions that checks existence of image then, returns true or false, if it is false, display maps, by changing display=”block”;. But, I do not how to do that exactly, Can you please help me ?

By the way, two codes separately work fine.

Answer 1

To show #map_canvas if the image does not load into #worldMap use

var img = document.getElementById("worldMap");
img.src = "http://www.freeworldmaps.net/download/maps/political-world-map-big.gif";

img.onerror = function( ) {
    img.style.display = "none";
    document.getElementById("map_canvas").style.display = "block";
}​​​​​​​​​​​​​​​​​

You obviously have to not specify the src attribute in your img tag but set it as above when the page loads.

Fiddle here