Addons by Reinos

Appearance

Map Markers ​

The add marker tag for use inside the {exp:reinos_maps:map} tag

The tag ​

{exp:reinos_maps:map}
    {maps:add_marker}
{/exp:reinos_maps:map}

TIP

For many markers from entries (e.g. all stores), use Entries on a map: one layer with a popup per entry, instead of an add_marker per entry.

Tag parameters ​

Below are the Tag Parameters. Those parameters can be used in the tag described above.

address ​

The address for the marker

address=""

latlng ​

The latlng for the marker

latlng=""

reverse_geocode_latlng ​

Reverse geocoding, so latlng coordinates are geocoded to get the best known location (and the geocoding variables in the popup).

possible values no|yes

reverse_geocode_latlng="no"

title ​

The name of the marker, read by screen readers and shown on hover. Without a title the address or location is used. See Accessibility. (from v5.0.0)

title="Utrecht Centraal" [OPTIONAL]

tooltip:content ​

set the tooltip for the marker.

tooltip:content="" [OPTIONAL]

tooltip:direction ​

Direction where to open the tooltip. Possible values are: right, left, top, bottom, center, auto.

auto will dynamically switch between right and left according to the tooltip position on the map.

tooltip:direction="auto" [OPTIONAL]

tooltip:permanent ​

Whether to open the tooltip permanently or only on mouseover.

tooltip:permanent="no" [OPTIONAL]

tooltip:sticky ​

If yes, the tooltip will follow the mouse instead of being fixed at the marker center.

tooltip:sticky="no" [OPTIONAL]

icon:url ​

set icon path for the marker. You can also use an inline <svg>.

icon:url="" [OPTIONAL]

icon:offset ​

Specify the offset in pixel where the icon must show

icon:offset="12,41" [OPTIONAL]

icon:size ​

Set the size for an icon.

icon:size="25,41" [OPTIONAL]

icon:shadow:url ​

set the shadow icon path for the marker. You can also use an inline <svg>.

icon:shadow:url="" [OPTIONAL]

icon:shadow:offset ​

Specify the shadow offset in pixel where the icon must show

icon:shadow:offset="" [OPTIONAL]

icon:shadow:size ​

Set the shadow size for an icon.

icon:shadow:size="" [OPTIONAL]

icon:class_name ​

Set the class for the marker html

icon:class_name="maps_marker" [OPTIONAL]

glyph_icon ​

With Glyph icons you can add Glyph icons to your marker Glyph icon

glyph_icon:prefix ​

Set the prefix. For example, this would be fa for FontAwesome

glyph_icon:prefix="" [OPTIONAL]

glyph_icon:name ​

Set the name of the icon

glyph_icon:name="" [OPTIONAL]

glyph_icon:class_name ​

If you need to add an extra class to the marker.

glyph_icon:class_name="" [OPTIONAL]

glyph_icon:color ​

Set the color of the Glyph icon

glyph_icon:color="#fff" [OPTIONAL]

popup:content ​

The content for the popup (infowindow) e.g: <h1>Yeah [location]</h1>

Variables : [location] [route_to_url] [route_from_url] [map_url] [directions_url] [address] [street_name] [street_number] [city] [country] [country_code] [zipcode]
Note the geocoding variables ([address] and further) are filled when you use the address param, or the latlng param with reverse_geocode_latlng="yes"
Note for complex HTML (e.g. from a WYSIWYG editor) use the encode tag

popup:content="" [OPTIONAL]

Specify the offset in pixel where the popup must show

popup:offset="1,-34" [OPTIONAL]

The app or site that [directions_url] in the popup opens, with the directions to the location: google (default), apple or osm. On a phone, the Google Maps and Apple Maps links open the app. (from v5.0.0)

e.g. popup:content="<a href='[directions_url]' target='_blank'>Get directions</a>"

popup:directions="google" [OPTIONAL]

Specify the max width for the popup

popup:max_width="300" [OPTIONAL]

Specify the min width for the popup

popup:min_width="50" [OPTIONAL]

Open the popup on hover

popup:open_on_hover="no" [OPTIONAL]

Open the popup by default

possible values no|yes

popup:open_by_default="no" [OPTIONAL]

Close the popup when another popup is opened.

In case if you want to open 2 or more popups by default, you can combine this with popup:open_by_default="yes"

possible values no|yes

popup:auto_close="yes" [OPTIONAL]

keys ​

To get the marker via the api, you have to enter the key for you marker. By default the keys are generated for you based on the address, number and latlng. To extend this with your own keys, you can use this param.

Use a colon : to give it multiple keys

keys="key1_for_the_first_marker:key2_for_the_first_marker" [OPTIONAL]

assign:[name] ​

Assign extra data to the marker object, so you can use it via the Javascript API. The data can be found in marker.extra.[name]

assign:category="shops" [OPTIONAL]

Set a URL where the marker goes on marker click

link:url=""

How to open the link

possible values no|yes

link:new_tab="no" [OPTIONAL]