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

bMap - Examples

1. Basic example	2. Markers in constructor	3. Markers, polylines & polygons
4. Marker sidebar	5. Layer Sidebar	6. AJAX Layers
7. Advanced AJAX	8. Google Functions	9. Custom Icons
10. Advanced marker events	11. Image Overlay Function	12. New sidebar features

Markers and a sidebar:

How its done:

By telling the bMap object to use a sidebar, the sidebar is populated automatically with a clickable div element. Use CSS to style the sidebar, the most recently clicked item has a class added so you can style that too.

<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?file=api&v=2&key=YOUR_GOOGLE_KEY" type="text/javascript"></script>
<script src="jQuery.bMap.1.2.3.js" type="text/javascript"></script>
<style type="text/css">
<!--
	#map{ width:500px;height:500px;float:left }
	#sideBar{ width:200px;height:500px;text-align:center;background:#fff;float:right }
	#sideBar div{ padding:2px 0; cursor:pointer }
	#sideBar div:hover{ text-decoration:underline }
	#buttons{ clear:both;text-align:center }
	.bSideSelect{ background:#dadae3; } /* clicked items get this class */
-->
</style>
<script type="text/javascript">

$(document).ready(function(){ 
	$("#map").bMap({
		mapZoom: 11,
		mapCenter:[51.501690392607,-0.1263427734375],
		mapSidebar:"sideBar", //id of the div to use as the sidebar
		markers:{"data":[
			{
				"lat":51.49757618329838,"lng":-0.1746654510498047,"title":"Science Museum","body":"Exhibition Road, London SW7"
			},{
				"lat":51.47769451182406,"lng":-0.0009441375732421875,"title":"Royal Observatory Greenwich","body":"Blackheath Ave, Greenwich, London SE10"
			},{
				"lat":51.49624032118747,"lng":-0.10857582092285156,"title":"Imperial War Museum","body":"Lambeth, London, SE1"
			},{
				"lat":51.51792987720294,"lng":-0.1272869110107422,"title":"British Museum"					
			},{
				"lat":51.495625811469374,"lng":-0.17642498016357422,"title":"Natural History Museum","body":"Cromwell Road, London, SW7"					
			},{
				"lat":51.50177053585362,"lng":-0.12908935546875,"title":"Churchill Museum"					
			}
		]}
	});
});

</script>
<div style="width:700px;height:500px;margin:0 auto">
	<div id="map"></div>
	<div id="sideBar"></div>
</div>

Comments:

Name:	(*required)
Email:	(*private)
Subject:	(*required)
Comment: