JSFiddle - React, Tailwind, and code Playground

by Gökhan Kurt

HTML

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>

CSS

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8
  });
  var isVisible = false;
  google.maps.event.addListener(map.getStreetView(), 'visible_changed', function() {
    var visible = this.getVisible();
    if (isVisible != visible) {
      alert('streetview is ' + (visible ? 'open' : 'closed'));
    }
    isVisible = visible;
  });
}