Maps API v3 Map & StreetView

StreetView with default UI disabled

by Zareh Geertjes

HTML

<script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="btn-wrapper d-flex">
  <a href="#" id="1" class="ml-auto btn btn-light"></a>
  <a href="#" id="2" class="btn btn-light"></a>
  <a href="#" id="3" class="mr-auto btn btn-light"></a>
</div>
<div id="error"></div>
<div id="pano"></div>
<div id="start" class="text-center p-5">
  <h3>Hallo Gurbe,<br/>Welkom bij de grote</h3>
  <h1><strong>"weet-je-nog-waar-dit-is"</strong></h1>
  <h3>test.</h3>
  <h1>🤔</h1>
  <a href="#" id="go" class="btn btn-lg btn-danger my-4">Start de test</a><br/>
  <small><i>Tip: Kijk rond!</i></small>
</div>
<div id="einde" class="text-center p-5 hide">
  <h2>Hoera 🎉, dat was de test! Gefeliciteerd je had <strong id="erroroutput"></strong> fouten 👏</h2>
</div>

CSS

#start,
#einde{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  background: #fff;
  display: block;
  height: 100vh;
  width: 100vw;
}
#start.hide,
#einde.hide{
  display: none;
}

#pano {
  height: 100vh;
  width: 100vw;
}

#error{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* background: yellow; */
  box-shadow: inset 0px 0px 250px 20px rgba(255,0,0,1);
  opacity: 0;
  z-index: 3;
  pointer-events: none;
}
#error.active{
  opacity: 1;
  
}

.btn-wrapper{
  position: fixed;
  bottom: 0;
  z-index: 2;
  width: 100%;
  padding: 200px 0 50px;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.95) 100%);
}

.btn{
  margin: 0 10px;
}

JavaScript

var panorama;
var index = 0;
var errors = 0;

var locationsList = [
  {
    lat: 53.1829888,
    lng: 5.7646935,
    anwser: 2,
    btn: [
      'Workum',
      'Leeuwarden',
      'Sloten'
    ]
  },
  {
    lat: 53.0296898,
    lng: 5.6585713,
    anwser: 3,
    btn: [
      'IJlst',
      'Hindeloopen',
      'Sneek'
    ]
  },
  {
    lat: 53.0106981,
    lng: 5.6219132,
    anwser: 1,
    btn: [
      'IJlst',
      'Leeuwarden',
      'Franeker'
    ]
  },
  {
    lat: 52.8941831,
    lng: 5.6457331,
    anwser: 3,
    btn: [
      'Bolsward',
      'Stavoren',
      'Sloten'
    ]
  },
  {
    lat: 52.8831215,
    lng: 5.3619421,
    anwser: 3,
    btn: [
      'Sneek',
      'Dokkum',
      'Stavoren'
    ]
  },
  {
    lat: 52.9433637,
    lng: 5.4031409,
    anwser: 2,
    btn: [
      'Stavoren',
      'Hindeloopen',
      'IJlst'
    ]
  },
  {
    lat: 52.9786241,
    lng: 5.4450617,
    anwser: 1,
    btn: [
      'Workum',
      'Hindeloopen',
      'Bolsward'
    ]
  },
  {
    lat: 53.0622428,
    lng: 5.517251,
    anwser: 3,
    btn: [
      'Dokkum',
      'Sneek',
      'Bolsward'
    ]
  },
  {
    lat: 53.1739338,
    lng: 5.4244493,
    anwser: 2,
    btn: [
      'Franeker',
      'Harlingen',
      'Stavoren'
    ]
  },
  {
    lat: 53.1888112,
    lng: 5.5436457,
    anwser: 1,
    btn: [
      'Franeker',
      'Workum',
      'Sneek'
    ]
  },
  {
    lat: 53.3248901,
    lng: 5.9948668,
    anwser: 1,
    btn: [
      'Dokkum',
      'Hindeloopen',
      'Bolsward'
    ]
  }
];

function initialize() {
  panorama = new google.maps.StreetViewPanorama(
    document.getElementById('pano'), {
      position: {
        lat: locationsList[index].lat,
        lng: locationsList[index].lng
      },
      pov: {
        heading: 0,
        pitch: 0
      },
      zoom: 0,
      disableDefaultUI: true
    }
  );
}

initialize();

function checkAnwser(id) {
  if( id === locationsList[index].anwser){
		if(index >= 10){
   ...