This is a plugin that provides a simple Field Type for CraftCMS. It's very similar to ACF's Google Maps Field with a few twists. First of all, it stores all of the locations in a separate table. Secondly, it stores address components and lat/lng as different fields on a row.
- Download and copy to plugins directory.
- Make sure to name this plugin's folder
craftgmaps/
- A quick command to do this from the root of your Craft project is
mkdir tmp && curl -L https://github.com/40Digits/craftgmaps/archive/master.zip -o tmp/craftgmaps.zip && unzip tmp/craftgmaps.zip -d tmp/ && cp -r tmp/craftgmaps craft/plugins/.; rm -rf tmp/;
(note: this won't work currently because it's a private repo).
- Enable the plugin via the admin interface
- Add a field with the "Google Maps" fieldtype
- Create an entry and fill in the address field. (Make sure to click on one of the autocompleted address).
- Now your template will return a
CraftGmaps_LocationModel
which has attributes likelat
,lng
, andformattedAddress
.
- If you need help adding a marker to a map check out our example usage.
If you anticipate lots of admin usage (like more than 2500 requests per day) then you'll need to create a Google Maps API key. If for no other reason to remove that pesky console mesage, it's still a good idea to add a key (they are free).
For each Google Maps field, you have the options to add a Default Latitude, Default Longitude, and Default Zoom. This is what the map defaults to in the admin interface.
We also provide a template variable/method that allows you to retrieve all the locations associated with a specific field. Example usage:
{% for location in craft.craftGmaps.findLocationsByField(‘fieldSlug') %}
Lat: {{ location.lat }}
Lng: {{ location.lng }}
{% endfor %}
I wouldn’t suggest using this for production, but it’s an easy proof of concept.
<div id="map" style="height: 400px; width: 400px;"></div>
<script>
function initMap() {
var myLatLng = { lat: {{ entry.fieldSlug.lat }}, lng: {{ entry.fieldSlug.lng }} };
var zoom = {{ entry.fieldSlug.zoom }};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: zoom,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'My Location!'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?&callback=initMap">
</script>
TODO Add example usage for multiple markers on a map
We encourage you to contribute to this plugin! Here are details how to set it up locally for development:
- Setup a Craft install.
- I have one local install that I use to develop all Craft plugins
- Check out our boilerplate for an example setup of Craft
- Fork this repo
- Clone the forked repo to your local
- We would suggest doing this outside of the Craft install
- npm install
- To build the Javascript run
npm run watch
- Uses babel and ES2015
- Symlink the repo to your Craft install's plugin repo
- Install in the admin interface
This plugin is released under the MIT License.