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

bMap - Examples

Basic example:

How its done:

In this example we have set the zoom level, and the center position (as an array format [lat,lng]). These are very similar to the Google declerations used in creating a map. There is another option mapType which is similar to the Google API, it accepts: G_NORMAL_MAP G_SATELLITE_MAP or G_HYBRID_MAP.

<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: 13,
			mapCenter:[51.501690392607, -0.1263427734375]
		});
	});
	
</script>
<div style="width:80%;height:400px;margin:0 auto" id="map1">
</div>

bMap Constructor Options:

(the IDs passed to bMap functions DON'T have the # used in jQuery selectors)

$(element).bMap(options);
options:
	mapCenter		array		latitude and logitude
	mapZoom			integer		starting zoom
	mapCanvas		string		the ID of the div to render the map
	mapSidebar		string		the ID of the div to render a clickable sidebar of the markers
	mapLayerbar		string		the ID of the div to render a clickable sidebar of the layers visible on the map
	mapType			integer		the type of map tiles to load (G_NORMAL_MAP G_SATELLITE_MAP G_HYBRID_MAP) refer to the google docs
	loadMsg			string		message shown on map during AJAX operations
	markers			object		bMap markers object, used to pre-draw some markers on the map
	icons			array		array of GIcon objects

If you don't know the LatLng of the place on the map you need, then you can use the following function to center the map: centerAtAddress. This is a wrapper for the google client geocoder.

$(document).ready(function(){ 
	$("#map1").bMap({
		mapZoom: 13
	});
	$("#map1").data("bMap").centerAtAddress("London, UK");
});