Google Street View API Example

In this article, you will learn to display street view on google map. Street view map is more clear to see the area than aerial view. This is more familiar and ideal for visitors. The Google Maps Embed API allows us to display street view on the web page with an interactive 360-degree panorama viewer, same as you see in the street view on the google map. We can embed this service in our programming through the Maps JavaScript API which allows you to retrieve and display street view photo spheres.

How to show street view on the google map

These are the following steps to show the street view on google map.

1. Get your API key

For showing google map on a web page, we need to generate Google API key. For this, first login to your gmail account, go to 'Google API Console' and follow the instructions and get API key.

2. Create an HTML page and load the Google Map Javascript API into your web page.

To show Street view on the map, we will create an object literal and set properties by using google.maps.StreetViewPanorama constructor.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Map Street View</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map_container, #streetview {
        float: left;
        height: 100%;
        width: 45%;
      }
    </style>
  </head>
  <body>
    <div id="map_container"></div>
    <div id="streetview"></div>
    <script>
      function initialize() {
        var fenway = {lat: 28.6139, lng: 77.2091};
        var map = new google.maps.Map(document.getElementById('map_container'), {
          center: fenway,
          zoom: 10
        });
        var panorama = new google.maps.StreetViewPanorama(
            document.getElementById('streetview'), {
              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>

In the above example, replace the API_KEY with your generated API key. This script calls the google javascript map API, and callback parameter calls initialize function. The Javascript function initialize() adds the map within the div element.

Driving route directions from source to destination using HTML5 and Javascript
How to add google map on your website with marker
How to add multiple custom markers on google map
Create pie chart using google api
Driving route directions from source to destination using HTML5 and Javascript
Calculate the distance between two locations using PHP
Simple star rating system using PHP, jQuery and Ajax

◀ Previous Article
How to generate QR Code in PHP

Next Article ▶
jQuery File upload progress bar with file size validation