This tag instantiates a map using the mapstraction javascript API.

The mapstraction javascript object may be accessed via jQuery(“#mymap”).data(“map”);


  • default


<mapstraction api="googlev3" style="height: 400px;" centerLat="37.75" centerLon="-122.44" zoom="&8" largeControls mapTypeControls/>

Auto-fill inputs with auto-map marking:

  <span id="latitude"/>
  <span id="longitude"/>
  <input:address onchange="hjq.mapstractionClickOnAddress('#mymap', $('#user_address').val(), $('#user_locality').val(), $('#user_region').val(), $('#user_country').val());"/>
  <mapstraction id="mymap" api="googlev3" largeControls mapTypeControls updateLatOnClick="#user_latitude" updateLonOnClick="#user_longitude" updateAddressOnClick="#user_address" markerOnClick>
    <mapstraction-marker lat="&this.latitude" lon="&this.longitude"/>


  • api: (required) The API to use, one of ‘google’, ‘googlev3’, ‘yahoo’, ‘microsoft’, ‘openstreetmap’, ‘multimap’, ‘map24’, ‘openlayers’, ‘mapquest’.
  • centerLat, centerLon: if provided, map is centred on this location. Otherwise the map is centred on any markers.
  • geolocate: boolean. If set, the map is centred on the current location as determined by the HTML5 geolocation API.
  • zoom: an integer indicating the desired zoom level.
  • largeControls: boolean
  • smallControls: boolean
  • mapTypeControls: boolean
  • setupjs: this javascript function or snippet is called after the map has been instantiated. this is set to the mapstraction instance. This is useful to complete setup in Javascript for options that have not been provided by this Hobo interface.
  • click: this function or snippet is called when the map is clicked. See the mapstraction event handling documentation for the function signature and examples.
  • markerOnClick: boolean. If set, then a marker is placed on the map when a user clicks on the map, replacing any existing markers
  • updateLatOnClick, updateLonOnClick: jQuery selector. On click, the elements referenced by the selector are set to the lat/lon of the click.
  • updateAddressOnClick, updateLocalityOnClick, updateRegionOnClick, updateCountryOnClick: jQuery selector. On click, the location is geolocated, and the elements referenced by the selector are set to the address of the locaiton.

Javascript Functions.

The following functions are available to assist with integration:

  • hjq.clickOnLocation(map_selector, lat, lon): simulate a click by the user on a location
  • hjq.clickOnAddress(map_selecter, street, locality, region, country): geolocate, and then simulate a click by the user on that location

Show Source

Edit this page