Author: José Fernando Calcerrada
Licence: Licensed under GPL licenses.

Comments can be sent to: .

Contents

  1. Introduction
  2. Demo
  3. Getting started
  4. Examples
  5. Reference Table of Contents
  6. Download
  7. Changelog

Introduction

It's a adaptation for V3 style of the ProgressBarControl. The idea is the same, but I changed the style and differents concepts for functions.

New version 1.1 with visualization for IE fixed

Getting started

You need include the Google Masp API v3 first. Yo user the progressBar plugin inside the <head> tag of your HTML document:

        <script type="text/javascript" src="/path/to/progressBar.js"></script>
      

and now, after map it's inizializated, only need call this function and put over map as a control:

        var pb = pregressBar(?options);
        map.controls[google.maps.ControlPosition.RIGHT].push(pb.getDiv());
      

Now let's draw, we have two options

The progressBar will be drawed in the node of mapDiv, but now it's hidden.

We need init it with the number of elements that we will to load in the map, ie. 200 markes:

        pb.start(200);
      

Now, the progressBar is showed and we can update the progressBar, increase in one:

        pb.updateBar(1);
      

In any moment or normaly when it is at 100 percent, we can hide it:

        pb.hide()
      

Examples

An example of how it works.

Reference Table of Contents

Constructor
ConstructorDescription
progressBar(mapDiv:Node, opts?:progressBarOptions) Creates a new progressBar over your map
Methods
MethodsReturn valueDescription
getCurrent() Number Increase the progressBar in the number of the value. Only if progressBar is init() and it is not hide. Return the current value of the progressBar.
getTotal() Number Returns the total of the progressBar
hide() None Hide the progreesBar.
setTotal(total:Number) Integer Change the total value without reset the current value.
setCurrent(current?:Number) None Increase the progressBar in the number of the value. Only if progressBar is init() and it is not hide. Return the current value of the progressBar.
start(total:Number) Number Set the total of the progressBar, show it and return the total. If we recall this method the total is set to the new value and the current is setted at 0.
updateBar(increase?:Number) Number Increase the progressBar in the number of the value. Only if progressBar is init() and it is not hide. Return the current value of the progressBar. If the parameter is omitted, return the current value.
progressBarOptions
PropertiesTypeDescription
bacgroundColor String The stroke color of the label in HTML hex style, ie. "#FFFF00"
opacity Number The stroke opacity of the label betwenn 0.1 and 1.0
strokeColor String The stroke color of the polyline in HTML hex style, ie. "#FFFF00"
strokeOpacity Number The stroke opacity of the polyline betwenn 0.1 and 1.0
strokeWeight Number The stroke width of the polyline in pixels.
zIndex boolean True, the label over polyline. False, under polyline.

Download

Normal Version: Click to download progressBar.js

Chagelog

Version 1.1