I'm attempting to use the progress bar utility available from here....
http://code.google.com/p/gmaps-utility-library-dev/
I've created a map which allows the user to query locations by county
and status from a form. Depending on the selection, the query might
retrieve 2 locations or 800 locations. The progress bar seems to work
fine initially; however, after a query that retrieves 500 locations
and I attempt a new query that retrieves 4 locations, the progress bar
shows 4/500 and therefore won't disappear. I've tried and tried, but
can't figure out the fix. Any help would be appreciated- I have
samples of my code below. Thanks!
--------------------------------------------------------------------------------------------------------------------------------------
<script type="text/javascript" src="../js/map_key.js"></script>
<script type="text/javascript" src="../js/progressbarcontrol.js"></
script>
<script type="text/javascript">
//<![CDATA[
// Declare global variable--markers
var markers = [];
var progressBar;
var num = 0;
// Pass latitude/longitude location, icon specifications, and html
code to the function that creates a custom icon and marker
function createMarker(point, cat, stat, html) {
num++;
progressBar.updateLoader(1);
var icon = new GIcon();
icon.image = "rig4b.png";
icon.iconSize = new GSize(14, 14);
icon.iconAnchor = new GPoint(7, 7);
icon.infoWindowAnchor = new GPoint(7, 0);
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
setTimeout('createMarker()', 10);
}
// Process clicks on sidebar links
function myclick(num) {
GEvent.trigger(markers[num], "click")
}
// Initialize variables to be passed from the form to .php and
process user input from the form
function initialize() {
var county = "";
var stat="";
var sqlwhere="";
var frm = document.getElementById("myform");
var county = "'" + frm.county.value + "'";
var stat = "'" + frm.stat.value + "'";
var sqlwhere = "get_wells_b.php?county=" + county + "&stat=" +
stat;
// Determine if the browser can handle Google maps
if (GBrowserIsCompatible()) {
// Specify map container, location for map center/zoom level/map
type, and default controls plus overview map
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(34.894333, -92.442158), 7,
G_PHYSICAL_MAP);
map.setUIToDefault();
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
var progressbarOptions = {width: 150, loadstring: 'One moment
please...'};
progressBar = new ProgressbarControl(map, progressbarOptions);
map.enableScrollWheelZoom();
map.enableContinuousZoom();
// Read and store data from an XML file generated from .php code
// Assign point location, assign html code for the information
window, call createMarker function passing location, icon-related
details, and html code, add a marker to the map, and add a link in the
sidebar for each record in the XML file
GDownloadUrl(sqlwhere, function(data,status) {
if (status==200) {
var xml = GXml.parse(data);
var records = xml.getElementsByTagName("pt");
var side_html = '<table style="border-collapse: collapse"
border="1" cellpadding="5"> \
<thead><tr style="background-color: #e0e0e0"><td><strong>Well
Name</strong></td><td><strong>County</strong></td><td><strong>Status</
strong></td></tr></thead> \
<tbody>';
for (var i = 0; i < records.length; i++) {
var rec = records[i];
var name = rec.getAttribute("name");
var county = rec.getAttribute("county");
var x = parseFloat(rec.getAttribute("lng"));
var y = parseFloat(rec.getAttribute("lat"));
var stat = rec.getAttribute("stat");
var pt = new GLatLng(y, x);
var html = "<strong><em>Well Name</em></strong>: " + name +
"<br />" +
"<strong><em>County</em></strong>: " + county + "<br />" +
"<strong><em>Status</em></strong>: " + stat;
var marker = createMarker(pt, county, stat, html);
map.addOverlay(marker);
markers[i] = marker;
progressBar.start(markers.length);
if (num < markers.length) {
setTimeout('createMarker()', 10);
} else {
progressBar.remove();
num = 0;
}
side_html += "<tr> \
<td><a href='javascript:myclick(" + i + ")'>" + name + "</a></
td> \
<td>" + county + "</td> \
<td>" + stat + "</td> \
</tr>";
}
side_html += '</tbody></table><br />' + '<strong>Total Number of
Records</strong> = ' + '<strong>' + i + '</strong>';
document.getElementById("side_bar").innerHTML = side_html;
}
else {
alert("Problem loading XML data");
}
});
}
}
//]]>
</script>
---------------------------------------------------------------------------------------------
<form id="myform" action="" style="width: 600px;">
<fieldset>
<label><strong>County:</strong>
<select name="county">
<option value="-1">all</option>
<option value="Cleburne">Cleburne</option>
<option value="Conway">Conway</option>
<option value="Faulkner">Faulkner</option>
<option value="Franklin">Franklin</option>
<option value="Independence">Independence</option>
<option value="Jackson">Jackson</option>
<option value="Lee">Lee</option>
<option value="Phillips">Phillips</option>
<option value="Pope">Pope</option>
<option value="Prairie">Prairie</option>
<option value="Stone">Stone</option>
<option value="Van_Buren">Van_Buren</option>
<option value="White">White</option>
<option value="Woodruff">Woodruff</option>
</select>
</label>
<label><strong>Status:</strong>
<select name="stat">
<option value="-1">all</option>
<option value="Permitted Well">Permitted</option>
<option value="Complete">Completed</option>
<option value="Producing">Producing</option>
<option value="Shut In">Shut In</option>
<option value="Plugged">Plugged</
option>
</select>
</label>
<input type="button" value="Retrieve Data and Map"
onclick="initialize()" />
</fieldset>
</form>
<div id="map" style="width: 500px; height: 480px"></div>
<div id="side_bar" style="width: 400px; height: 480px; overflow:
auto"></div>
--
You received this message because you are subscribed to the Google Groups
"Google Maps API" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-api?hl=en.
