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

bMap - Examples

Custom click actions for markers:

How its done:

This example shows how to show an alert box instead of a normal infoWindow. By building on this example you could create your own custom infowindow, or change the event from a click to a hover.

The marker click event is created in the insertMarkers function of bMap. You will need to override this function with your own custom version (you could also edit the bmap javascript file directly if you so wish). In this example I have replaced the infowindow with an alert popup box.

To override the default bMap object function we assign a new function to it as shown below. There is some default behaviour you should leave alone unless you are confident you know what you are doing, I have tried to make it clear where the actual click actions take place.

We have used example 4 as a base, and we have passed in a title and address with the markers. These values are available to you as val.title and val.body. If you are familiar with JSON notation you could in theory extend this further.

The normal bMap code only assigns click events to markers that were created with a title; you can change that requirement here too.

My aim with bMap was to simplify tasks that I thought people would want from google maps, but perhaps the google API didnt quite provide. I will certainly consider including a way to override the click event in a jQuery friendly way in future releases if people want it. I do apologise that this solution is daunting for people not familiar with javascript and object orientated programming. If you need more help, then please leave a comment, or email me.

More information about the google events can be found here:
http://code.google.com/apis/maps/documentation/reference.html
Marc shows how to make a custom info window here:
http://marcgrabanski.com/article/jquery-google-maps-tutorial-basics
More information about javascript objects can be found here:
http://phrogz.net/js/Classes/ExtendingJavaScriptObjectsAndClasses.html

<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">
////////////////////////////////////////////////////////////////////////////////////////////
//	Here we overide the normal action of the insertMarkers function to alter the click event
//
bMap.prototype.insertMarkers = function(incomingMarkers){
	//this is essential bMap stuff, best left alone
	tmpThis = this;var newIndex=tmpThis.layerMgrArray.length;var markersDefaults={name:"Layer"+newIndex,type:"marker",visible:"true"};var incomingMarkers = $.extend(markersDefaults, incomingMarkers);tmpThis.layerMgrArray[newIndex]=incomingMarkers;	tmpThis.layerMgrArray[newIndex].toggleLayer = function(){if( this.visible!="false" ){		this.visible="false";for(i=0, j=this.data.length; i < j; i++){this.data[i].hide();}			$('#bMapLyr'+newIndex).addClass('bLyrHide');return false;}else{this.visible="true";			for(i=0, j=this.data.length; i < j; i++){this.data[i].show();}$('#bMapLyr'+newIndex).removeClass('bLyrHide');return true;}};jQuery.each(incomingMarkers.data, function(i,val){	var point = new GLatLng(val.lat, val.lng);if (val.icon){tmpThis.layerMgrArray[newIndex].data[i] = new GMarker(point,tmpThis.icons[parseInt(val.icon)]);}else{tmpThis.layerMgrArray[newIndex].data[i] = new GMarker(point);}
		
		//the click event is only added to markers that came with text data
		//(you may not want this check, and add a click event to all markers)
		if(val.title){
			var html = "<h2>"+val.title+"</h2>";
			if(val.body){html+=val.body}
			//this binds a click function to the marker, you could make this a hover event
			GEvent.addListener(tmpThis.layerMgrArray[newIndex].data[i], "click", function(){
	///////////////////////////////////////////////////////////////////////////////	
	//			add your own custom marker event actions here...
	//
				alert(val.title);  //a simple alert box

	//			original bMap infowindow code...
	//			tmpThis.layerMgrArray[newIndex].data[i].openInfoWindowHtml(html);
	//
	////////////////////////////////////////////////////////////////////////////////
				//clear the sidebar highight
				$('#'+tmpThis.mapSidebar+' div').removeClass('bSideSelect');
			});
		}

		tmpThis.map.addOverlay( tmpThis.layerMgrArray[newIndex].data[i] );if(tmpThis.useSidebar){	$('<div rel="'+newIndex+'">' + val.title + '</div>').click(function(){GEvent.trigger(tmpThis.layerMgrArray[newIndex].data[i], 'click');$('#'+tmpThis.mapSidebar+' div').removeClass('bSideSelect');$(this).addClass('bSideSelect');}).appendTo("#"+tmpThis.mapSidebar);}});this.refreshLayerbar();return this;
}
//
//	The end of the tweaked code, copy and paste to here
//	place this block of code into your own script file
/////////////////////////////////////////////////////////////////////////////////////

// example 4 code....
$(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>