Maps

Methods

Maps comes with an extra method to let you take full control over how your rendered map looks and behaves on the front-end.

Note: In these examples, we'll assume you've called the field 'myMapField', and are accessing the field against a variable called 'entry'. The exact same methods work for any field setup

map(mapObject, options)

Usage is very simple. Simply pass the map object (the field attached to the entry), and a set of options for the output. Just like the {{ entry.myMapField | raw }} usage, all required javascript and css is automatically added to the page.

{% set options = {
    id: 'a-custom-id',
    class: 'my-custom-class',
    controls: 'zoom|pan|scale|overview|map_type|rotate|streetview',
    map_type_default: 'satellite',
    interact: 'drag|click_zoom|drag_zoom',
    height: '400px',
    width: '50%',
    background: '#ff0000'}
%}

{{ craft.squareBitMaps.map(entry.myMapField, options) }}

This will return a fully rendered map with the options as specfied. All the options are optional. The full list of supported options and their behaviours is as follows :

Option Parameters

background

{% set options = { 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

{% set options = { height: '300px' } %}

The height of the container

width

{% set options = { width: '300px' } %}

The width of the container

class

{% set options = { 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

{% set options = { 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

{% set options = { 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

{% set options = { 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

{% set options = { 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.