Skip to main content
Help us improve Python packaging – donate today!

Google Maps widget for address fields in Wagtail

Project Description

# wagtailgmaps [![PyPI](](

> Simple Google Maps address formatter and LatLng provider for [Wagtail]( fields.

*Check out [Awesome Wagtail]( for more awesome packages and resources from the Wagtail community.*

![Wagtailgmaps screenshot](./screenshot.png)

## Quickstart

1. Install with `pip install wagtailgmaps`
1. Add `wagtailgmaps` to your `` `INSTALLED_APPS` section.
1. Add some configuration in your `` file:

# Mandatory
WAGTAIL_ADDRESS_MAP_CENTER = 'Wellington, New Zealand' # It must be a properly formatted address

# Optional
WAGTAIL_ADDRESS_MAP_ZOOM = 8 # See for more information.
WAGTAIL_ADDRESS_MAP_LANGUAGE = 'ru' # See for supported languages.

> As of June 22th 2016, Google maps requires an API key. See how to [Get a key]( While you're there, you'll also need to enable the [Geocoding Service](, the [Maps JS API]( and the [Static Map API](

4. Use it:

# myapp/
from django.db import models
from wagtail.wagtailcore.models import Page
from wagtailgmaps.edit_handlers import MapFieldPanel

class MapPage(Page):
# Wagtailgmaps expects a `CharField` (or any other field that renders as a text input)
formatted_address = models.CharField(max_length=255)
latlng_address = models.CharField(max_length=255)

# Use the `MapFieldPanel` just like you would use a `FieldPanel`
content_panels = Page.content_panels + [
MapFieldPanel('latlng_address', latlng=True),

# myapp/templates/myapp/map_page.html
<a href="{{ self.formatted_address }}">Open map (Formatted Address)</a>
<a href="{{ self.latlng_address }}">Open map (Lat/Long Address)</a>

## Additional information

### `MapFieldPanel` options

- `heading` - A custom heading in the admin, defaults to "Location"
- `classname` - Add extra css classes to the field
- `latlng` - Field returns a LatLng instead of an address
- `centre` - A custom override for this field
- `zoom` - A custom override for this field

### How the address option works under the hook

If using the address option, the field gets updated according to the [Google Geocoding Service]( each time:

* The map marker gets dragged and dropped into a location (`dragend` JS event).
* Click happens somewhere in the map (`click` JS event).
* Return key is pressed after editing the field (`enterKey` JS event for return key only).

### Troubleshooting

When editing the model from the admin interface the affected field shows up with a map, like the screenshot above. If it doesn't, check your browser console to make sure that there is no error related to your API key.

## Development

### Releases

- Make a new branch for the release of the new version.
- Update the [CHANGELOG](
- Update the version number in `wagtailgmaps/`, following semver.
- Make a PR and squash merge it.
- Back on master with the PR merged, use `make publish` (confirm, and enter your password).
- Finally, go to GitHub and create a release and a tag for the new version.
- Done!

Release history Release notifications

This version
History Node


History Node


History Node


History Node


History Node


History Node


History Node


History Node


History Node


History Node


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Filename, size & hash SHA256 hash help File type Python version Upload date
wagtailgmaps-1.0.tar.gz (14.1 kB) Copy SHA256 hash SHA256 Source None Mar 9, 2018

Supported by

Elastic Elastic Search Pingdom Pingdom Monitoring Google Google BigQuery Sentry Sentry Error logging CloudAMQP CloudAMQP RabbitMQ AWS AWS Cloud computing Fastly Fastly CDN DigiCert DigiCert EV certificate StatusPage StatusPage Status page