loading message with google maps V3

Trachy

unread,

Jul 25, 2010, 4:27:50 PM7/25/10

to Google Maps JavaScript API v3

Hello,
have you an example of how to realise a loading message before map
appears.
Thanks
Trachy

NWIPHPDEV

unread,

Jul 26, 2010, 2:07:18 PM7/26/10

to Google Maps JavaScript API v3

Just fill the div with a loading gif.

<script type="text/javascript">
function init(){
loadMap...blah...blah
}
</script>

<body onload="init()">
<div id="map">
<div style="text-align:center">
Loading, Please wait...<br>
<img src="my-loading-icon.gif"/>
</div>
</div>
</body>

Davide Cremonesi

unread,

Jul 29, 2010, 4:04:14 AM7/29/10

to google-map...@googlegroups.com

I would also suggest to give an id to the loading DIV and use a listener to hide it when the map is loaded (via style settings (visibility/display) or a jslib like jQuery or Dojo).
I think 'idle' is a good event, or maybe even 'tilesloaded' would do.

  google.maps.event.addListenerOnce(map, 'idle', function(){
    // hide or destroy the loading DIV
  });

Hope it helps,
Davide

2010/7/26 NWIPHPDEV <djmel...@djmeltdown.com>

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

Trachy

unread,

Jul 30, 2010, 9:53:04 AM7/30/10

to Google Maps JavaScript API v3

Hello,
Thanks for all the answers,
I solve my problem in this way

in the css file :
.messagechargement{
display : block;
height: 50px;
width: 50px;
margin-top: 235px;
margin-left:475px;
}

in the body :
<div id="overlaymessage" class="messagechargement"><img src="ajax-
loader.gif"></div>

in the load() script:

// hiking overlay message after loading map

google.maps.event.addListener(mymap,"idle", function(){
document.getElementById("overlaymessage").style.visibility='hidden';
document.getElementById("overlaymessage").style.display='none';
});

*********************************************************************************

On 29 juil, 10:04, Davide Cremonesi <dvd....@gmail.com> wrote:
> I would also suggest to give an id to the loading DIV and use a listener to
> hide it when the map is loaded (via style settings (visibility/display) or a
> jslib like jQuery or Dojo).
> I think 'idle' is a good event, or maybe even 'tilesloaded' would do.
>
> google.maps.event.addListenerOnce(map, 'idle', function(){
> // hide or destroy the loading DIV
> });
>
> Hope it helps,
> Davide
>

> 2010/7/26 NWIPHPDEV <djmeltd...@djmeltdown.com>

> > google-maps-js-a...@googlegroups.com<google-maps-js-api-v3%2Bunsub...@googlegroups.com>
> > .

> > For more options, visit this group at

> >http://groups.google.com/group/google-maps-js-api-v3?hl=en.- Masquer le texte des messages précédents -
>
> - Afficher le texte des messages précédents -

Reply all

Reply to author

Forward