Map v1.0

Javascript Map Reference v1.0
  1. DirectionsRenderer class 
  2. DirectionsService class 
  3. InfoWindow class 
  4. LatLng class 
  5. LatLngBounds class 
  6. MVCObject class 
  7. Map class 
  8. Marker class 
  9. OverlayView class 
  10. Point class 
  11. Size class 
  12. StoresOverlay class 
  13. DirectionLeg object Specification 
  14. DirectionRequest object Specification 
  15. DirectionResult object Specification 
  16. DirectionRoute object Specification 
  17. DirectionStatusValue object Specification 
  18. DirectionsBounds object Specification 
  19. DirectionsOverviewPolyline object Specification 
  20. DirectionsWayPoint object Specification 
  21. Distance object Specification 
  22. Duration object Specification 
  23. Icon object Specification 
  24. InfoWindowOptions object Specification 
  25. LatLngBoundsLiteral object Specification 
  26. LatLngLiteral object Specification 
  27. MapOptions object Specification 
  28. MapPanes object Specification 
  29. MapStyleSpec object Specification 
  30. MapStyler object Specification 
  31. MarkerOptions object Specification 
  32. Padding object Specification 
  33. Style object Specification 
  34. StyleRule object Specification 
  35. TypedStyleRule object Specification 
  36. TravelMode constants 
  37. UnitSystem constants 
  38. event namespace 
  39. MapEventListener interface 

DirectionsRenderer class 🔗


woosmap.map.DirectionsRenderer
This class extends MVCObject.

Methods
setMap(map:?Map)

Sets the map where to render the directions.

setDirections(directions:DirectionResult)

Sets the directions result to render.

setRouteIndex(routeIndex:Number)

Sets the route index in the DirectionResult object to render. By default the first route (0) will be rendered.


Events
routeIndex_changed

This event is triggered when the routeIndex changes.


DirectionsService class 🔗


woosmap.map.DirectionsService

Methods
route(request:DirectionRequest, callback:function(DirectionResultString))

Issue a directions search request.


InfoWindow class 🔗


woosmap.map.InfoWindow
This class extends MVCObject.

Constructor
constructor(options:InfoWindowOptions)

Methods
open(map:Map, anchor:Marker|LatLng|LatLngLiteral)

Opens the info window.

close()

Closes this InfoWindow by removing it from the DOM structure.

setContent(content:String)

Sets the info window content

setPosition(positionOrMarker:Marker|LatLng|LatLngLiteral)

Sets the anchor

setOffset(offset:Point)

Sets the offset

setMarker(marker:?Marker)

Sets the marker

setMap(map:Map)

Sets the info window map.

getMap()

Return Value: ?Map

Gets the current map bound to the


LatLng class 🔗


woosmap.map.LatLng

Constructor
constructor(lat:Number|Function, lng:Number|Function, noWrap?:Boolean)

Creates a LatLng object representing a geographic point.

Latitude is specified in degrees within the range [-90, 90].

Longitude is specified in degrees within the range [-180, 180].

Set noWrap to true to enable values outside of this range. Note the ordering of latitude and longitude.


Methods
lat()

Return Value: Number

Returns the latitude in degrees.

lng()

Return Value: Number

Returns the longitude in degrees.

equals(other:LatLng)

Return Value: Boolean

Comparison function.

toJSON()

Return Value: LatLngLiteral

Converts to JSON representation. This function is intended to be used via JSON.stringify.


LatLngBounds class 🔗


woosmap.map.LatLngBounds

Constructor
constructor(northEast:?LatLng|LatLngLiteral, southWest:?LatLng|LatLngLiteral)

Creates a LatLngBounds object


Methods
extend(latlng:LatLng|LatLngLiteral)

Extends the current bounds with point.

contains(latlng:LatLng|LatLngLiteral)

Return Value: Boolean

Checks if current bounds contain latlng.

intersects(other:LatLngBounds)

Return Value: Boolean

Checks if bounds are intersecting with other.

union(other:LatLngBounds)

Computes the union of this bounds and other.

getNorthEast()

Return Value: LatLng

Returns the north-east corner of this bounds.

getSouthWest()

Return Value: LatLng

Returns the south-west corner of this bounds.

getCenter()

Return Value: LatLng

Computes the center of the latlng bounds.

isEmpty()

Return Value: Boolean

Checks if the current bounds are empty.


MVCObject class 🔗


woosmap.map.MVCObject

Methods
bindTo(key:String, target:Object, target_key?:String, notify?:Boolean)

Return Value: Void

Binds the property identified by ‘key’ to the specified target.

isPropertyBound(key:String)

Return Value: Boolean

Is this property a complex object - is it bound as either observer or target

get(key:String)

Return Value: Mixed

Returns the value of the property specified by key

set(key:String, value:Mixed, force_callback?:Boolean)

Return Value: Void

Sets value to key on this.

setOptions(key_value_pairs:Object)

Return Value: Void

Set all the values of the properties contained in key_value_pairs

unbind(key:String)

Return Value: Void

Un-bind the property identified by key from its current target

unbindAll()

Unbind all bound properties on this object

addListener(eventName:String, handler:Function)

Return Value: MapEventListener

Adds a listener for eventName.


Map class 🔗


woosmap.map.Map
This class extends MVCObject.

Constructor
constructor(mapDiv:HTMLElement|String, options?:MapOptions)

Creates a new map inside of the given HTML container, which is typically a DIV element.


Methods
fitBounds(bounds:LatLngBounds|LatLngBoundsLiteral, padding?:Padding)

Sets the viewport to contain the given bounds.

getBounds(padding?:Padding)

Return Value: ?LatLngBounds

Returns the lat/lng bounds of the current viewport. Optionally takes a padding parameter.

getCenter()

Return Value: LatLng

Returns the position displayed at the center of the map.

getDiv()

Return Value: Element

getHeading()

Return Value: Number

Returns the compass heading. The heading value is measured in degrees (clockwise) from cardinal direction North.

getTilt()

Return Value: Number

Returns the current angle of incidence of the map, in degrees from the viewport plane to the map plane

getZoom()

Return Value: Number

Returns the current angle of incidence of the map, in degrees from the viewport plane to the map plane.

panBy(x:Number, y:Number)

Changes the center of the map by the given distance in pixels

panTo(latLng:LatLng|LatLngLiteral, padding?:Padding)

Changes the center of the map to the given LatLng.

panToBounds(latLngBounds:LatLngBounds|LatLngBoundsLiteral, padding?:?Padding)

Pans the map by the minimum amount necessary to contain the given LatLngBounds. It makes no guarantee where on the map the bounds will be, except that the map will be panned to show as much of the bounds as possible inside {currentMapSizeInPx} - {padding}.

setCenter(center:LatLng|LatLngLiteral, padding?:Padding)

Sets the map center

setHeading(heading:Number)

Sets the compass heading for map measured in degrees from cardinal direction North.

setTilt(tilt:Number)
setZoom(zoom:Number)

Events
bounds_changed

This event is fired when the viewport bounds have changed.

center_changed

This event is fired when the map center property changes.

click

This event is fired when the user clicks on the map.

dblclick

This event is fired when the user double-clicks on the map.

drag

This event is repeatedly fired while the user drags the map.

dragend

This event is fired when the user stops dragging the map.

dragstart

This event is fired when the user starts dragging the map.

idle

This event is fired when the map becomes idle after panning or zooming.

mousemove

This event is fired whenever the user’s mouse moves over the map container.

mouseout

This event is fired when the user’s mouse exits the map container.

mouseover

This event is fired when the user’s mouse enters the map container.

rightclick

This event is fired when the DOM contextmenu event is fired on the map container.

zoom_changed

This event is fired when the map zoom property changes.


Marker class 🔗


woosmap.map.Marker
This class extends MVCObject.

Constructor
constructor(options?:MarkerOptions)

Constructs a Marker


Methods
setIcon(icon:Icon|String)
setMap(map:Map)
setOpacity(opacity:Number)

Sets the marker opacity.

getOpacity()

Return Value: Number

Gets the marker opacity.

getPosition()

Return Value: LatLng

Get the marker’s geographical location.

The longitude of the result may differ by a multiple of 360 degrees from the longitude previously set by setLngLat because Marker wraps the anchor longitude across copies of the world to keep the marker on screen.

getOffset()

Return Value: Point

Get the marker’s offset.

setOffset(offset:Point)

Return Value: Marker

Sets the offset of the marker

setDraggable(shouldBeDraggable:Boolean)

Return Value: Marker

Sets the draggable property and functionality of the marker

getDraggable()

Return Value: Boolean

Returns true if the marker can be dragged

setRotation(rotation:Number)

Return Value: Marker

Sets the rotation property of the marker.

getRotation()

Return Value: Number

Returns the current rotation angle of the marker (in degrees).

setRotationAlignment(alignment:String)

Return Value: Marker

Sets the rotationAlignment property of the marker.

getRotationAlignment()

Return Value: String

Returns the current rotationAlignment property of the marker.

setPitchAlignment(alignment?:String)

Return Value: Marker

Sets the pitchAlignment property of the marker.

getPitchAlignment()

Return Value: String

Returns the current pitchAlignment property of the marker.


Properties
cursor Type: String

Events
click

This event is fired when the marker was clicked.

mouseover

This event is fired when the mouse enters the area of the marker.

mouseout

This event is fired when the mouse leaves the area of the marker.

clickable_changed

This event is fired when markers clickable property changes.

cursor_changed

This event is fired when markers cursor property changes.

icon_changed

This event is fired when markers icon property changes.

position_changed

This event is fired when markers position property changes.

dragstart

Fired when dragging starts

drag

Fired while dragging

draggable_changed

This event is fired when markers draggable property changes.

visible_changed

This event is fired when markers visible property changes.

zIndex_changed

This event is fired when markers zIndex property changes.


OverlayView class 🔗


woosmap.map.OverlayView

Methods
setMap(map:Map)

Point class 🔗


woosmap.map.Point

Constructor
constructor(x:Number, y:Number)

Creates a Point object


Size class 🔗


woosmap.map.Size

Constructor
constructor(width:Number, height:Number)

Creates a Size object


StoresOverlay class 🔗


woosmap.map.StoresOverlay
This class extends OverlayView.

Constructor
constructor(style:Style)

Constructs a StoreOverlay


Methods
clearSelection()

Clears selected store if any

setSelection(feature:Object)

Sets the selected store

setQuery(query:?String)

Sets the query used to fetch stores. To clear the query set it to undefined.

setMap(map:Map)

Events
store_unselected

This event is triggered when a store previously selected was unselected.

store_selected

This event is triggered when a store is selected


DirectionLeg object Specification  🔗


Properties
distance Type: Distance
duration Type: Duration
end_location Type: LatLngLiteral
start_location Type: LatLngLiteral

DirectionRequest object Specification  🔗


Properties
travelMode Type: String

See TravelMode.

unitSystem Type: String

See UnitSystem.

origin Type: LatLng|LatLngLiteral
destination Type: LatLng|LatLngLiteral
provideRouteAlternatives Type: Boolean?
waypoints Type: Array.<DirectionsWayPoint>?

DirectionResult object Specification  🔗


Properties
routes Type: Array.<DirectionRoute>

DirectionRoute object Specification  🔗


Properties
overview_polyline Type: DirectionsOverviewPolyline

The encoded overview polyline.

overview_path Type: Array.<LatLng>

The decoded overview path.

summary Type: String

The description of the route.

legs Type: Array.<DirectionLeg>
bounds Type: DirectionsBounds

DirectionStatusValue object Specification  🔗


DirectionsBounds object Specification  🔗


Properties
northeast Type: LatLngLiteral
southwest Type: LatLngLiteral

DirectionsOverviewPolyline object Specification  🔗


Properties
points Type: String

Contains encoded polyline.


DirectionsWayPoint object Specification  🔗


Properties
location Type: LatLng

Waypoint location.

stopover Type: Boolean

If set to true the route will be splitted into two legs.


Distance object Specification  🔗


Properties
value Type: Number
text Type: String

Duration object Specification  🔗


Properties
value Type: Number
text Type: String

Icon object Specification  🔗


Properties
url Type: String
size Type: Size?
scaledSize Type: Size?
anchor Type: Point?

InfoWindowOptions object Specification  🔗


Properties
content Type: ?String|Node

Content to display in the InfoWindow. This can be an HTML element, a plain-text string, or a string containing HTML. The InfoWindow will be sized according to the content.

disableAutoPan Type: ?Boolean

Disable auto-pan on open. By default, the info window will pan the map so that it is fully visible when it opens.

maxWidth Type: ?Number

Maximum width of the infowindow, regardless of content’s width. This value is only considered if it is set before a call to open.

pixelOffset Type: Point

The offset, in pixels, of the tip of the info window from the point on the map at whose geographical coordinates the info window is anchored.


LatLngBoundsLiteral object Specification  🔗


Properties
east Type: Number
west Type: Number
north Type: Number
south Type: Number

LatLngLiteral object Specification  🔗


Properties
lat Type: Number

Latitude in degrees. Values will be clamped to the range -90, 90

. This means that if the value specified is less than -90, it will be set to -90. And if the value is greater than 90, it will be set to 90.

lng Type: Number

Longitude in degrees. Values outside the range -180, 180

will be wrapped so that they fall within the range. For example, a value of -190 will be converted to 170. A value of 190 will be converted to -170. This reflects the fact that longitudes wrap around the globe.


MapOptions object Specification  🔗


MapOptions object used to define the properties that can be set on a Map.

Properties
zoom Type: Number

The initial map zoom level to start from.

center Type: LatLng|LatLngLiteral

The initial map center to start from.

gestureHandling Type: String

This option controls how the gesture are handled Depending on the value when gesture on the map is detected (scroll on desktop, one finger pan on mobile) an overlay asking the user to use Cmd or Ctrl while scrolling or use two finger gesture to pan on mobile will be shown.

cooperative: Shows the overlay only if the page is scrollable.

greedy: Never shows the overlay.

none: Disables gesture handling. The map cannot be zoomed or paned using gestures.

auto: (default) Use cooperative mode if the page is scrollable, else use greedy mode.

styles Type: ?Array.<MapStyleSpec>
[
  {
    "featureType": "poi",
    "stylers": [{
      "visibility": "on"
    }]
  },
  {
    "featureType": "water",
    "stylers": [{
        "saturation": -100
    }]
  }
]
disableDefaultUI Type: Boolean

Disables the default maps controls interface.

defaultStyle Type: String?

MapPanes object Specification  🔗


Properties
floatPane Type: Element

This pane contains the info window. It is above all map overlays. (Pane 4).

markerLayer Type: Element

This pane is the lowest pane and is above the tiles. It does not receive DOM events. (Pane 0).

overlayLayer Type: Element

This pane contains polylines, polygons, ground overlays and tile layer overlays. It does not receive DOM events. (Pane 1).

overlayMouseTarget Type: Element

This pane contains elements that receive DOM events. (Pane 3).

mapPane Type: Element

MapStyleSpec object Specification  🔗


Properties
featureType Type: String

The group of feature, to which stylers will be applied. default value: “all”

elementType Type: String

The group of elements, to which stylers will be applied. default value: “all”

stylers Type: Array.<MapStyler>

The rules to apply to the selected features.


MapStyler object Specification  🔗


Properties
color Type: String

The color to use to style features. Expected to be in hex form #RRBBGG.

visibility Type: String

Sets the visibility of the selected features. Expected to be in hex form #RRBBGG. expected values are “on”, “off”

hue Type: String

The color to extract the hue from. The lightness and saturation will be kept from the original color.

saturation Type: Number

Changes the saturation

gamma Type: Number

Applies a gamma correction on lightness.

invert_lightness Type: Boolean

Inverts the lightness.

weight Type: Number

Changes the weight of drawn features (mostly lines, labels outline).

lightness Type: Number

Changes the lightness.


MarkerOptions object Specification  🔗


Properties
map Type: Map

The Map where the marker should be displayed.

icon Type: String|Icon

The icon to display. When icon is a string it is treated as Icon with the string as url property.

clickable Type: Boolean

If true the marker receive the click events. Default value is true.

position Type: LatLng|LatLngLiteral

The markers’s position.

opacity Type: Number

The marker’s opacity (min: 0, max: 1)

visible Type: Boolean

If true the marker will be visible. Default value is true

anchorPoint Type: Point

The offset from the marker’s position to the tip of an InfoWindow that has been opened with the marker as anchor.

draggable Type: Boolean?

Padding object Specification  🔗


Properties
top Type: Number?
bottom Type: Number?
left Type: Number?
right Type: Number?

Style object Specification  🔗


Properties
rules Type: Array.<TypedStyleRule>
default Type: StyleRule
breakPoint Type: Number

StyleRule object Specification  🔗


Properties
color Type: String
minSize Type: Number?
size Type: Number?
icon Type: Icon
selectedIcon Type: Icon?

TypedStyleRule object Specification  🔗


Properties
color Type: String
icon Type: Icon
selectedIcon Type: Icon?
type Type: String

TravelMode constants  🔗


Constants
BICYCLING Type: String

Requests a route for a bicycle.

DRIVING Type: String

Requests a route for a car.

WALKING Type: String

Requests a route for a pedestrian.


UnitSystem constants  🔗


Constants
METRIC Type: String

Requests distances to be computed using the metric system.

IMPERIAL Type: String

Requests distances to be computed using the imperial system.


event namespace 🔗


woosmap.map.event

Functions
addListener(instance:Object, eventName:String, handler:Function)

Return Value: MapEventListener

Adds the given listener function to the given event name for the given object instance. Returns an identifier for this listener that can be used with removeListener().

addListenerOnce(instance:Object, eventName:String, handler:Function)

Return Value: MapEventListener

Like addListener, but the handler removes itself after handling the first event.

addDomListener(element:Element, eventName:String, handler:Function)
removeListener(listener:MapEventListener)

Removes the given listener, which should have been returned by addListener above. Equivalent to calling listener.remove().

clearInstanceListeners(instance:Object)

Removes all listeners for all events for the given instance.

clearListeners(instance:Object, eventName:String)

Removes all listeners for the given event for the given instance.

trigger(instance:Object, eventName:String, eventArgs:?Array.<any>)

Triggers the given event. All arguments after eventName are passed as arguments to the listeners.


MapEventListener interface 🔗


MapEventListener
Methods
remove()

Return Value: void

Calling listener.remove() is equivalent to woosmap.map.event.removeListener(listener).


Was this article helpful?
Have more questions? Submit a request