Locator template:
Form (form.html)
{exp:mx_google_map:form result_page = "/search.html" log="" lat="" unit = "" backspace="1"}
<h2>Shop locator</h2>
<p><label for="address">Enter street address, city and/or zip</label>
<input name="address" type="text" value="">
<p><label for="radius">Select all points within</label>
<select name="radius"><option value="100">100</option>
<option value="50" selected="selected">50</option>
<option value="30">30</option>
<option value="25">25</option>
<option value="20">20</option>
<option value="15">15</option>
<option value="10">10</option></select>
<span>miles</span></p>
<input type="submit" value="Submit" />
{/exp:mx_google_map:form}
! For result ({exp:mx_google_map:search}) addon used channel class , so you can used all Channel tags inside {entries}{/entries} tags.
Results - list of points (search.html)
<h2>Results</h2>
<ul>
{exp:mx_google_map:search channel="about" reverse_geocoding= "true" address="" log="" lat="" unit = "" radius = "500" prec="2" prefix=""}
{entries}
<li><ul>
{field_name}<li>{title} #{point_id}-{distance}</li>{/field_name}
</ul>
</li>{/entries}
{/exp:mx_google_map:search}
</ul>
Results - map (search.html)
< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></ script>
< script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></ script>
< script type="text/javascript" src="/themes/third_party/mx_google_map/mxgooglemap.js"></ script>
{exp:mx_google_map:search channel="about" }
< script type="text/javascript">
marker_icons_path = "/themes/third_party/mx_google_map/maps-icons/";
$(document).ready(function() {
$("#my_search_results").mxgoogleMaps({
latitude: {center:lat},
longitude: {center:long},
zoom: 10,
markers: [{entries}{field_name}{marker_id : {point_id},
state: "{state}",
address: "{address}",
city: "{city}",
zipcode: "{zipcode}",
latitude: {latitude},
longitude: {longitude},
draggable: false,
icon: "{icon}"},{/field_name}{/entries}]
,mapTypeId: google.maps.MapTypeId.ROADMAP
,navigationControl: true
,scaleControl: true
,mapTypeControl: true
,mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
,scrollwheel:false
,disableDoubleClickZoom:true
}
);
});
< /script>{/exp:mx_google_map:search}
<div style="height:600px;width:100%"><div id="my_search_results" style="width: 100%; height: 100%"></div></div>
Searching with static parameters (Postal code as center of searching with radius 500 )
<ul>
{exp:mx_google_map:search channel="about" address="94105" radius = "500" prec="2"}
{entries}
<li><ul>
{field_name}<li>{title} #{point_id}-{distance}</li>{/field_name}
</ul>
</li>{/entries}
{/exp:mx_google_map:search}
</ul>
