Geolocation Street View

by Annie Lagang

HTML

<!--<div id="floating-panel">
  <input type="button" value="Toggle Street View" onclick="toggleStreetView();"></input>
</div>-->
<div id="map"></div>
<!-- 
Replace the value of the key parameter with your own API key. 
Google allows your web site to call any Google API, many thousand times per day.
If you plan for heavier traffic, you should get a free API key from Google.
-->
<!--<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>-->

<!--
If you are using the Google Maps API on localhost or your domain was not active prior to June 22nd, 2016, it will require a key going forward. To fix this problem, please see the Google Maps APIs documentation to get a key and add it to your application: https://developers.google.com/maps/documentation/javascript/get-api-key
-->

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

CSS

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
#floating-panel {
  margin-left: -100px;
}

JavaScript

//var panorama;

function initMap() {
   // 115 Don Carlos Palanca, Legazpi Village, Makati
  var cambria = {lat: 14.554999, lng: 121.018603};

  // Set up the map
  var map = new google.maps.Map(document.getElementById('map'), {
    center: cambria,
    zoom: 18,
    streetViewControl: false
  });
  
  var marker = new google.maps.Marker({
      position: cambria,
      map: map,
      title:"You are here!"
  });
  
	/*
  // Set up the markers on the map
  var cafeMarker = new google.maps.Marker({
      position: {lat: 40.730031, lng: -73.991428},
      map: map,
      icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
      title: 'Cafe'
  });
  
  var bankMarker = new google.maps.Marker({
      position: {lat: 40.729681, lng: -73.991138},
      map: map,
      icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00',
      title: 'Bank'
  });

  var busMarker = new google.maps.Marker({
      position: {lat: 40.729559, lng: -73.990741},
      map: map,
      icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00',
      title: 'Bus Stop'
  });

  // We get the map's default panorama and set up some defaults.
  // Note that we don't yet set it visible.
  panorama = map.getStreetView();
  panorama.setPosition(astorPlace);
  // @type {google.maps.StreetViewPov}
  panorama.setPov(({
    heading: 265,
    pitch: 0
  }));
  */
}

/*function toggleStreetView() {
  var toggle = panorama.getVisible();
  if (toggle == false) {
    panorama.setVisible(true);
  } else {
    panorama.setVisible(false);
  }
}*/