The MetaLocator Nearby Widget is available to subscribers to our REST API add-on and users in Pro and higher plans.
This widget calls the MetaLocator API to produce a compact display that can be used in your Website's header or other location where you want to display a single location which is the closest to the user.
To get started, create a new Interface, and choose the Nearby Widget.
For users with accounts created after April 10, 2020
Click Interfaces, New, choose Store Locator, then Nearby Widget as shown
For users with accounts created before April 10, 2020
Obtain the Installation code by clicking Install, Skip, then copy the provided code as shown:
Important: Your PaaS API key must be inserted into the data-metalocator-apikey attribute if it is not already present. You can create a new API key as described here.
Once the API Key has been added to the code, copy and paste the code into your Website where you would like the output to appear.
Configuring the Nearby Widget
The Nearby Widget displays the nearest single location to the user based on the user's detected location. The system first tries to use the HTML5 device location, and if denied, it uses the IP-address-based location. You can control the layout of the results based on which geolocation method succeeds.
In the Nearby Widget editor, you will see two templates. The Nearby Template and the Fallback Template. The Nearby Template is displayed when the user grants access to the HTML5 geolocation, otherwise the fallback template is used.
Important: Most modern browsers will not prompt for geolocation unless you are using an SSL-secured connection.
The Nearby Widget uses Handlebars templates to control the output.
Custom Callback
When the Nearby Widget obtains the nearest location, it can fire a custom callback function. This allows you to add special handling of the returned results data in your Website such as updating form fields or other parts of your template.
Below shows an example of this callback:
<script>
/**
* Execute this function when the MetaLocator Nearest API completes it's work
* @param data
*/
window.metaLocatorCallback = function(data) {
console.log("I am a custom callback function");
if (typeof (data) === "undefined") {
return;
}
if (data && data.length > 0) {
for (var x = 0; x < data.length; x++) {
console.log(data[x]);
}
}
}
</script>
<script data-metalocator-itemid="XXXXXXX" data-metalocator-apikey="123211312312312312312321321" data-metalocator-callback="metaLocatorCallback"></script>
<script type="text/javascript" data-metalocator-root="1" >var MetaLocator = window.MetaLocator || {};
(function (window, document) {
var loader = function () {
var script = document.createElement("script"), tag = document.getElementsByTagName("script")[0];
var secure = window.location.protocol === 'https:';
script.src = (secure ? 'https' : 'http') + '://code.metalocator.com/app/js/' + "nearby.js";
script.setAttribute('data-metalocator-head',1);
tag.parentNode.insertBefore(script, tag);
};
window.addEventListener ? window.addEventListener("load", loader, false) : window.attachEvent("onload", loader);
})(window, document);</script>
Notice the user has configured a custom callback function called
metaLocatorCallback
This function, if it exists, will be called and passed the results of the Nearby API.