Street View Tour

by Semih Muyaoğlu

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;ext=.js"></script>
<div id="map">
</div>

CSS

#map {
  width: 100%;
  height: 100vh;
}

JavaScript

var map = new google.maps.Map(document.getElementById("map"), {
     center: new google.maps.LatLng(38.418919, 27.128778),
     zoom: 12,
     mapTypeId: 'roadmap'
   });
   
   
   
   

    var flightPlanCoordinates = [
        { lat: 37.772, lng: -122.214 },
        { lat: 21.291, lng: -157.821 },
        { lat: -18.142, lng: 178.431 },
        { lat: -27.467, lng: 153.027 }
    ];
    var flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2
    });

    flightPath.setMap(map);