JSFiddle - React, Tailwind, and code Playground

by forgetcolor

HTML

<body>

  <script>
var sv; // streetview service
var info = '';
var imgLink;

function testSV() {
  var lat = 35.685;
  var lng = 139.7514;

  /* other examples with same problem
  lat = 39.9289;
  lng = 116.3883;

  lat = 51.2993;
  lng = 9.4910;
  */

  /* this data works correctly, reports 0 results
  lat = 93.134;
  lng = 141.186;
  */

  var myloc = {lat: lat, lng: lng};
  
  sv.getPanorama({location: myloc, radius: 350}, function(data, status) {

    info += "getPano() status = "+status;

    if (status == google.maps.StreetViewStatus.OK ) {
        info += "  latitude: "+data.location.latLng.lat()+'<br/>';
        info += "  longitude: "+data.location.latLng.lng()+'<br/>';
        info += "  pano ID: "+data.location.pano+'<br/>';

        imgLink = "https://maps.googleapis.com/maps/api/streetview?size=640x540&pano="+data.location.pano;
        info += "found a pano, link: "+'<br/>';
        info += imgLink+'<br/>';
    } else if(status == google.maps.StreetViewStatus.ZERO_RESULTS) {
        info += "status says 0 pano results"+'<br/>';
    } else {
      info += 'SV error no code'+'<br/>';
    }
    
    $('.info').html(info);
    $('.img').attr('src',imgLink);
  });
}

function initMap() {
  sv = new google.maps.StreetViewService();
  testSV();
}

</script>

<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&signed_in=true&callback=initMap" async defer></script>

<div class="info"></div><br/>
<img class="img" />

</div>
  </body>