Channel Search - Search by Current Location

ajax-current-location.html

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

{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> 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}

{/exp:channel_search:results}

index.html

<h3>Map</h3>

{exp:gmap:init id="map" style="width:400px;height:300px" class="gmap"}

{exp:gmap:current_location id="map"}

<h3>Results</h3>

<div class="results">Loading results...</div>

<script type="text/javascript">

	$(document).ready(function() {

		(function() {
			var id     = 'map';
			var url    = '/channel-search/ajax-current-location';
			var geo    = window[id+'_GeoMarker'];
			var map    = window[id+'_map'];
			var loaded = false;

			google.maps.event.addListenerOnce(geo, "position_changed", function() {
				if(!loaded) {
					var pos = this.getPosition();

					$.get(url, {
						location: pos.lat()+','+pos.lng()
					}, function(data) {
						$('.results').html(data);
					});

					loaded = true;
				}
			});
		}());
	});

</script>