why does images not show up using panoramio javascript api

StackOverflow https://stackoverflow.com/questions/11643920

  •  23-06-2021
  •  | 
  •  

Pergunta

I am trying to display a bunch of images of a city given its lat/long.

I'm using panoramio's javascript api, however, I don't see any output. There are no errors on the chrome console.

Here is the source:

<head>
  <title>My page</title>
  <meta name="description" content="This is my page." />
  <script type="text/javascript" src="http://www.panoramio.com/wapi/wapi.js?v=1" />
  <script type="text/javascript">
  var myRequest = new panoramio.PhotoRequest({
      'rect': {'sw': {'lat': -30, 'lng': 10.5}, 'ne': {'lat': 50.5, 'lng': 30}}
    });
  var myOptions = {
          'width': 300,
          'height': 200
        };
  var widget = new panoramio.PhotoWidget('wapiblock', myRequest, myOptions);
  widget.setPosition(0);
  </script>
</head>
<body>

<div id="wapiblock"></div>

</body>

The jsfiddle that shows the same problem:

Foi útil?

Solução

The problem is, quite funny, with the closing </script> tag. You can't shorten it. Always close all tags in full form, except <img />, <br /> and <meta />.

Wrong:

<script src="http://www.panoramio.com/wapi/wapi.js?v=1" />

Right:

<script src="http://www.panoramio.com/wapi/wapi.js?v=1"></script>

Working example: http://jsfiddle.net/AMy9j/1/

Outras dicas

Widget does not show in composing mode. It will show after publishing.

example of widget is here

 <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>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top