gistfile1.html

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

<div id="content" class="container_12 clearfix stockists">

	<h1 class="noborder">Find stockists in your area</h1>

	<br/>

	{exp:gmap:search channel="stockists" return="/the/page/with-the-gmap-results-tag" geocode_field="postal_code|country" distance_field="radius_max" require="postal_code"}
		
		<div class="grid_12 col1">
					
			<table class="stockists-search">
			<tr valign="top">
			<td><p>1) Choose a brand</p></td>
			<td colspan="2">
			<select name="categories" class="stockists-categories">
				{categories}
					{if category_group_id == 5}
						<option value="{category_id}" {selected}>{category_name}</option>
					{/if}
				{/categories}
			</select>
			</td>
			</tr>

			<tr valign="top">
			<td><p>2) Enter your postcode</p></td>
			<td colspan="2">
				<!--<span style="margin:0 0 0 15px;">AND</span> -->

				<input type="text" name="postal_code" value="{postal_code}" class="stockists-postcode" placeholder="" style="margin:0 0 10px 0;height:26px;width:288px;" />
				{if error:postal_code}<span class="error">Required <!--{error:postal_code}--> </span>{/if}
			</td>
			</tr>

			<tr valign="top">
			<td><p>3) Select your country</p></td>
			<td>
			<select name="country" class="stockists-location">
				<option value=", Australia" {if country == ", AU"}selected="selected"{/if}>Australia</option>
				<option value=", New Zealand" {if country == ", NZ"}selected="selected"{/if}>New Zealand</option>
			</select>
			</td>
			<td>						
			<input name="radius_max" value="25" type="hidden">
			
			<input type="submit" value="Search" class="submit" style="margin:0 0 0 20px;" />
		
			</td>
			</tr>

			</table><br/>

		</div>

	{/exp:gmap:search}
	
	{exp:gmap:results channel="stockists" geocode_field="postal_code|country" latitude_field="latitude" longitude_field="longitude" distance_field="radius_max" parse="inward" metric="kilometers" require="postal_code" orderby="distance" sort="asc"}
			

	
					<!-- Online stores -->	
					<div style="margin:20px 0 0 0; clear:both; border-top:1px solid #D31145; padding-top:10px;">
					
						<!-- col1 -->
						<div class="grid_4 col1">
							<h2>Online stores</h2>
						</div>
						
						<!-- col2 -->
						<div class="grid_4 col2">							
							{embed="stockists-new/brand-links" category="{exp:gmap:post name="categories"}"}
						</div>
						
						<!-- col3 -->
						<div class="grid_4 col3"></div>
					
					<!-- /Online stores -->
					</div>


		{if has_not_searched}
			
			<!-- This is an example of what can appear before the user searches.
			<div class="grid_12" style="margin:4em 0 0;padding:0;width:960px;">
				<p class="empty">Select a brand and enter your zip code before to search for local listings.</p>
			</div>
			 -->
		{/if}
						
		{if no_results}							
			<!-- This is an example of what could appear if no results are found -->
			<div class="grid_12" style="margin:0;padding:0;width:960px;">
				<h1 class="noborder" style="border-top:1px solid #D31145; border-bottom:1px solid #D31145; margin:20px 0; padding:20px 0;"><span class="red">Sorry,</span> there are no stockists for this brand within 25km of your location.</h1>
			</div>
			
		{/if}
		
		{if has_searched}	
								
			<!-- This is only displays if the user HAS searched and results are found. -->
			
			<!-- Results container -->
			<div class="grid_12" style="margin:0;padding:0;width:960px;">
			
				<!-- If no errors --> 
				{if total_errors == 0}
					<!-- <h1 class="noborder" style="border-top:1px solid #D31145; border-bottom:1px solid #D31145; margin:20px 0; padding:20px 0;"><span class="red">IMPORTANT:</span> Please call the stockist to check the availability of the product you're interested in</h1> -->
			
					<p style="border-top:1px solid #D31145; margin:15px 0 20px 0; padding:20px 0 0 0;"><span class="red"><b>IMPORTANT:</b> Please call the stockist to check the availability of the product you're interested in.</span><br/><br/>Results from within {distance} {metric} of {geocoder:formatted_address}</p>
				
					<!-- First search result -->
					{exp:channel:entries channel="stockists" entry_id="{entry_ids}" fixed_order="{entry_ids}" dynamic="no"}
								
					<div class="clearfix" style="border-bottom:1px solid #ddd;float:left;width:650px;min-height:180px;margin-bottom:10px;">
						<!-- col1 -->
						<div class="grid_4 col1">
						
							<h2>{if absolute_count == "1"}Your nearest stockists{if total_records > 1}s{/if}{if:else}&nbsp;{/if}</h2>

						</div>
					
						<!-- col2 -->
						<div class="grid_4 col2">
							<p>{title}<br/>
							{stockist-phone}<br/>
							{if stockist-web}<a href="{stockist-web}">{stockist-web}</a><br/>{/if}<br/>
							{stockist-address-1}<br/>
							{if stockist-address-2}{ stockist-address-2}<br/>{/if}
							{stockist-city}, {stockist-postal-code}<br/>
						</div>
					
					</div>
					
					<!-- col3 -->
					<div class="grid_4 col3">
						{if stockist-location != ""}
							{exp:gmap:init lat_lng="{stockist-location}" zoom="17" id="map_{entry_id}" style="width:296px;height:180px" scrollwheel="false"}
						{/if}
						
					<!-- /First search result -->
					</div>
					{/exp:channel:entries}
					
				
				<!-- online stores were here -->

						
				<!-- If user submitted form with an error -->
				{if:else}
					
					
					<!-- 
						Output errors like SafeCracker... 
					
						<p class="error">{global_errors}{error}{/global_errors}</p>
					-->					
										
					<!-- Or like this for a custom message... -->
					<h1 class="noborder" style="border-top:1px solid #D31145; border-bottom:1px solid #D31145; margin:20px 0; padding:20px 0;"><span class="red">IMPORTANT:</span> Please enter a postcode to find your nearest stockists.</h1>
					<div style="margin:20px 0 0 0; clear:both">
					
						<!-- col1 -->
						<div class="grid_4 col1">
							<h2>Online stores</h2>
						</div>
						
						<!-- col2 -->
						<div class="grid_4 col2">							
							{embed="stockists-new/brand-links" category="{exp:gmap:post name="categories"}"}
						</div>
						
						<!-- col3 -->
						<div class="grid_4 col3"></div>
					
					<!-- /Online stores -->
					</div>
					
				{/if}
			<!-- /results container --> 
			</div>
		{/if}
		
	{/exp:gmap:results}
	<br/>
  
</div>