Maps in minutes. Powered by the Google Maps API.
When managing your Craft data, each location can be set with a convenient Address field...
Add markers, use info windows, style maps, change marker icons, apply KML layers, and much, much more...
Universal API
The plugin features a powerful universal API which works nearly identically across JavaScript, Twig, and PHP!
Find the closest locations, and sort the results from nearest to furthest...
Locate your visitors based on their device's IP address...
See the complete instructions for installing via the plugin store...
To install the Google Maps plugin via the console, follow these steps:
- Open your terminal and go to your Craft project:
cd /path/to/project
- Then tell Composer to load the plugin:
composer require doublesecretagency/craft-googlemaps
- Then tell Craft to install the plugin:
./craft plugin/install google-maps
Alternatively, you can visit the Settings > Plugins page to finish the installation. If installed via the control panel, you will automatically be redirected to configure the plugin after installation is complete.
Once installed, you will need to add Google API keys...
These examples barely scratch the surface of what is possible!
For complete details, check out the official plugin documentation...
{# Get the entries #}
{% set entries = craft.entries.section('locations').all() %}
{# Place them on a dynamic map #}
{{ googleMaps.map(entries).tag() }}
{# Get the entries #}
{% set entries = craft.entries.section('locations').all() %}
{# Place them on a static map #}
{{ googleMaps.img(entries).tag() }}
Or use the src
attribute directly...
{# Get only the image URL of a static map #}
{% set src = googleMaps.img(entries).src() %}
{# Display the image tag manually #}
<img src="{{ src }}">
{# Set the geocoding lookup target #}
{% set target = '123 Main St' %}
{# Get a set of entries, sorted by closest to target #}
{% set entries = craft.entries.myAddressField(target).orderBy('distance').all() %}
{# Set the geocoding lookup target #}
{% set target = '123 Main St' %}
{# Get a set of geocoding results #}
{% set results = googleMaps.lookup(target).all() %}
{# Get location data based on each visitor's IP address #}
{% set visitor = googleMaps.visitor %}
If you haven't already, flip through the complete plugin documentation. The examples above are just the tip of the iceberg, there is so much more that is possible!
And if you have any remaining questions, feel free to reach out to us (via Discord is preferred).
On behalf of Double Secret Agency, thanks for checking out our plugin! 🍺
⭐ Like what you see? Star this repo on Github!