谷歌地图加载后隐藏加载图像

Question

I added a loading image to Google map api v3. On button click, the loading image shows up, but I am unable to hide the loading image after the map is loaded. Please help me with some tips.

Google map is present under div id: map_canvas

Loading image is present under div id: inner

I am using the code: $('div.inner').show(); to show the loading image after button click.

I tried this code to hide the loading image but it didn't work:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(window).load(function(){
      $("#inner").hide();
})
</script>

I also tried using $(map_canvas).load(function()...

and I also tried adding $("#inner").hide(); in the last line of map code. but nothing worked.

Please help me hide the loading image after google map is loaded completely.

Edit:...........................................................................

I got it.

create a function like this:

function hide()
    {
        $('div.inner').hide();
    }

and call it in the last line of map code, it worked.

Answer 1

I don't use jQuery, so I'd do it like this:

var loadingDiv = document.getElementById('inner');
loadingDiv.style.display = 'none';

Answer 2

you can check out tilesloaded event in google map api v3. Check out SAMPLE PAGE