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
showLocator(divId,Itemid)
Passing in the target element and Interface ID. These can be called to load the interface into a target element on click, or other javascript event.
Step 1: Add the Javascript code to your page
<script type="text/javascript">
function showLocator(divId,Itemid){
domWrite( divId, 'https://code.metalocator.com/index.php?option=com_locator&view=directory&layout=_javascript&framed=1&format=raw&tmpl=component&no_html=1&Itemid=' + Itemid );
return false;
}
var domWrite = (function(){
var c=0;
function evals( pString ){
var scripts = [],
script,
regexp = /<script[^>]*>([\s\S]*?)<\/script>/gi;
while ((script = regexp.exec(pString))) scripts.push(script[1]);
scripts = scripts.join('\n');
if (scripts) eval(scripts);
}
return function( pDiv, pSrc ){
var e = ( typeof pDiv == 'string' ?
document.getElementById( pDiv ) :
pDiv ),
s = document.createElement('script'),
dw = document.write,
buf = '',
oldbuf = '',
t = '',
ms = 100;
function exec(){
if ( buf !== oldbuf ){
oldbuf = buf;
t=window.setTimeout( exec, ms );
}
else {
e.innerHTML = buf;
evals( buf );
if ( (c--) === 0 ) {
document.write=dw;
}
}
}
document.write = function( pString ){
window.clearTimeout(t);
oldbuf = buf;
buf += pString;
t=window.setTimeout( exec, ms );
}
c++;
s.setAttribute('language','javascript');
s.setAttribute('type','text/javascript');
s.setAttribute('src', pSrc);
document.getElementsByTagName('head')[0].appendChild(s);
}
})();
</script>
Step 2: Create the container where the Locator will be inserted
In your HTML document, you will want to create the target element and select the event which triggers the loading action. The below snippet is a basic example of creating a div and calling showLocator when the user clicks a link. Replace the "XXXXX" below with your Interface ID number and the put_locator_here with the appropriate target div.
<!-- this is the placeholder for the div -->
<div id="put_locator_here" style="height: 1200px;"></div>
Step 3: Call the Show Locator Function
Somewhere on the page the should invoke the showLocator function call, e.g. clicking a link or anywhere below the script added in step 1.
<!-- this button dynamically loads the interface code by overriding document.write -->
<a href="javascript:void(0);" onclick="showLocator('put_locator_here','XXXXXXXXXXXXXXXXX');">Show the locator</a>
If the loading spinner still displays, a bit of CSS added to your Website is a reliable fix, again, where XXXXXXXXXXXXXXXXX is replaced with your Interface ID number:
#locator_loadingXXXXXXXXXXXXXXXXX{display:none;}
This code is provided as a convenience to our customers and support for this code is outside our Scope of Support.