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

bMap - jQuery Plugin

A google maps jQuery Plugin

The bMap jQuery plugin allows you to quickly and easily add mapping to your website. It has been designed from the beginning to handle lots of markers, lots of layers, and custom marker icons.

The plugin can manage a sidebar for you, one with a list of markers, one with a list of layers. The sidebars can be styled with CSS.

The internal Google object is exposed, so you can continue to use all of the power of the Google Maps API. You can also access the internals of the bMap object.

This is the first version of my first jQuery plugin, so there might be some bugs. So please provide some feedback (I already know that multiple maps on the same page can interfere with each others marker click events, so you are advised to have only one bMap on a page at a time). If you like bMap then show your appreciation by donating anything you can spare (nothing encourages updates more!). Or feel free to look at the code and suggest improvements.

If you use bMap on your site, then let me know at darren.dignam@blocsoft.com

The prerequisites of the plugin are jQuery and google maps. You will need to obtain your own Google API Key.

A quick example:

Example Markup:

<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>
<script type="text/javascript">
	
	$(document).ready(function(){ 
		$("#map1").bMap({
			mapZoom: 7				
		});
	});
	
</script>
<div style="width:80%;height:400px;margin:0 auto" id="map1">
</div>

This is almost the simplist example of bMap. We have selected the div with its ID, and set the zoom level. bMap defaults to a fully zoomed out map, centered on the Greenwich Meridian.