Location Pages

Create location pages for individual locations. These could be stores, distributors, facilities, etc. Placing these location pages under a location landing page aggregates them using an interactive Google Map.


First start by creating a “Location Landing Page” and then add any number of “Location Page”s as children of the “Location Landing Page”. Each child page here represents a location that will have its own page and show up in its parent Google map. Add content to this page as you would for a normal Web Page.

Location Landing Page

Layout Tab

  • Center Latitude: The latitude you want the Google map to center on.

  • Center Longitude: The longitude you want the Google map to center on.

  • Zoom: The zoom level you want the Google map to default to. This requires an API key to use zoom. The zoom values can be between 1-20. 1: World, 5: Landmass continent, 10: City, 15: Streets, 20: Buildings

Next, save the Location Landing Page. Now create a child “Location Page” under your new “Location Landing Page”.

Location Page

Content Tab

  • Address: The address of the location.

  • Website: The website for the location, if applicable.

  • Phone Number: The phone number of the location, if applicable.

Layout Tab

  • Map Title: A custom title that will be used for this location’s Google map pin. It will default to the page’s normal title if not provided.

  • Map Description: A custom description that will be used for this location’s Google map pin.

Settings Tab

  • Auto Update Latitude and Longitude: If checked, the latitude and longitude will be calculated whenever the page is saved based off of the provided address.

  • Latitude: The latitude that you want this location’s Google map pin to be set as.

  • Longitude: The longitude that you want this location’s Google map pin to be set as.


The store locator is built-in to Wagtail CRX but is not enabled by default. To implement, add the following to your website/models.py:

from coderedcms.models import CoderedLocationIndexPage, CoderedLocationPage

class LocationPage(CoderedLocationPage):
    A page that holds a location.  This could be a store, a restaurant, etc.
    class Meta:
        verbose_name = 'Location Page'

    template = 'coderedcms/pages/location_page.html'

    # Only allow LocationIndexPages above this page.
    parent_page_types = ['website.LocationIndexPage']

class LocationIndexPage(CoderedLocationIndexPage):
    A page that holds a list of locations and displays them with a Google Map.
    This does require a Google Maps API Key in Settings > CRX Settings
    class Meta:
        verbose_name = 'Location Landing Page'

    # Override to specify custom index ordering choice/default.
    index_query_pagemodel = 'website.LocationPage'

    # Only allow LocationPages beneath this page.
    subpage_types = ['website.LocationPage']

    template = 'coderedcms/pages/location_index_page.html'

Next run python manage.py makemigrations website and python manage.py migrate to create the new pages in your project.

Now when going to the wagtail admin, you can create a Location Index Page, and child Location Pages. Also be sure to add a Google Maps API key under Settings > CRX Settings.


Before creating or importing location pages, add your Google API key for automatic geolocation.