Some content management systems and plugs move JavaScript automatically and allow users to only control HTML and JavaScript independently. This article describes how to install a MetaLocator interface in 2 separate parts, HTML and JavaScript . This method should only be used if you need to add the JavaScript and HTML separately.
Step 1. Obtain your Interface ID as shown below:
Step 2. Add an HTML element to your page, where the MetaLocator Interface should appear. The HTML element should be a block-level element, such as a DIV. Replace the single occurrence of XXXXXXX with your Interface ID.
<div data-metalocator="locator" data-metalocator-itemid="XXXXXXX"></div>
Step 3. Add the following JavaScript and ensure it runs after the above HTML is output, or on DOM ready.
<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} ml___showLocator(ml___Itemid);
</script>
Step 3. Copy the completed code to your Website where you would like the locator to appear.