bMap - Examples

1. Basic example2. Markers in constructor3. Markers, polylines & polygons
4. Marker sidebar5. Layer Sidebar6. AJAX Layers
7. Advanced AJAX8. Google Functions9. Custom Icons
10. Advanced marker events11. Image Overlay Function12. New sidebar features
V3 - Example 3V3 Example 5V3 Example 12
V3 API Custom Icons
Please note that unless stated, the examples shown here use the V2 of the google maps API - and bMap version 1.2.3
There are only three examples using the V3 API - and bMap 1.3

New marker/sidebar features - V3 maps API

How its done:

In this example we can see some of the new features in bMap 1.2.2
The sidebar will scroll to the selected item if the sidebar CSS has overflow:auto set. The sidebar highlighting will also be applied if the map marker is clicked. The sidebar highlight will also be removed when the infowindow is closed. The sidebar elements get hidden/shown when the related layer is shown/hidden - see here for an example.

<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/api/js?sensor=false" type="text/javascript"></script>
<script src="jQuery.bMap.1.3.js" type="text/javascript"></script>
<style type="text/css">
<!--
	#map{ width:500px;height:500px;float:left }
	#sideBar{ overflow:auto; 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">

$(document).ready(function(){ 
	$("#map").bMap({
		mapZoom: 8,
		mapCenter:[53.611750,-9.682000],
		mapSidebar:"sideBar", //id of the div to use as the sidebar
		markers:{"data":[
			{"lat":"53.330037","lng":"-8.219895","title":"Ballinasloe Golf Club","rnd":"1","body":"Rossglass, Ballinasloe, Co. Galway"},{"lat":"53.64748","lng":"-9.16122","title":"Ballinrobe Golf Club","rnd":"1","body":"Clooncastle, Ballinrobe, Co. Galway"},{"lat":"53.7962","lng":"-8.76869","title":"Ballyhaunis Golf Club","rnd":"1","body":"Coolnaha, Ballyhaunis, Co. Mayo"},{"lat":"53.81382","lng":"-9.57402","title":"Westport Golf Club","rnd":"1","body":"Carrowholly, Westport, Co. Mayo"},{"lat":"53.493608","lng":"-8.842259","title":"Tuam Golf Club","rnd":"1","body":"Barnacurragh, Tuam, Co. Galway, Ireland"},{"lat":"53.270665","lng":"-9.056828","title":"Taylors Hill Pitch and Putt","rnd":"1","body":"Taylors Hill, Galway"},{"lat":"53.94184","lng":"-8.94647","title":"Swinford Golf Club","rnd":"1","body":"Brabazon Park, Swinford, Co. Mayo "},{"lat":"53.614963","lng":"-8.173917","title":"Roscommon Golf Club","rnd":"1","body":"Mote Park, Roscommon, County Roscommon"},{"lat":"53.092534","lng":"-8.220778","title":"Portumna Golf Club","rnd":"1","body":"Ennis Road, Portumna, Co.Galway, Ireland"},{"lat":"53.434441","lng":"-9.319067","title":"Oughterard Golf Club","rnd":"1","body":"Oughterard, Co. Galway, Ireland"},{"lat":"53.903858","lng":"-9.789457","title":"Mulranny Golf Club","rnd":"1","body":"Mulranny, Westport, Co. Mayo"},{"lat":"53.469044","lng":"-8.506288","title":"Mount Bellew Golf Club","rnd":"1","body":"Mount Bellew, Co. Galway"},{"lat":"53.216473","lng":"-8.558865","title":"Loughrea Golf Club","rnd":"1","body":"New Inn Road, Loughrea, Co. Galway"},{"lat":"53.062374","lng":"-8.869494","title":"Gort Golf Club","rnd":"1","body":"Castlequarter, Gort, Co. Galway"},{"lat":"53.294978","lng":"-9.662819","title":"Golf Mara","rnd":"1","body":"Anach Mheain, Lettermore, Co. Galway"},{"lat":"53.271148","lng":"-9.06382","title":"Glenlo Abbey Golf Club","rnd":"1","body":"Glenlo Abbey Hotel, Bushypark, Galway"},{"lat":"53.259744","lng":"-9.094719","title":"Galway Golf Club","rnd":"1","body":"Blackrock, Salthill, Galway"},{"lat":"53.268373","lng":"-8.927266","title":"Galway Bay Golf Resort","rnd":"1","body":"Rinville, Oranmore, Co. Galway"},{"lat":"53.312242","lng":"-9.627304","title":"Connemara Isles Golf Club","rnd":"1","body":"Leitir Moir, Connemara, Co. Galway"},{"lat":"53.432817","lng":"-10.075986","title":"Connemara Golf Links","rnd":"1","body":"Aillebrack, Ballyconneely, Clifden, Co. Galway, Ireland"},{"lat":"53.72203","lng":"-8.99548","title":"Claremorris Golf Club","rnd":"1","body":"Castlemagarrett, Claremorris, Co. Mayo"},{"lat":"53.84708","lng":"-9.28841","title":"Castlebar Golf Club","rnd":"1","body":"Rocklands, Castlebar, Co. Mayo"},{"lat":"53.928552","lng":"-8.176317","title":"Carrick On Shannon Golf Club","rnd":"1","body":"Woodbrook, Carrick On Shannon, Co. Roscommon"},{"lat":"54.22695","lng":"-9.99155","title":"Carne Golf Links","rnd":"1","body":"Carne, Belmullet, Co. Mayo"},{"lat":"53.27823","lng":"-9.165551","title":"Barna Golf and Country Club","rnd":"1","body":"Corbally, Barna, Co. Galway"},{"lat":"53.972041","lng":"-10.05867","title":"Achill Golf Club","rnd":"1","body":"Keel, Achill Island, Westport, Co. Mayo"},{"lat":"53.282972","lng":"-8.845196","title":"Athenry Golf Club","rnd":"1","body":"Palmerstown, Oranmore, Co. Galway"},{"lat":"53.464037","lng":"-7.987922","title":"Athlone Golf Club","rnd":"1","body":"Hudson Bay, Athlone, Co Roscommon"},{"lat":"54.11778","lng":"-9.16757","title":"Ballina Golf Club","rnd":"1","body":"R294 Tubbercurry Road, Ballina, Co. Mayo"},{"lat":"","lng":"","title":"Thru the Links","rnd":"1","body":""},{"lat":"","lng":"","title":"Irish Gold Courses","rnd":"1","body":""},{"lat":"","lng":"","title":"Golfing Union of Ireland","rnd":"1","body":"National Headquarters, Carton Demesne, Maynooth, Co. Kildare"} 
		]}
	});
});

</script>
<div style="width:700px;height:500px;margin:0 auto">
	<div id="map"></div>
	<div id="sideBar"></div>
</div>



Comments:

Hi
taylor - 10/1/2010 2:54:44 AM
how to use my own icon in v3 example 12?
How to use MySQL
rody - 12/22/2010 7:47:54 AM
how to use mMySQL V3 example 12
Chaging of Markers
Eugene - 1/13/2011 12:19:49 AM
hi can i know how do i change the markers to a different image ? and with a hover function ?
Mouse over effects
Eugene - 1/13/2011 7:03:26 AM
hi i have managed to do the icon but how do i change the mouse over effect? i have tried the setImages but cannot work.

hi does anyone knows how to do a rollover effect ? i tried with setImage(); it dosent work

if(val.title){
var html = "" val.title "";
if(val.body){html =val.body}
google.maps.event.addListener(tmpThis.layerMgrArray[newIndex].data[i], "click", function(){
//BadDot Code Starts Here
tmpThis.infoWindow.setContent(html);
tmpThis.infoWindow.open(tmpThis.map, tmpThis.layerMgrArray[newIndex].data[i]);
});

google.maps.event.addListener(tmpThis.layerMgrArray[newIndex].data[i], "mouseover", function(){

//tmpThis.infoWindow.setContent(html);
//tmpThis.infoWindow.open(tmpThis.map, tmpThis.layerMgrArray[newIndex].data[i]);


tmpThis.layerMgrArray[newIndex].data[i].setImage('house_h.gif');
//tmpThis.layerMgrArray[newIndex].data[i].setImage('house_h.gif');
$('
V3 Custom Marker Icons
Darren - 3/1/2011 8:05:57 AM
The new version of bMap 1.3.1 now supports custom marker icons. Take a look at the example.
removing sidebar highlight
Cedomir Kovacev - 6/15/2011 4:50:12 AM
Hello Darren,
Thanks for the plugin.
I have a question. In the example above the sidebar highlight is not removed when the info window is closed. I wonder if you know why is that happening and how to fix it.
I am looking at this on the Mac in the latest Safari and Firefox.
Thanks for your help.
marker position
Justin - 11/10/2011 12:29:00 AM
Hi,

I found that the markers' position has changed when I zoomed in and clicked on another location.

Then I zoomed out several times again and found that the markers are all grouped in a totally different locations...

Is this a known issue?
center
Darko - 11/18/2011 12:44:09 PM
Hello, is it posible to center icon on map when click on sidebar Title?
But anyway thanks for great plugin,
with regards,
Darko
How to style the info window
adal - 5/7/2012 1:15:17 PM
How to style the info window. I am in urgent need of this help.
adding addition zoom in button
barry - 7/16/2012 10:23:42 AM
Hi,

I had a question, I have to implement state zoom in buttons for my bmap. We currently uses a sidebar, but my bosses want me to add 5 buttons that will zoom in on each state depending on which one you click, i have that done but the problem am having is that i can't seem to stop adding to the sidebar with the city locations. what am doing is the following
$("
adding addition zoom in button
barry - 7/16/2012 10:23:59 AM

$("
adding addition zoom in button
barry - 7/16/2012 10:24:38 AM
google.maps.event.trigger($("

 (*required)
 (*private)
 (*required)
 
© 2010 blocsoft.com All Rights Reserved. GPL License Privacy Policy Contact