Channel Search - Search by Proximity

index.html

<h3>Map</h3>

{exp:gmap:init id="map" center="United States" zoom="3" style="width:400px;height:300px" class="gmap"}

<hr>

<h3>Form</h3>

{exp:channel_search:form id="Geolocation"}
<div class="row">
	<div class="six columns">
		<label for="location">Location</label>
		<input type="text" name="location" value="{form:location}" id="location" />
	</div>
</div>
<div class="row">
	<div class="six columns">
		<label for="distance">Distance</label>
		<select name="distance" id="distance" style="width:auto;margin:0 0 20px;">
			<option value="5" {if form:distance == "5"}selected="selected"{/if}>5</option>
			<option value="15" {if form:distance == "15"}selected="selected"{/if}>15</option>
			<option value="25" {if form:distance == "25"}selected="selected"{/if}>25</option>
			<option value="50" {if form:distance == "50"}selected="selected"{/if}>50</option>
		</select>
	</div>
</div>
<button type="submit" class="button">Search</button>
{/exp:channel_search:form}

<hr>

<h3>Results</h3>

{exp:channel_search:results id="Geolocation" orderby="distance" sort="asc"}

{if no_results}
<p>There are no locations found within {exp:channel_search:get name="distance"} miles of '{exp:channel_search:get name="location"}'.</p>
{/if}

{if has_not_searched}
	{exp:gmap:center id="map" address="United States"}
	{exp:gmap:zoom id="map" zoom="3"}

	<p>You have not entered a location yet.</p>
{/if}

{if has_searched}

	{if is_first_row}
				
		{if prev_page || next_page}
		<div class="pagination right">
			
			{if prev_page_url}
				<a href="{prev_page_url}"><i class="icon-circle-arrow-left"></i> Prev Page</a>
			{/if}
			
			{if next_page_url && prev_page_url}
				| 
			{/if}
	 
			{if next_page_url}
				<a href="{next_page_url}">Next Page <i class="icon-circle-arrow-right"></i></a>
			{/if}
			
		</div>
		{/if}
		
		<div class="search-stats">
			<p><b>Searching '{exp:channel_search:get name="location"}' within {distance} miles.</b></p>

			<p> Showing page {current_page} of {total_pages} &dash; ({grand_total} Result{if grand_total != 1}s{/if} Found)</p>
		</div>

		<table>
		<thead>
			<tr>
				<th width="25%">Photo</th>
				<th width="35%">Title</th>
				<th>Address</th>
			</th>
		</tr>
		</thead>
	{/if}
		 
		<tbody>

			<tr>
				<td>{poi_photo} {poi_map id="map"}</td>
				<td><b>{title}</b> <p><em>{poi_keywords}</em></p></td>
				<td><p>{poi_formatted_address}</p> <p><em>{poi_map parse="markers" limit="1"}{markers}{marker:latitude}, {marker:longitude}{/markers}{/poi_map}</em></p></td>
			</tr>

		</tbody>

	{if is_last_row}
		</table>

		{if prev_page || next_page}
		<div class="pagination right">
			
			{if prev_page_url}
				<a href="{prev_page_url}"><i class="icon-circle-arrow-left"></i> Prev Page</a>
			{/if}
			
			{if next_page_url && prev_page_url}
				| 
			{/if}
	 
			{if next_page_url}
				<a href="{next_page_url}">Next Page <i class="icon-circle-arrow-right"></i></a>
			{/if}
			
		</div>
		{/if}

	{/if}

{/if}

{/exp:channel_search:results}