bMap - Examples
There are only three examples using the V3 API - and bMap 1.3
Adding Markers, Lines and Polygons to the map
How its done:
Here we can see some fundamental bMap concepts. Firstly we can see the functions used to add content to the map, and the data structures they accept. The functions are called by accessing the bMap object that belongs to the map div.
$('#elementID').data('bMap').functions....
All the bMap functions are accessed this way, and the actual Google Maps API map object is here too.
We can also see the layer sidebar in use, and the CSS class used to highlight hidden layers.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> <script type="text/javascript" src="jQuery.bMap.1.3.js"></script> <style type="text/css"> <!-- #map{ width:500px;height:500px;float:left } #layerBar{ width:200px;height:500px;text-align:center;background:#fff;float:right } #layerBar div{ padding:2px 0; cursor:pointer } #layerBar div:hover{ text-decoration:underline } #buttons{ clear:both;text-align:center } .bLyrHide{ color:#ddd; } /* class for hidden layerBar layers */ --> </style> <script type="text/javascript"> $(document).ready(function(){ $("#map").bMap({ mapZoom: 11, mapCenter:[51.501690392607,-0.1263427734375], mapLayerbar:"layerBar" //Tell bMap to use a sidebar }); }); function button1(){ //This function acts on the bMap object, adding the layer $('#map').data('bMap').insertMarkers({ "name":"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" } ] }); } function button2(){ $('#map').data('bMap').insertLine({ "name":"Line", "data":[ { "lat":51.49757618329838, "lng":-0.1746654510498047 },{ "lat":51.47769451182406, "lng":-0.0009441375732421875 } ] }); } function button3(){ $('#map').data('bMap').insertPolygon({ "name":"Polygon", "color":"#F00", "data":[ { "lat":51.51921169524832, "lng":-0.19947052001953125 },{ "lat":51.52540664057756, "lng":0.01819610595703125 },{ "lat":51.46063853898322, "lng":0.0295257568359375 },{ "lat":51.45507659279715, "lng":-0.19191741943359375 },{ "lat":51.51921169524832, "lng":-0.19947052001953125 } ] }); } </script> <div style="width:700px;height:500px;margin:0 auto"> <div id="map"></div> <div id="layerBar"></div> <div id="buttons"> <input value="Add Markers" type="button" onclick="button1()"> <input value="Add Polyline" type="button" onclick="button2()"> <input value="Add Polygon" type="button" onclick="button3()"> <input type="button" onclick="$('#map').data('bMap').removeAllLayers()" value="Remove ALL layers"></input> </div> </div>
bMap Function Options:
insertMarkers: 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
insertLine: 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 latlng used to construct line color string line color, HTML style strings weight integer the line thickness opacity real 0.0 - 1.0 line opacity
insertPolygon: 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 latlng used to construct polygon edges color string polygon color, HTML style strings weight integer the edge line thickness opacity real 0.0 - 1.0 interior opacity