Hi guys we have a google map v3 which loads in markers when dragged via ajax - I'm all ok with that - I'm just wondering how to add a loading bar on my map - I'm already using

container.style.filter = "alpha(opacity=60);";
                container.style.opacity = 0.6;  

and something else to stop dragging.

What's the best way to do that - if poss I would like to use some html and not an image.

Thanks Richard

Hi guys we have a google map v3 which loads in markers when dragged via ajax - I'm all ok with that - I'm just wondering how to add a loading bar on my map - I'm already using

container.style.filter = "alpha(opacity=60);";
                container.style.opacity = 0.6;  

and something else to stop dragging.

What's the best way to do that - if poss I would like to use some html and not an image.

Thanks Richard

• javascript
• google-maps
• overlay
• loading

Share Improve this question Follow asked May 2, 2012 at 15:38 Richard HoushamRichard Housham 86422 gold badges1717 silver badges3434 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

I got the same problem and solved it by adding a layer over the map (In my case, I just need the loading, and I don't have any other reason to add another plugin):

HTML:

<div id="holder" style="position: relative;">
    <div class="overlay standard hidden">&nbsp</div>
    <div id="map"></div>
</div>

CSS:

div#holder {
    position: relative;
}

.hidden {
    display: none;
}

div.overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: 0.7;
    z-index: 1;
}

div.overlay.standard { background: #fff url(/image/loading.gif) no-repeat 50% 50%; }

1. If you just want something that will place a rectangle containing text on the map, essentially a label, you may want to consider an: InfoBox
2. If you want something that dynamically displays progress, you may want to use the: ProgressBarControl