Отображение слоя миниатюр Panoramio на Картах Google с помощью REST

Question

Я пытаюсь отобразить слой миниатюрных изображений на моей карте Google через Panoramio. Panoramio - RESTful, и на его домашней странице указано, что простой запрос GET должен быть отправлен по URL-адресу API.

У меня нет большого опыта работы с REST, и я пытался заставить API ответить текстом, прежде чем я смогу обработать JSON, который должен быть результатом вызова. У меня нет большого опыта работы с AJAX, может ли кто-нибудь направить меня в правильном направлении? Вот мой соответствующий код:

**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;

Мой браузер выдает следующую ошибку:

Невозможно установить свойство 'innerHTML' для null

Некоторое руководство будет высоко ценится.

МИЗ

Answer 1

Там нет div с id="backdiv-pix" в вашем коде. Либо изменить:

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

Для того, чтобы:

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

Или использовать document.getElmentByClassName('backdiv-pix')[0].innerHTML=xmlhttp.responseText

Однако, как только вы исправите эту опечатку, вам придется иметь дело с этим:

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.

рабочая скрипка

фрагмент кода:

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>