Mootools Breaking Panoramio Javascript API

Question

I am trying to use Panoramio's JavaScript API but it fails to display when the MooTools framework is used. Using Chrome's inspect feature on this jsFiddle reveals this error with the included JavaScript:

Uncaught SyntaxError: Invalid regular expression: /function (keys){
    var obj = {}, length = Math.min(this.length, keys.length);
    for (var i = 0; i < length; i++) obj[keys[i]] = this[i];
    return obj;
}/: Nothing to repeat

The site I am trying to use the API on is a Joomla 2.5 one, hence the use of the MooTools framework. Changing the framework on the fiddle to jQuery or removing it entirely produces the pictures and the error does not appear.

I've looked at trying to incorporate jQuery's noConflict() function somehow and searched for a similar function for MooTools but have had no success.

Any suggestions to solve this would be greatly welcome. Or is it a limitation of Panoramio's JavaScript API itself?

Answer 1

MooTools adds a bunch of functions to Array.prototype without preventing them from being enumerated. This means they show up in for-in loops on arrays.

It would appear that the Panoramio JavaScript is using for..in on an array without allowing for this, because the error message contains the source of the associate function that MooTools adds:

// (Result of `String(Array.prototype.associate)` when MooTools is loaded
function (keys){
    var obj = {}, length = Math.min(this.length, keys.length);
        for (var i = 0; i < length; i++) obj[keys[i]] = this[i];
        return obj;
}

This is a bug in the Panoramio script, one should never use for..in to loop over an array without correct safeguards. See Myths and realities of for..in (from my blog). If you can get an uncompressed version of the Panoramio script, you can probably fix the relevant loop(s).

Some would also argue that it's a bug (or at least, a bad design decision) for MooTools to add enumerable properties to Array.prototype.

---

Dimitar Christoff notes in the comments (thanks Dimitar!) that if you load the Panoramio script after loading MooTools, it works: http://jsfiddle.net/DEWvZ/2/ But beware that if you make any calls into Panoramio later, once MooTools is loaded, those could fail, because if they've made the mistake in one place (initialization), they're likely to make it elsewhere as well.

Answer 2

this Panoramio JavaScript API widget.

Another type of Panoramio JavaScript API widget in which you can also change background color with example and code is here.

I have made a blogspot page where i have created many Panoramio JavaScript and HTML API widgets.

It does not show in composing mood.It show after publishing.I have used this on my blogspot website.its work.

<div dir="ltr" style="text-align: center;" trbidi="on">
<script src="https://ssl.panoramio.com/wapi/wapi.js?v=1&amp;hl=en"></script>
<div id="wapiblock" style="float: right; margin: 10px 15px"></div>
<script type="text/javascript">
var myRequest = {
  'tag': 'kahna',
  'rect': {'sw': {'lat': -30, 'lng': 10.5}, 'ne': {'lat': 50.5, 'lng': 30}}
};
  var myOptions = {
  'width': 300,
  'height': 200
};
var wapiblock = document.getElementById('wapiblock');
var photo_widget = new panoramio.PhotoWidget('wapiblock', myRequest, myOptions);
photo_widget.setPosition(0);
</script>
</div>