JSFiddle - React, Tailwind, and code Playground

by eanders

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
   function initialize() {
  var marlboro = new google.maps.LatLng(42.838829,-72.734889);
  var mapOptions = {
    center: marlboro,
    zoom: 17
  };
  var map = new google.maps.Map(
      document.getElementById('map-canvas'), mapOptions);
  var panoramaOptions = {
    position: marlboro,
    pov: {
      heading: 270,
      pitch: 5
    }
  };
  var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
  map.setStreetView(panorama);
    
    // Event listeners 
     google.maps.event.addListener(panorama, 'pano_changed', function() {
      var panoCell = document.getElementById('pano_cell');
      panoCell.innerHTML = panorama.getPano();
    });
    
  google.maps.event.addListener(panorama, 'position_changed', function() {
      var positionCell = document.getElementById('position_cell');
      positionCell.firstChild.nodeValue = panorama.getPosition() + '';
   
    var position = panorama.getPosition();
    console.log(position.G);
    console.log(position.K);
    if(position.G == 42.838819 && position.K == -72.73494499999998) {
        console.log('hi');
        alert('Hi, I\'m Alex');
    }
  });

  google.maps.event.addListener(panorama, 'pov_changed', function() {
      var headingCell = document.getElementById('heading_cell');
      var pitchCell = document.getElementById('pitch_cell');
      headingCell.firstChild.nodeValue = panorama.getPov().heading + '';
      pitchCell.firstChild.nodeValue = panorama.getPov().pitch + '';
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
 
</script>
<div id="panel">
   <table>
      <tr>
        <td><b>Position</b></td><td id="position_cell">&nbsp;</td>
      </tr>
      <tr>
        <td><b>POV Heading</b></td><td id="heading_cell">270</td>
      </tr>
      <tr>
        <td><b>POV Pitch</b></td><td id="pitch_cell">0.0</td>
      </tr>
      <tr>
       ...

CSS

body, html
{
    height: 100%;
    margin: 0;
        padding: 0;
}
#map-canvas {
        height: 400px;
        margin: 0;
        padding: 0;
      }
#panel {
 display: none;   
}
}