MetaLocator commonly allocates resources using "Page Views" as a key metric in determining cost of the software. This can become a technical consideration when deciding how to include the software on a Website.
When including the MetaLocator installation code in a hidden element on your Website, the software is still loaded and page views are triggered and counted against your overall page view limits. This is because our servers still load the data requested and still transmit the content and map imagery, even if your Website keeps it hidden.
In order to dynamically load the MetaLocator interface into a DIV or other HTML element, it must dynamically added to the DOM. The following sample code includes some supporting functions that allow you to call a function to insert the locator into a placeholder element. These can be called to load the interface into the placeholder element on click, or other JavaScript event.
Step 1: Add the Javascript code to your page
<script>
var ml___thisScript = document.querySelector('[data-metalocator="locator"]');
var ml___Itemid = ml___thisScript.getAttribute('data-metalocator-itemid');
var ml___hostName = 'code.metalocator.com';
function ml___showLocator(Itemid){var divId="___ml_container"+Itemid,div=document.createElement("div");div.setAttribute("id",divId);var domWrite,thisScript=document.querySelector('[data-metalocator="locator"]');return thisScript.parentElement.insertBefore(div,thisScript),(function(){var c=0;function evals(pString){for(var script,scripts=[],regexp=/<script[^>]*>([\s\S]*?)<\/script>/gi;script=regexp.exec(pString);)scripts.push(script[1]);(scripts=scripts.join("\n"))&&eval(scripts)}return function(t,e){var r="string"==typeof t?document.getElementById(t):t,n=document.createElement("script"),i=document.write,o="",a="",l="",m=100;function s(){o!==a?(a=o,l=window.setTimeout(s,m)):(r.innerHTML=o,evals(o),0==c--&&(document.write=i))}document.write=function(t){window.clearTimeout(l),a=o,o+=t,l=window.setTimeout(s,m)},c++,n.setAttribute("language","javascript"),n.setAttribute("type","text/javascript"),n.setAttribute("src",e),div.appendChild(n)}})()(divId,"https://" + ml___hostName + "/index.php?option=com_locator&view=directory&layout=_javascript&framed=1&format=raw&tmpl=component&no_html=1&Itemid="+Itemid),setTimeout(function(){null!==document.getElementById("locator_loading"+Itemid)&&(document.getElementById("locator_loading"+Itemid).style.display="none")},1000),!1};
</script>
Step 2: Create the container where the Locator will be inserted
Insert a container element into which the locator will be placed. Replace the "XXXXX" below with your Interface ID number.
<div data-metalocator="locator" data-metalocator-itemid="XXXXX"></div>
Step 3: Call the Show Locator Function
An element click or other event should then invoke the ml___showLocator function call, e.g. clicking a link or anywhere below the tag added in step 2. Again replace the "XXXXX" below with your Interface ID number.
<a href="javascript:void(0);" onclick="ml___showLocator('XXXXX');">Show the locator</a>
This code is provided as a convenience to our customers and support for this code is outside our Scope of Support.