• bMap
• Examples
• Documentation
• Download
• Change Log
• Twitter
• Forum
• www.blocsoft.com

bMap - Examples

Custom Marker Icon with Google Maps V3 API and bMap 1.3.1:

How its done:

To get custom markers with the V3 of the Google maps API you need to be using bMap version 1.3.1
The custom icon is used when an image URL is passed into the marker object as "icon".

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script src="jQuery.bMap.1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){ 
	$("#map1").bMap({
		mapZoom: 11,
		mapCenter:[51.501690392607,-0.1263427734375],
		markers:{"data":[ //How to immediately add markers to the map
			{
				"lat":51.49757618329838,
				"lng":-0.1746654510498047, 
				"title":"Science Museum", 
				"body":"Exhibition Road, London SW7",
				//How to use a custom marker in bMap1.3.1
				"icon":"http://www.rapidonline.com/netalogue/brands/Science%20Museum.jpg"
			},{
				"lat":51.47769451182406,
				"lng":-0.0009441375732421875, 
				"title":"Royal Observatory Greenwich", 
				"body":"Blackheath Ave, Greenwich, London SE10",
				"icon":"http://www.cod1.co.uk/forum/images/smilies/s1/telescope.gif"
			}	//keep adding as many markers as you need....
		]}
	});
});

</script>
<div style="width:80%;height:400px;margin:0 auto" id="map1">
</div>

bMap Constructor Marker Options:

markers:
	name			string		visual name for the layer, appears in layerbar
	type			string		describes the type of layer
	visible			string		("true"/"false") if the layer should start visible
	data			array		array of bMap marker objects, rendered as GMarkers
	icon			string		address of an image to use as the icon, omit for the default red pushpin