Using an Address field

Smart Map has been replaced by Google Maps

Please install the Google Maps plugin instead. ➡️

As of February 2021, the Smart Map plugin has been completely rebuilt and replaced with the new Google Maps plugin for Craft CMS. For more details, see here...

---

The documentation below is for historical reference only.

Create a new Address field, and add it to anything you want. Your new field can be part of an Entry, Asset, User, etc... basically, any Element Type is a valid host for your new address field. You can set an address as a Global field, or even include it in a Matrix field!

When you're editing your content, you'll have three methods available to you for modifying an address:

• Type it in manually (you can enter anything you want).
• Click "Search Addresses" to find similar matches around the world.
• Click "Drag Pin" to manually place a pin anywhere on the map.

If you opt to manually drag the pin, the default position will be whatever is currently populating the Latitude & Longitude fields. This is really helpful when you want to "Search Addresses" for the closest physical address, then follow up with "Drag Pin" to mark an even more precise location.

Displaying your field values in a Twig template

Your address field will produce an Address Model, which contains the following values:

Handle	Type	Example
street1	string	350 5th Ave
street2	string	Unit #101
city	string	New York
state	string	NY
zip	string	10118
country	string	United States
lat	float	40.7482436
lng	float	-73.9851073
coords	[lat, lng]	[40.7482436, -73.9851073]

So for example, if the handle of your Address field is "address", you would display the data like this:

{% set entry = craft.entries.slug('my-entry').one() %}

<h1>{{ entry.title }}</h1>
<div>
    {{ entry.address.street1 }}<br />
    {{ entry.address.street2 }}<br />
    {{ entry.address.city }}, {{ entry.address.state }} {{ entry.address.zip }}
</div>
<div>
    Latitude: {{ entry.address.lat }}<br />
    Longitude: {{ entry.address.lng }}
</div>

The code above will render an address like this: