google-mapspanoramio

Displaying Panoramio thumbnail layer on Google Maps using REST

I'm trying to display a layer of thumbnail images on my Google Map via Panoramio. The Panoramio is RESTful and its homepage states a simple GET request must be submitted on the API url.

I don't have much experience with REST and have tried just to get the API to respond with text before I can process the JSON that is supposed to result from the call. I don't have much experience with AJAX, could smeone point me in the right direction? Here is my pertinent code thus far:

**HTML**
<div class="backdiv-pix"></div>

**JS**
var xmlhttp = new XMLHttpRequest();
var thumbUrl = "http://www.panoramio.com/map/get_panoramas.php?set=public&from=0&to=20&minx=-180&miny=-90&maxx=180&maxy=90&size=medium&mapfilter=true"
xmlhttp.open("GET", thumbUrl, true)
xmlhttp.send();
document.getElementById('backdiv-pix').innerHTML=xmlhttp.responseText;

My browser is throwing the following error:

Cannot set property 'innerHTML' of null

Some guidance would be much appreciated.

MS

Solution

  • There is no div with id="backdiv-pix" in your code. Either change:

    <div class="backdiv-pix"></div>

    To:

    <div id="backdiv-pix"></div>

    Or use document.getElmentByClassName('backdiv-pix')[0].innerHTML=xmlhttp.responseText

    However, once you fix that typo, you will need to deal with this: 

    XMLHttpRequest cannot load http://www.panoramio.com/map/get_panoramas.php?set=public&from=0&to=20&minx=-180&miny=-90&maxx=180&maxy=90&size=medium&mapfilter=true. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.

    working fiddle

    code snippet:

    var xmlhttp = new XMLHttpRequest();
var thumbUrl = "http://www.panoramio.com/map/get_panoramas.php?set=public&from=0&to=20&minx=-180&miny=-90&maxx=180&maxy=90&size=medium&mapfilter=true&callback=?"
$.getJSON(thumbUrl, function(data) {
  document.getElementById('backdiv-pix').innerHTML = JSON.stringify(data);
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="backdiv-pix"></div>