BoundsBox 1.1 provides km dimensioned boxes.

BoundsBox is an extension for overlaying <DIV> elements on v3 map by coordinates. BoundsBox is a subclass of OverlayView.

Version 1.1 provides an alternative constructor KmBox(). It draws rectangles with side dimensions in kilometers.

The circle is a PNG image in KmBox.

Get the code.

Usage:

new BoundsBox(Map, LatLngBounds, {options});

or

new KmBox(Map, LatLng, {options});

BoundsBox and KmBox options object

Property Type Description
html string Html contents of the div.
className string CSS class of the div. Default: "bounds-box"
fit boolean If true, map viewport will be fitted to show the box. Default: false.
imageSrc string Url of image file. Image object is created only if this option is given.
pane string You can select another pane for the overlay. Default: "overlayLayer".
zIndex number zIndex of the div relative to the pane.
kmX number Width of KmBox in kilometers. From 1.1
kmY number Height of KmBox in kilometers. From 1.1
miX number Width of KmBox in miles. From 1.1
miY number Height of KmBox in miles. From 1.1

Methods

Method Return Value Description
remove() - Removes the div from DOM.
getPosition() LatLng Returns center LatLng of the box. Makes it possible to use BoundsBox as an InfoWindow anchor.
setContent(string) - Sets innerHTML of the div.
getContent() string Returns innerHTML of the div.
setClassName(string) - Sets CSS class of the div.
getClassName() string Returns CSS class of the div.
getDiv() html object Returns reference to the div.
getSize() Size Returns dimensions of the div as a Size object.
getImage() html object Returns reference to the optional image element.
setImageSrc(); - Sets url of the optional image file.
setOpacity(number) - Sets opacity of the overlay. Range 0...1
setZIndex(number) - Sets zIndex of the overlay relative to the pane.
getZIndex() number Returns zIndex value of the div.
getBounds() LatLngBounds Returns bounds of the overlay. From 1.1

Events

Event Parameters Description
click Mouse event Fired when user clicks on the div. On overlapping divs, the topmost takes the click.
imageloaded - Fired when optional image is loaded.
imageloaderror - Fired if optional image loading was not a succes.
Other DOM event listeners can easily be attached to the div by getDiv() method.

Additional LatLng method

Method Return value Description
destinationLatLng(bearing, dist) LatLng Calculates LatLng from this LatLng towards bearing (degrees) in distance (km).

New versions

BounsdBox is under continuous development.

Blog

More experiments

Image overlays(v1.0)

Geocoder bounds with BoundsBox The first one (v0.1)