How to integrate Google Street View in Javascript?
This blog will help you to know how to integrate google street view using javascript. Firstly create index.html and paste the following lines of code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Street View side-by-side</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map, #pano {
float: left;
height: 100%;
width: 45%;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="pano"></div>
<script>
function initialize() {
var fenway = {lat: 42.345573, lng: -71.098326};
var map = new google.maps.Map(document.getElementById('map'), {
center: fenway,
zoom: 14
});
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
position: fenway,
pov: {
heading: 34,
pitch: 10
}
});
map.setStreetView(panorama);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize">
</script>
</body>
</html>
Now create developers account of google by going to https://developers.google.com/. After this create project and then create API_KEY. Now paste this API_KEY in this url:
https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize
All done!. Thanks for reading the blog.
0 Comment(s)