Google Store Locator

Proximity search plugin for MODX

The "Google Store Locator" enables a proximity search for your stores/locations on your MODX-Site. Find and filter Stores/Locations by distance and provide users to find the closest store/location of their current position or address. GoogleStoreLocator can be easily integrated into your website and is fully customizable by chunks and styles. Just install it via the Package-Manager and place the snippet-call in your "Store-Finder" Site-Template. Place the Placeholders for the Store-List, Map and Search-Form wherever you want them to appear.


To add a store/location, simply add the GoogleStoreLocator TVs to your Store-Template or define custom Tvs for the address and add a new Resource as a new Store/Location. Create the Store-Resources as childs of your Stores-Search-Site or set the Parent-IDs with the "&parents" property. After creating a new Resource/Store clear the cache.
Now your new Store should show up in your List.

Have fun and enjoy the extra. Please report bugs via email or Github.


Downloador see it on Github


Since the latest version of Google-API: API-KEY is required! Create Key and set it in Systemsettings.


System Settings

Name Description
googlestorelocator_googleapikey This extra requires an Google-Map API-Key. You can create one here: https://console.developers.google.com/
Activate the following librarys:
- Google Maps Geocoding API
- Google Maps JavaScript API


Properties

Name Default Description
&parents Current resource Comma-separated list of parents to search for results.
&tvNameZip gslZip Name of the TV holding the Zip-Code of the Store.
&tvNameCity gslCity Name of the TV holding the City of the Store.
&tvNameStreet gslStreet Name of the TV holding the Street of the Store.
&tvNameState gslState Name of the TV holding the State of the Store.
&tvNameCountry gslCountry Name of the TV holding the Country of the Store.
&includeTVs Comma-separated list of TVs that should be included in the placeholders available to each store template. Example: "storename,time" will produce the placeholders and .
&tvPrefix tv Prefix TV property.
&unit K Options: K = kilometers / M = miles / N = nautical
&defaultRadius 20 Default selected Radius of the search Form.
&tvFilter Filter Stores by TVs like: &tvFilter=`tvname==value`
&limit 0 Limits the number of stores returned. Don't set or use `0` for unlimited results.
&offset 0 An offset of resources returned by the criteria to skip.
&location Set a address to order the stores by default. This address will be replaced by the search form.
&locationRadius 0 Radius to limit the default result when &location is set. Don't set or use `0` for unlimited results.
&markerImage A URL to an image to be used instead of the default Google Map marker.
&markerImageLocation A URL to an image to be used instead of the default Google Map marker for the User-Position.
&sortby menuindex Any Resource Field (excluding Template Variables) to sort by. Some common fields to sort on are publishedon, menuindex, pagetitle etc, but see the Resources documentation for all fields.
&sortbyTV Template Variable to sort by
& region Prefere a region to lookup for geodata first. Google-Region-Codes are like "de" for Germany etc.



Template Properties

Name Default Description
&tplForm gslFormTpl Name of the Chunk to format the Search-Form.
&tplStore gslStoreTpl Name of the Chunk to format the Stores.
&tplMarker gslMapMarkerInfoTpl Name of the Chunk to format the Store-Marker-Info-Window.
&tplNoResult gslNoResultTpl Name of the Chunk shows when no results are found.



Map Properties

Name Default Description
&zoom 8 Standard zoom level when the map initializes. Option: Number between 1 - 15.
&zoomSearch 11 Zoom level when user has searched and map is centered on their address. Option: Number between 1 - 15.
&zoomPosition 11 Zoom level when user clickt on the myPosition-Button and map is centered on the users current Position address. Option: Number between 1 - 15.
&latCenter 49.14721 Latitude on which the map will center by default
&lngCenter 8.2202 Longitude on which the map will center by default
&mapCSS height: 400px; margin: 30px 0; Inline CSS to style the Map-Container. Leave this empty to style this element in your own CSS-File.
&mapStyle JSON Code to style the Map. Example: [{"featureType": "water","stylers": [{ "color": "#80809e" }]}]
&autoZoomCenter 0 Enable this property to make the map automatic center and zoom to fit all markers.



Placeholder

Name
Description
gsl.form
Shows the Search Form. Place it anywhere after the snippet-call.
gsl.map
Shows the Map. Place it anywhere after the snippet-call.
gsl.stores
Shows the Stores. Place it anywhere after the snippet-call.
gsl.total Total number of Stores.
gsl.totalResult Total number of Stores matching the Search.
placeholders Call this Placeholder anywhere inside: &tplStore / &tplMarker and see all available Placeholders.



Example

A simple Example of the minimum SnippetCall

[[!GoogleStoreLocator]]
[[!+gsl.form]]
[[!+gsl.map]]
[[!+gsl.stores]]

A simple Example of changing the default TVs for the Adresss:

[[!GoogleStoreLocator?
    &tvNameZip=`yourTvName`
    &tvNameCity=`yourTvName`
    &tvNameStreet=`yourTvName`
    &tvNameState=`yourTvName`
    &tvNameCountry=`yourTvName`
]]
[[!+gsl.form]]
[[!+gsl.map]]
[[!+gsl.stores]]

Using the extra getPage for pagination:
If you also want to page through the results of the search-form: change the method of the form from "post" to "get" and getPage will keep the location and radius.

[[!getPage?
    &element=`GoogleStoreLocator`
    &totalVar=`gsl.totalResult`
]]

Preordering the stores by the location "Berlin" and show only stores inside the radius of 100km. Also filtering all stores by the TV "storeType" set to "flagstore".

[[!GoogleStoreLocator?
    &location=`Berlin`
    &locationRadius=`100`
    &tvFilter=`storeType==flagstore`
]]