This tag places a marker on a map. It must be used inside of a mapstraction tag.

The content of the mapstraction-marker tag is used for the info bubble of the marker.

You can access the javascript marker object via $(“#mymap”).data(‘map’).markers or via hjq.findMarker(“#mymap”, markerID)


  • default


<mapstraction api="googlev3" style="height: 400px;" zoom="&8" largeControls mapTypeControls>
  <mapstraction-marker lat="37.75" lon="-122.44">San Francisco</mapstraction-marker>

Link a map and a collection – clicking on one highlights the other.

<mapstraction id="mymap" api="googlev3" zoom="12" largeControls mapTypeControls  style="height: 400px;" >
  <repeat with="&User.all">
    <mapstraction-marker lat="&this.latitude" lon="&this.longitude" markerID="marker-#{this.id}" click="$('.users.collection li').removeClass('highlight'); $('#user-card-#{this.id}').addClass('highlight');">
<collection with="&User.all">
  <card: id="user-card-#{this.id}" onclick="hjq.mapstraction.openMarker('#mymap', 'marker-#{this.id}', true);"/>


  • lat, lon: the marker location
  • click: javascript function or snippet to execute on click (note: this requires the timemap version of mapstraction – vanilla mapstraction does not support this)
  • markerID: used by hjq.openMarker and hjq.findMarker
  • openBubble: boolean. If true, marker starts in an open state
  • label, icon, iconShadow, infoDiv, draggable, hover, hoverIcon, openBubble, groupName: passed unchanged to mxn.Marker.addData

Javascript Helper Functions

  • hjq.findMarker(map_selecter, marker_id): find the specified marker

  • hjq.openMarker(map_selecter, marker_id, exclusive): open the info bubble on the specified marker. If exclusive is true, previously opened markers are closed.

Show Source

Edit this page