Welcome! Our Tools - BpBrowser
- BpControl
- BpDownloadUrl
- BpLabel
- BpMarker
- BpMarkerLight
- BpMarkerList
About Us Licensing Fees Support Contact Us

808-281-3359


BpMarkerLight Reference

Introduction

Download

This class is meant to be a light-weight replacement for GMarker.
The load times vary, but are between 2x and 10x faster than GMarkers, allowing for hundreds of markers to be placed on the map in just a few seconds.
There are some drawbacks to using this marker instead of GMarker, the most obvious being that if you're using Google's infoWindows, you will not be able to click on markers which are under the infoWindow shadow. The benefits of using this class include: faster loading, image swapping, and sidebar and tooltip support.

new BpMarkerLight(latlng,opts?)

Code:
var marker = new BpMarkerLight(latlng,opts?);


Notes:
  • The arguments are the same as new GMarker(), but the only (optional) option used is icon.
Examples:

getEventTarget()

Code:
var target = marker.getEventTarget();
GEvent.bindDom(target,'click',marker,onClick);


Remarks:

Add all kinds of events by using the code above as an example.

Examples:

get/setIcon()

Code:
var icon = marker.getIcon();
marker.setIcon(icon);



Examples:

getId()

Code:
var id = marker.getId();

Remarks:

This is included so as to work well with BpMarkerList objects.

get/setImage()

Code:
var src = marker.getImage();
marker.setImage(src);


Remarks:

Changes the image.

Notes:
  • marker.setImage() can only be called after the marker has been added to the map.

Examples:

getMap()

Code:
var map = marker.getMap();


Remarks:

Get the map to which this marker has been added.

get/setPoint()

Code:
var latlng = marker.getPoint();
marker.setPoint(latlng);


Remarks:

Moves the marker on the map.

get/setSidebarDiv()

Code:
var div = marker.getSidebarDiv(tag);
marker.setSidebarDiv(tag,div);


Remarks:

This is included for use with BpMarkerList objects.
Use it to access the div which represents this marker in the specified sidebar.

get/setTooltip()

Code:
var label = marker.getTooltip();
marker.setTooltip(label,html?);


Remarks:

This is for use with BpLabel objects.
If you're going to be showing the tooltip of more than one marker at any given time, then you should pass in a different label to each marker. In most cases, however, all markers can ususally share the same label.
If you don't pass in html as the second argument, then a mouseover handler will not be created for this marker. (This is the recommended method - see demos for example code.)

Notes:
  • Unlike BpMarker, you will need to create your label/s yourself.
  • It's recommended that you create your own mouseover and mouseout handlers which both swap images and handle tooltips. See the demos for example code.

Examples:

get/setTooltipHtml()

Code:
var html = marker.getTooltipHtml();
marker.setTooltipHtml(html);


Remarks:

This is for use with BpLabel objects.
If you're going to be showing the tooltip of more than one marker at any given time, then you should pass in a different label to each marker. In most cases, however, all markers can ususally share the same label.

Notes:
  • Unlike BpMarker, you will need to create your label/s yourself.

get/setUserData()

Code:
var data = marker.getUserData();
marker.setUserData(data);


Remarks:

This is included for use with BpMarkerList objects.
While you can store any data that you like, it's generally more useful to store objects. You can then sort sidebars according to these objects' properties.

Examples:

openInfoWindow*() & showMapBlowup()

Code:
marker.openInfoWindow(node,opts?); marker.openInfoWindowHtml(html,opts?); marker.openInfoWindowTabs(tabs,opts?); marker.openInfoWindowTabsHtml(tabs,opts?); marker.showMapBlowup(opts?);


Remarks:

These work as expected.

Examples: