Tags

The front-end tags for the Maps fieldtype are quite simple. In the most basic form, you can use the field with a simple tag pair, but there's also various shorthand versions and a full javascript tag to output a ready to go rendered map javascript and all.

Note: We'll be assuming a field name of 'my-map-field' in these examples

Basic Tag Pair

The simplest usage is as a tag-pair. Inside that pair, you can output a fully ready google map, or access any of the direct variables.

Variables

{map},
{map}Fallback content{map}
The self-contained map. This will output all the required data to output a good to go map on your page with no further work. Use with the tag parameters to customize the exact javascript output. You'll also need to include the required javascript sources. In addition, you can use this variable as it's own tag pair, and specify your fallback content within it.

If you'd rather use the map data on it's own, that's available too :

{map_lat}
The map field Latitude, based on the center point
{map_lng}
The map field Longitude, based on the center point
{pin_lat}
The map field Pin Latitude
{pin_lng}
The map field Pin Longitude
{map_zoom}
The map field Zoom Level

Parameters

trim   eg. trim="4"
Specify how many decimal places you'd like the returned data trimmed to. Useful if you're building your own map output and just want the raw lat/lng from the field, and need to reduce the accuracy of the point.

If you're using the self-contained map output, you can customize the output using the following parameters :

background
{my-map-field background="#FF0000"}
A custom background colour that should appear behind the map. This may appear momentarily when the map is zoomed or panned. Accepts any full CSS hexadecimal value. "Short form" hexadecimal values (e.g. #FFF) are not supported.
height
{my-map-field height="300px"}
The height of the container
class
{my-map-field class="map"}
A custom class to apply to the div containing the Google Map. If this is not specified, a default class of maps-ft-map is used. Accepts any valid HTML element class attribute.
controls
{my-map-field controls="zoom|overview"}
Specifies which of the standard Google Maps controls should be displayed. Accepts the following values. Separate multiple values with the pipe character (|).
zoom
displays the "zoom" and "pan" controls.
scale
displays the map scale.
overview
displays the small "overview" map in the bottom-right corner.
map_type
displays the "map type" control.
pan
displays the "pan" control
streetview
displays the "streetview" control
rotate
displays the "rotate" control

Note: Controls will only be displayed if there is enough container height

id
{my-map-field id="example-map"}
A custom ID to apply to the div containing the Google Map. If this is not specified, the internal ExpressionEngine ID (in the form field_id_XX) is used. Accepts any valid HTML element id attribute.
map
{my-map-field map="drag|click_zoom"}
Specifies how the map should respond to user interaction. Accepts the following values. Separate multiple values with the pipe character (|).
drag
allows the user to pan the map by "dragging" it.
click_zoom
allows the user to zoom the map by double-clicking it.
scroll_zoom
allows the user to zoom the map using the scroll-wheel.
map_type_default Added in 1.4.4
{my-map-field map_default_type="satellite"}
Sets the default map type for the map. Can be set to 'normal', 'hybrid', 'physical', or 'satellite'. Map will default to 'normal' if not passed.
default_zoom Added in 1.4.8
{my-map-field default_zoom="5"}
Sets the default zoom for the rendered map. This value must be an integer between 0 - 19, 0 being zoomed out as far as possible, 19 being as close as possible. Will use the map supplied zoom level as saved by the publisher if not set.

Tag Short-Hand

As well as using the tag-pair to output your data, you can also use the tag shorthand. These all output the same as their corresponding full tags :

{my-map-field:map}
{my-map-field:map}Fallback content{my-map-field:map}
{my-map-field:map_lat}
{my-map-field:map_lng}
{my-map-field:pin_lat}
{my-map-field:pin_lng}
{my-map-field:map_zoom}

Required Javascript Assets

If you're using the self-contained map tag to output a ready-to-go map, you'll need to include some extra javascript files on your page. At the simplest the following things are required :

  1. JQuery 1.5+
  2. Google Maps API v3 + your api key
  3. Maps fieldtype 'global_maps.js' file

To make this simpler, you can use the built in helper tag to output the paths for the Google Maps API with your API Key already in place, and path to the 'global_maps.js' asset.

Path Tags

{exp:maps:google_maps_api_path}
The path to the google maps api, with your api_key included. This will output something like :
http://maps.googleapis.com/maps/api/js?key={exp:maps:api_key}&sensor=false
{exp:maps:global_maps_path}
The path to the global_maps.js asset :
http://site.url/themes/third_party/maps/global_maps.js
{exp:maps:api_key} Added in 1.4.3
Returns the set api key. Useful if you want to place the path directly and need to replace the key yourself