ProgressBarControl Examples

To use the progress bar, create a ProgressbarControl object by passing the GMap2 object and (optional) options to the constructor.

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37, -122), 13);
var progressbar = new ProgressbarControl(map);

Additional options can be specified using ProgressbarControlOptions. In the code below, the width of the progress bar is set to 150 pixels, and the text that is printed before progress begins (loadstring) is set to "One moment please...".

var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(37, -122), 13);
var progressbarOptions = {width: 150, loadstring: 'One moment please'};
var progressbar = new ProgressbarControl(map, progressbarOptions);

Basic Example

The following example lets you experiment with the functionality available in ProgressBarControl, providing buttons for starting, updating, and removing the control. The HTML for those buttons is shown below:

 <button onclick="progressBar.start(500);">start</button>
 <button onclick="progressBar.updateLoader(7);">updateLoader</button>
 <button onclick="progressBar.remove();">remove</button>

View example (howtouse.html)

Marker Loading Example

In the following example, we use the control to show the process of loading markers to the user. Since the browser will not update the screen unless it has time to do so, we use setTimeout with a 1 millisecond delay in between each update. The code below shows the creation of one marker at a random location in the map viewport, with an update to the loader and a setTimeout before the next marker is created:

// create a marker
function createMarker(){
  num++;
  progressBar.updateLoader(1);

  var bounds = map.getBounds();
  var southWest = bounds.getSouthWest();
  var northEast = bounds.getNorthEast();
  var lngSpan = northEast.lng() - southWest.lng();
  var latSpan = northEast.lat() - southWest.lat();
  var latlng = new GLatLng(southWest.lat() + latSpan * Math.random(), 
      southWest.lng() + lngSpan * Math.random());
  var marker = new GMarker(latlng);
  markersArray.push(marker);
  map.addOverlay(marker);

  if (num < maxNum) {
    setTimeout('createMarker()', 10);
  } else {
    progressBar.remove();
    num = 0;
  }
}

View example (markerloader.html)