Our EE Addons have Moved!
Our ExpressionEngine Add-ons have been acquired by EE Harbor. Head over there for documentation, info and support.
Our ExpressionEngine Add-ons have been acquired by EE Harbor. Head over there for documentation, info and support.
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
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.
{map}
,{map}Fallback content{map}
If you'd rather use the map data on it's own, that's available too :
{map_lat}
{map_lng}
{pin_lat}
{pin_lng}
{map_zoom}
trim
eg. trim="4"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
scale
overview
map_type
pan
streetview
rotate
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
click_zoom
scroll_zoom
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.
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}
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 :
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.
{exp:maps:google_maps_api_path}
{exp:maps:api_key}
&sensor=false{exp:maps:global_maps_path}
{exp:maps:api_key}
Added in 1.4.3