Examples

Query example

{exp:reinos_maps_locator:query country_code="ru"}
	{if no_results}
		No result
	{/if}
	
    entry_id: {entry_id}<br>
    lat: {lat}<br>
    lng: {lng}<br>
    city: {city}<br>
    street_name: {street_name}<br>
    street_number: {street_number}<br>
    postal_code: {postal_code}<br>
    country: {country}<br>
    country_code: {country_code}<br>
{/exp:reinos_maps_locator:query}

Radius example

{exp:reinos_maps_locator:radius location="new york" radius="50"}
    {if no_results}
        No result
    {/if}

    entry_id: {entry_id}<br>
    distance: {radius}<br>
    lat: {lat}<br>
    lng: {lng}<br>
    city: {city}<br>
    street_name: {street_name}<br>
    street_number: {street_number}<br>
    postal_code: {postal_code}<br>
    country: {country}<br>
    country_code: {country_code}<br><br><br>
{/exp:reinos_maps_locator:radius}

with paging

{exp:reinos_maps_locator:radius location="new york" radius="55000000" limit="2" }
  {if no_results}
      No result
  {/if}

  entry_id: {entry_id}<br>
  distance: {radius}<br>
  lat: {lat}<br>
  lng: {lng}<br>
  city: {city}<br>
  street_name: {street_name}<br>
  street_number: {street_number}<br>
  postal_code: {postal_code}<br>
  country: {country}<br>
  country_code: {country_code}<br><br><br>
  
  {paginate}
    {pagination_links}
      <ul>
        {first_page}
          <li><a href="{pagination_url}" class="page-first">First Page</a></li>
        {/first_page}
  
        {previous_page}
          <li><a href="{pagination_url}" class="page-previous">Previous Page</a></li>
        {/previous_page}
  
        {page}
          <li><a href="{pagination_url}" class="page-{pagination_page_number} {if current_page}active{/if}">{pagination_page_number}</a></li>
        {/page}
  
        {next_page}
          <li><a href="{pagination_url}" class="page-next">Next Page</a></li>
        {/next_page}
  
        {last_page}
          <li><a href="{pagination_url}" class="page-last">Last Page</a></li>
        {/last_page}
      </ul>
    {/pagination_links}
  {/paginate}
{/exp:reinos_maps_locator:radius}

Store locator

A complete store locator on one page: a search form (with use my location), the result list with distance and paging, and the results on a map. The search is in the query string (method="get"), so a search can be shared and the page cached.

It uses a channel stores with a Maps Locator (or Maps Fieldtype) field and a category group for the store types (here group 3). Place the template at stores/index.

{exp:reinos_maps:html_header}

{!-- the search form, it sends the search to this page --}
{exp:reinos_maps_locator:search_form
    method="get"
    result_url="stores"
    location_field="location"
    radius_field_max="radius"
    search_category_field="type"
    form_class="store-search"
}
    <label for="store-location">City, postal code or address</label>
    <input type="text" id="store-location" name="location" value="{location}" placeholder="e.g. Utrecht">
    <button type="button" id="store-my-location">Use my location</button>

    <label for="store-radius">Within</label>
    <select id="store-radius" name="radius">
        <option value="10" {if radius == 10}selected{/if}>10 km</option>
        <option value="25" {if radius == 25 OR radius == ''}selected{/if}>25 km</option>
        <option value="50" {if radius == 50}selected{/if}>50 km</option>
        <option value="100" {if radius == 100}selected{/if}>100 km</option>
    </select>

    <fieldset>
        <legend>Store type</legend>
        {exp:channel:categories category_group="3" style="linear"}
            <label>
                <input type="checkbox" name="type[]" value="{category_url_title}">
                {category_name}
            </label>
        {/exp:channel:categories}
    </fieldset>

    <button type="submit">Find a store</button>
{/exp:reinos_maps_locator:search_form}

<script>
// fill in the location of the device and search (the browser asks the visitor first)
document.getElementById('store-my-location').addEventListener('click', function () {
    var form = this.form;
    if (!navigator.geolocation) {
        return;
    }
    navigator.geolocation.getCurrentPosition(function (position) {
        form.elements['location'].value = position.coords.latitude.toFixed(6) + ',' + position.coords.longitude.toFixed(6);
        form.submit();
    });
});
</script>

{!-- the results: a list and a map, the search is read from the query string --}
<div class="store-locator">
    {exp:reinos_maps:map fit_map:markers="yes" zoom:max="14" marker_cluster:enabled="yes" height="500px"}
        <ol class="store-list">
        {exp:reinos_maps_locator:search_result
            channel="stores"
            location_field="location"
            radius_field_max="radius"
            search_category_field="type"
            category_match="any"
            radius="25"
            max_radius="100"
            nearest="5"
            limit="10"
        }
            {if no_results}
                <li>No stores found, try another location.</li>
            {/if}

            {if nearest && count == 1}
                <li class="store-list__notice">No stores within {post_radius} km, these are the nearest:</li>
            {/if}

            <li class="store">
                <a href="{path='stores/detail/{url_title}'}">{title}</a>
                <span class="store__distance">{distance} {distance_unit}</span>
                <address>
                    {street_name} {street_number}<br>
                    {postal_code} {city}
                </address>
                <a href="https://www.google.com/maps/dir/?api=1&amp;destination={lat},{lng}" target="_blank" rel="noopener">Directions</a>

                {maps:add_marker latlng="{lat},{lng}" tooltip:content="{title}"}
            </li>

            {paginate}
                <li class="store-list__paging">
                    {pagination_links}
                        {previous_page}<a href="{pagination_url}">Previous</a>{/previous_page}
                        {page}<a href="{pagination_url}" {if current_page}aria-current="page"{/if}>{pagination_page_number}</a>{/page}
                        {next_page}<a href="{pagination_url}">Next</a>{/next_page}
                    {/pagination_links}
                </li>
            {/paginate}
        {/exp:reinos_maps_locator:search_result}
        </ol>
    {/exp:reinos_maps:map}
</div>

{exp:reinos_maps:html_footer}

Notes:

• Without a search the page shows nothing; add default:show_all="yes" with default:location, default:radius and default:channel to show the stores around a default location first.
• The variables are HTML-escaped already, so they are safe in the HTML and in the tooltip:content parameter.
• {title}, {url_title} and the address come from the search index, a nested channel:entries tag is only needed for your custom fields.
• Check that the paging links keep the search in the query string on your setup.
• The checkboxes of the store types are not checked again after a search; the searched categories are in {search_category}{search_category:id}{/search_category} if you want to mark them with JavaScript.

Search example (POST)

The classic flow: the form saves the search and sends the visitor to the result page with a search ID in the URL.

{exp:reinos_maps_locator:search_form
    channel="stores"
    result_url="stores/result"
}
    <input type="text" name="location_field" value="{location}">
    <select name="radius_field_max">
        <option {if radius == 25}selected{/if} value="25">25 km</option>
        <option {if radius == 50}selected{/if} value="50">50 km</option>
    </select>
    <select name="search_type_field">
        <option {if search_type == 'radius'}selected{/if} value="radius">Radius</option>
        <option {if search_type == 'locality'}selected{/if} value="locality">Within a city</option>
    </select>
    <input type="submit" value="Search">
{/exp:reinos_maps_locator:search_form}

On stores/result:

{exp:reinos_maps_locator:search_result limit="10"}
    {if no_results}No result{/if}
    <a href="{path='stores/detail/{url_title}'}">{title}</a> ({distance} {distance_unit})<br>
    {paginate}{pagination_links}{/paginate}
{/exp:reinos_maps_locator:search_result}

Channel Form

{exp:channel:form channel="maps_locator_channel" return="maps_locator/channel-form" }
   Titel: <input name="title" type="text"><br>
   Url Title: <input name="url_title" type="text"><br>

   {field:your_maps_locator_field_name}

   <input type="submit" value="Submit">
{/exp:channel:form}