SimpleMap

A beautifully simple Google Map field type for Craft 3. Full localization support, compatible with Matrix & CraftQL, supports searching by location and sorting by distance.

Click here for the Craft 2.5 version.

Usage

Create the field as you would any other.
The field type will return an array containing the following:

• lat - The selected locations latitude
• lng - The selected locations longitude
• zoom - The zoom level of the map
• address - The address of the selected location
• parts - See below
• distance - The distance from the search location (in whatever unit you searched with). Will be empty if you aren't searching by location.

This means you can use {{ myMapField.lat }}.

parts

This contains the locations address, broken down into its constituent parts. All values are optional so you'll need to have checks on any you use to make sure they exist.
A list of the available values can be found here.
To access the short version of any part, append _short to the end of its name.
e.g. {{ myMapField.country_short }}.

Configuration

You can configure the plugin either via the Craft CP or by duplicating the config.php file to craft/config/simplemap.php.

Searching and Sorting

You can search for elements using the location specified in your map field. When searching by your map field you also have the option to sort the results by distance.

{% setentries=craft.entries.myMapField({
location: 'Maidstone, Kent',
country: 'GB',
radius: 100,
unit: 'mi'
}).orderBy('distance').all() %}

• location: Can either be an address string (requires a Google Maps Geocoding API key) or a Lat Lng Array ({ 'lat': 51.27219908, 'lng': 0.51545620 }).
• country: Optional. Restrict the search to a specific country (useful for non-specific searches, i.e. town name). Must be valid 2-letter ISO code (recommended), or full country name.
• radius: Optional. The radius around the location to search. Defaults to 50.
• unit: Optional. The unit of measurement for the search. Can be either km (kilometers) or mi (miles). Defaults to km.

API Keys

You can access your browser API key in templates using craft.simpleMap.apiKey.

Displaying a Map

This plugin does not generate a front-end map; how you do that and what map library you use is up to you. However, since we have received a lot of questions asking how to do so, here are a couple of examples.

Using Google Maps:

<divid="map"style="height: 400px;"></div>
<script>var map;functioninitMap() {// Display the map map =newgoogle.maps.Map(document.getElementById("map"), { center: { lat: {{ entry.mapLocation.lat }}, lng: {{ entry.mapLocation.lng }} }, zoom: {{ entry.mapLocation.zoom }} });// Display the markervar marker =newgoogle.maps.Marker({ position: { lat: {{ entry.mapLocation.lat }}, lng: {{ entry.mapLocation.lng }} },// A custom icon can be defined here, if desired// icon: '/path/to/custom/icon.png', map: map }); }</script>
<scriptsrc="https://maps.googleapis.com/maps/api/js?key={{ craft.simpleMap.apiKey }}&callback=initMap"asyncdefer></script>

And Mapbox:

<scriptsrc="https://api.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js"></script>
<linkhref="https://api.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.css"rel="stylesheet" />
<divid="map"style="width: 400px; height: 300px;"></div>
<script>mapboxgl.accessToken="YOUR_API_KEY";var map =newmapboxgl.Map({ container:"map", style:"mapbox://styles/mapbox/streets-v9", center: [ {{ entry.myMapField.lng }}, {{ entry.myMapField.lat }} ]});</script>

Converting an address to Lat/Lng

If you need to convert a string address to a Lat/Lng you can do so using the craft.simpleMap.getLatLngFromAddress($addressString[, $country]) variable. An example of this would be wanting to convert a customers delivery address to a Lat/Lng, to display it on a map.

• $address - The string address you want to convert.
• $country - Optional. Restrict the conversion to a specific country (useful for non-specific searches, i.e. town name). Must be valid 2-letter ISO code (recommended), or full country name.

{% setlocation=craft.simpleMap.getLatLngFromAddress("Ether Creative, Maidstone", "GB") %}
{{ location.lat }}
{{ location.lng }}