JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="A2B.html">Home</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Game</a></li>
        <li><a href="about_game.html">About the game</a></li>
        <li><a href="about_us.html">Developers</a></li>
      </ul>
    </div>
  </div>


</nav>

<div id="map"></div>
<div id="pano"></div>

CSS

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

#map {
  height: 100%;
  width: 45%;
  float: left;
  margin: 0px;
  padding: 0px
}

#pano {
  height: 100%;
  width: 45%;
  margin: 0px;
  padding: 0px
}

JavaScript

var poly;
var map;
var pointA;
var pointB;
var infowindow_A;
var infowindow_B;
function initMap() {
  var mapDiv = document.getElementById('map');
  map = new google.maps.Map(mapDiv, {
    center: {
      lat: 30.565244,
      lng: -97.671010
    },
    zoom: 14
  });
  var svLayer = new google.maps.StreetViewCoverageLayer();
  svLayer.setMap(map);
  var txstate = {
    lat: 30.569858,
    lng: -97.655918
  };
  var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('pano'), {
      position: txstate,
      pov: {
        heading: 34,
        pitch: 10
      }
    });
  google.maps.event.addListener(panorama, 'pano_changed', function() {
    addLatLng({
      latLng: panorama.getPosition()
    });
    if (!map.getBounds().contains(panorama.getPosition())) {
      map.setCenter(panorama.getPosition());
    }
  })
  map.setStreetView(panorama);

  poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  });
  poly.setMap(map);

  // Add a listener for the click event
  map.addListener('position_change', addLatLng);
}
// Handles click events on a map, and adds a new point to the Polyline.

function addLatLng(event) {
  var path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);

  //point A
  //hard-coded as Texas State University right now
  var image = "https://upload.wikimedia.org/wikipedia/commons/7/73/Farm-Fresh_star.png"; //STAR
  if (!pointA) {
    pointA = new google.maps.Marker({
      position: {
        lat: 30.567989,
        lng: -97.655153
      },
      map: map,
      title: 'tx state',
      label: 'A',
      // animation: google.maps.Animation.DROP
    });
    var circle = new google.maps.Circle({
    map: map,
    radius: 120,
    center: pointA.getPosition()
    });
    var contentString_A = '<h5>texas state university at round rock</h5>';
    infowindow_A = new...