Maps

Quickstart

Following this quick guide you'll be up and running in less than five minutes. There are just 5 steps

1. Install the Plugin

Installation is a completly standard Craft plugin. Step-by-Step Installation Guide

2. Create a Maps Field

With SquareBit Maps installed, create a new field. In the field settings you'll see a new item in the Field Type select called 'Maps (SquareBit)'.

The field settings will look similar to this :

From these settings you can control the appearance and behavior of the field as your admin users will see. By adjusting the maps field in the settings view you can set the default view pane and zoom levels. Additional controls let you toggle the various options, and control the map field container height.

3. Assign the new Maps field to your entry types / elements

The fieldtype will work everywhere any other fieldtype will work. Assign it to your section entry type or element as you would any other field. For example, in your field layout designer, like so :

4. Use the Field Normally

In your publish pages the field will appear like so (with variations depending on your specific field settings) :

5. Update the Site Templates with the Maps Variables

In your front-end templates you've got a few options to output stored field data. (We'll assume we've called our maps field 'myMapField').

To output a fully formed working map, it's just a single tag like :

{{ entry.myMapField | raw }}

Note: You need to include the 'raw' filter to make sure Twig doesn't encode the returned markup

This tag will add any required css and javascript to the page, and instantiate the maps on page load with default properties.

You might need more control, you can also access all the individual properties like :

Map Latitude : {{ entry.myMapField.mapLat }}
Map Longitude : {{ entry.myMapField.mapLng }}
Map Zoom Level : {{ entry.myMapField.mapZoom }}
Pin Latitude : {{ entry.myMapField.pinLat }}
Pin Longitude : {{ entry.myMapField.pinLng }}

Note: For more control over how your rendered map looks and behaves, you can use the craft().squareBitMaps.map() method. With that method you can supply options like drag, zoom and pan controls, height, width and extra settings.

For full details on what variables and methods are available, view the full usage documentation.

Next Up : Full usage documenation