Widget Examples - PHP Store Locator Script

Localize Widget Example 1 (Horizontal Results)

Acquiring Location

Description

This JavaScript widget will fetch local stores/locations based on a web user's location. The widget code will automatically detect the web user's browsing device (including GPS enabled mobile devices) and attempt to fetch the most accurate location. If the widget's unable to obtain a location via the Geolocation API, Google Gears API or GPS API (if mobile device) it will fetch a location based on IP. If no results are found or the widget is unable to obtain the web user's location the widget is automatically hidden. An example use of this widget could be to display locations to the web user on your main page without making the web user visit the store locator page.

Source Code

<style>
.psl-local-widget1{
	padding:10px;
	border:1px dotted lightgray;
	width:750px;
}
.psl-local-widget1-header{
	margin-bottom:10px;
	font-weight:bold;
}
.psl-local-widget1-changeloc{
	font-weight:normal;
	font-size:x-small;
}
.psl-local-widget1-item{
	float:left;
	margin-right:5px;
}
.psl-local-widget1-moreresults{
	margin-top:10px;
}
</style>

<div class="psl-local-widget1">
  <div class="psl-local-widget1-loading"><img src="images/loading.gif" width="35px" align="absmiddle"/> Acquiring Location</div>
  <div class="psl-local-widget1-results" style="display:none">
    <div class="psl-local-widget1-header">Found <span class="psl-local-widget1-total">0</span> Locations Near <span class="psl-local-widget1-location"></span> | <a href="#" class="psl-local-widget1-changeloc">Change</a></div>
    <div class="psl-local-widget1-template">
		<div class="psl-local-widget1-item">
		  <div id="title"><a href=""></a></div>
		  <div id="description"></div>
		</div>
	</div>
	<div style="clear:both;"> </div>
	<div class="psl-local-widget1-moreresults"><a href="">View All Locations ť</a></div>
  </div>
</div>

<script src='http://www.google.com/jsapi'></script>
<script>
	google.load('jquery', '1.4.2');
	google.load('maps', '3',  {other_params:'sensor=false'});
	google.setOnLoadCallback(function(){
		$.getScript("../sladmin/includes/localwidget.js",function(){
			//LocalWidget( string widget-class-name, int max-results[max 10], string path-to-psl-installation )
			var widget1 = new LocalWidget(".psl-local-widget1",3,'../');
		});
	});
</script>

Localize Widget Example 2 (Vertical Results)

Acquiring Location

Description

This JavaScript widget will fetch local stores/locations based on a web user's location (same as widget 1 except results displayed horizontal). The widget code will automatically detect the web user's browsing device (including GPS enabled mobile devices) and attempt to fetch the most accurate location. If the widget's unable to obtain a location via the Geolocation API, Google Gears API or GPS API (if mobile device) it will fetch a location based on IP. If no results are found or the widget is unable to obtain the web user's location the widget is automatically hidden. An example use of this widget could be to display locations to the web user on your main page without making the web user visit the store locator page.

Source Code

<style>
.psl-local-widget2{
	padding:10px;
	border:1px dotted lightgray;
	width:190px;
}
.psl-local-widget2-header{
	margin-bottom:10px;
	font-weight:bold;
}
.psl-local-widget2-changeloc{
	font-weight:normal;
	font-size:x-small;
}
.psl-local-widget2-item{
	margin-bottom:10px;
}
.psl-local-widget2-moreresults{
	margin-top:10px;
}
</style>

<div class="psl-local-widget2">
  <div class="psl-local-widget2-loading"><img src="images/loading.gif" width="35px" align="absmiddle"/> <em>Acquiring Location</em></div>
  <div class="psl-local-widget2-results" style="display:none">
    <div class="psl-local-widget2-header">Found <span class="psl-local-widget2-total">0</span> Locations Near <span class="psl-local-widget2-location"></span> | <a href="#" class="psl-local-widget2-changeloc">Change</a></div>
    <div class="psl-local-widget2-template">
		<div class="psl-local-widget2-item">
		  <div id="title"><a href=""></a></div>
		  <div id="description"></div>
		</div>
	</div>
	<div class="psl-local-widget2-moreresults"><a href="">View All Locations »</a></div>
  </div>
</div>	

<script src='http://www.google.com/jsapi'></script>
<script>
	google.load('jquery', '1.4.2');
	google.load('maps', '3',  {other_params:'sensor=false'});
	google.setOnLoadCallback(function(){
		$.getScript("../sladmin/includes/localwidget.js",function(){
			//LocalWidget( string widget-class-name, int max-results[max 10], string path-to-psl-installation )
			var widget2 = new LocalWidget(".psl-local-widget2",3,'../');
		});
	});
</script>