• bMap
• Examples
• Documentation
• Download
• Change Log
• Twitter
• Forum

bMap - Examples

Advanced AJAX

How its done:

In this example we have used the full power of the AJAX functions. There are three variables you can set when using the AJAX functions. The first allows you to set the target URL of the AJAX request. To make it easy for you to process your data, and build the JSON response, there are two ways to pass data to the server. You can use the action variable, this takes a single string. Or if you need to send lots of information you can use the vars variable. Vars is passed to the function as an array, and is delivered server-side as an array too. These values are POSTed to the AJAX page.

This example also shows how to change the loading message to an animated GIF, and use satellite images on the map.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2&key=YOUR_GOOGLE_KEY" type="text/javascript"></script>
<script type="text/javascript" src="jQuery.bMap.1.2.3.js"></script>
<style type="text/css">
<!--
	#map{ width:500px;height:500px;float:left }
	#layerBar{ width:200px;height:500px;text-align:center;background:#fff;float:right }
	#layerBar div{ padding:2px 0; cursor:pointer }
	#layerBar div:hover{ text-decoration:underline }
	#buttons{ clear:both;text-align:center }
	.bLyrHide{ color:#ddd; }
	.bMapLoadMsg{ position:relative; display:none; 
		background:#fff;opacity:0.8;width:70px;padding:10px;text-align:center;border:2px solid #000;
	}
-->
</style>
<script type="text/javascript">
	$(document).ready(function(){ 
		$("#map").bMap({
			//Here an image is used as the loading prompt...
			loadMsg:"<img src='loading.gif' alt='Loading...' width='64' height='64'>",
			mapZoom: 15,
			mapCenter: [51.31714872961282,-1.0788917541503906],
			//Here the map type is set...
			mapType: G_HYBRID_MAP,
			mapLayerbar:"layerBar"
		});
		$('#map').data('bMap').AJAXPolygon({	
			//AJAX service page
			serviceURL: 'AJAXservice.asp',
			//set the action POST var for field edges
			action: "bounds",
			//These values will be POSTed to the AJAX page as an array called 'vars' that can be used with a database ect
			vars: ['1', 'Field 1','#ff0']
		});
		$('#map').data('bMap').AJAXMarkers({	
			serviceURL: 'AJAXservice.asp',
			action: "Markers",			
			vars: ['FieldID', '1', 'Points 1']
		});
		$('#map').data('bMap').AJAXLine({	
			serviceURL: 'AJAXservice.asp',
			action: "bounds",
			vars: ['2', 'Field 2','#f0f']
		});
		$('#map').data('bMap').AJAXMarkers({ 
			serviceURL: 'AJAXservice.asp', 
			action: "Markers",
			vars: ['FieldID', '2', 'Points 2']
		});		
	});	
	//this button loads the third field
	function button1(){
		$('#map').data('bMap').AJAXMarkers({ 
			serviceURL: 'AJAXservice.asp',
			action: "Markers",
			vars: ['FieldID', '3', 'Points 3']
		});
		$('#map').data('bMap').AJAXPolygon({	
			serviceURL: 'AJAXservice.asp',
			action: "bounds",
			vars: ['3', 'Field 3','#0ff']
		});
	}
</script>
<div style="width:700px;height:500px;margin:0 auto">
	<div id="map"></div>
	<div id="layerBar"></div>
	<div id="buttons"> //this button loads the third field
		<input value="Load Field 3" type="button" onclick="button1();$(this).attr('disabled', true);">
	</div>
</div>