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

bMap - Examples

Getting markers from an AJAX source:

How its done:

In this example we have retrieved marker data from another page using AJAX. View that page here. As you can see, its JSON, and in the same format as used with the insertMarkers function (from example 4).
For each of the basic layer functions, there is an AJAX version too:
insertMarkers and AJAXMarkers
insertLine and AJAXLine
insertPolygon and AJAXPolygon
The AJAX response in eash case is internally handled by the corresponding layer function, so the JSON needed is the same. The AJAX request is a POST request, and you can configure the POST variables. See the advanced AJAX example for more information.

<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 }
	/* clicked items get this class */
	.bSideSelect{ background:#dadae3; }
	/* While AJAX loads, a message appears. Use this class to style that message. ALWAYS have: position:relative; display:none; */
	.bMapLoadMsg{ position:relative; display:none; 
		background:#fff;opacity:0.8;padding:10px;width:200px;text-align:center;border:2px solid #000;
	}
-->
</style>
<script type="text/javascript">
	//Basic bMap setup...
	$(document).ready(function(){ 
		$("#map").bMap({
			mapZoom: 11,
			mapCenter:[51.501690392607,-0.1263427734375],
			mapSidebar:"sideBar",
		});
		//Here we get the markers from another page with AJAX
		$('#map').data('bMap').AJAXMarkers({	
			serviceURL: 'example6_AJAX.asp'
		});
	});
</script>
<div style="width:700px;height:500px;margin:0 auto">
	<div id="map"></div>
	<div id="sideBar"></div>
</div>

AJAX Options:

AJAXMarkers Options:
	serviceURL		string		the target page for the AJAX request
	action			string		string posted to the AJAX page
	vars			array		array of strings posted to the target page to aid the developer
	
Defaults:
	serviceURL		mapService.php
	action			getPoints

Markers JSON:
	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			integer		renders the marker with a custom icon from the icons array

$("#map").data('bMap').insertMarkers( {"data":[ { "lat":51.4776,"lng":-0.00094413,"title":"Greenwich Park","body":"Find out <a href='http://en.wikipedia.org/wiki/Greenwich_Park'>more</a>" } ]} );