The front-end tags for Maps are deceptively simple. You can get a fully working Google map with a single tag, pull out all the direct values for a location.

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

Self-Contained Map

As simple as it comes :

{{ entry.myMapField }}

Becomes a fully working GoogleMap with default options for the front-end user. This adds two assets to the page if they've not already been added - our css and javascript assets necessary for the map container.

Note: For more control to set map options, use the craft() method

Direct Location Variables

You can access all the data for a location by using the individual location variables. 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 }}

Which will return something similar to :

Map Latitude : 53.30984973784554
Map Longitude : -4.335521971874982
Map Zoom Level : 5
Pin Latitude : 53.30984973784554
Pin Longitude : -4.335521971874982