Google Street View
Streetview of store - from store address
HTML
<div id="floating-panel">
<input type="button" value="Toggle Street View" onclick="toggleStreetView();">
</div>
<div id="map"></div>
<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
// https://developers.google.com/maps/documentation/javascript/examples/streetview-overlays
// https://maps.googleapis.com/maps/api/geocode/json?&address=tesco%20hastings
var loc = {
"formatted_address": "Tesco Extra, Church Wood Dr, Hastings, Saint Leonards-on-sea TN38 9RB, UK",
"geometry": {
"bounds": {
"northeast": {
"lat": 50.8779863,
"lng": 0.5373230999999999
},
"southwest": {
"lat": 50.8769246,
"lng": 0.5356046
}
},
"location": {
"lat": 50.8774555,
"lng": 0.5364637999999999
},
"location_type": "ROOFTOP",
"viewport": {
"northeast": {
"lat": 50.8788044302915,
"lng": 0.5378128302915021
},
"southwest": {
"lat": 50.8761064697085,
"lng": 0.535114869708498
}
}
}
}
var panorama;
function initMap() {
var tesco = loc.geometry.bounds.northeast;
// Set up the map
var map = new google.maps.Map(document.getElementById('map'), {
center: tesco,
zoom: 16,
streetViewControl: true
});
var aMarker = new google.maps.Marker({
position:loc.geometry.location,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=car|FFFF00',
title: 'Location'
});
var bMarker = new google.maps.Marker({
position:loc.geometry.viewport.northeast,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=car|FFFF00',
title: 'viewport Northeast'
});
var cMarker = new google.maps.Marker({
position:loc.geometry.viewport.southwest,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=car|FFFF00',
title: 'viewport Southwest'
});
var dMarker = new google.maps.Marker({
position:loc.geometry.bounds.northeast,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=car|FFFF00',
title: 'bounds Northeast'
});
var eMarker = new...