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

bMap - Examples

Using custom icon sets

How its done:

In this example we are using custom icons to improve Example 7. The markup is almost identical, except we pass an array of icons to the constructor. The icons are initialised in two separate .js files for neatness. Icons are created using the Google Maps API method. To select an icon for your markers, pass a number into the marker data (and pick that icon from the icon array).

{
	"lat":51.3157271162372,
	"lng":-1.0745573043823242, 
	"title":"Point 6", 
	"body":"Nitrogen: 3",
	"icon":"3"
}

Icon Scripts

Page Markup:

<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>
//This handy google utility is needed for the icons in set 1
<script src="http://gmaps-utility-library.googlecode.com/svn/trunk/mapiconmaker/1.1/src/mapiconmaker.js" type="text/javascript"></script>
//these two scripts create two arrays of GIcon heat and heat2
<script type="text/javascript" src="heatIcons.js"></script>
<script type="text/javascript" src="heat2Icons.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(){ 
		icons1();
	});
	function icons1(){
		$("#map").bMap({
			loadMsg:"<img src='loading.gif' alt='Loading...' width='64' height='64'>",
			mapZoom: 15,
			icons:heat,//use this icon array
			mapCenter: [51.31714872961282,-1.0788917541503906],
			mapType: G_HYBRID_MAP,
			mapLayerbar:"layerBar"
		});	
		getData();//Get some markers....
	}
	function icons2(){
		$("#map").bMap({
			loadMsg:"<img src='loading.gif' alt='Loading...' width='64' height='64'>",
			mapZoom: 15,
			icons:heat2,//go and see the scripts that generate icon arrays
			mapCenter: [51.31714872961282,-1.0788917541503906],
			mapType: G_HYBRID_MAP,
			mapLayerbar:"layerBar"
		});
		getData();
	}
	function getData(){
		$('#map').data('bMap').AJAXLine({serviceURL:'AJAXservice.asp',action:"bounds",vars:['1','Field1','#ff0']});
		$('#map').data('bMap').AJAXMarkers({serviceURL: 'AJAXservice.asp',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',vars: ['FieldID', '2', 'Points 2']});
		$('#map').data('bMap').AJAXMarkers({serviceURL: 'AJAXservice.asp',vars: ['FieldID', '3', 'Points 3']});
		$('#map').data('bMap').AJAXLine({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"> //swap icons
		<input value="Icon set 1" type="button" onclick="icons1();">
		<input value="Icon set 2" type="button" onclick="icons2();">
	</div>
</div>