How to Build Google Street View Map in React Js

In this tutorial, we will teach you how to create street view map in React js using Google API keys, react google street view package, and React functional component.

To display Google Street View using React, we can use the Google Maps JavaScript API.

To simplify our work we are using react google street view library. This library requires Google Map API, you can show street view through function component.

Google Street View is a feature of Google Maps and Google Earth that offers realistic panoramic views of different locations across the world.

Google street view helps you explore and roam through various streets, neighbourhoods, and cities by viewing 360-degree panoramic images captured by Google’s specialized Street View cars, tricycles, and cameras mounted on backpacks.

How to Use Google Street View using React Functional Component

• Step 1: Set Up React Project
• Step 2: Install Google Street View Package
• Step 3: Build Function Component
• Step 4: Create Street View Map Component
• Step 5: Update Main Entry
• Step 6: Test App in Browser

Set Up React Project

We have to set up a new React project. Make sure to have Node and Npm setup in your system, then run the command to install a new React framework.

You can ignore this step, if React app is already installed.

npx create-react-app my-react-app

Furthermore, enter into the project directory.

cd my-react-app

Install Google Street View Package

Next, install the package which are imperative to add street view functionality in React.

Here is the command that you have to execute.

npm i react-google-streetview bootstrap --legacy-peer-deps

Build Function Component

Now, create the components/ folder then create the StreetViewMap.js file.

The following file holds the basic function component; it is a wrapper which will contain all the logic to implement the Google street view in React.

import React from 'react'
function StreetViewMap() {
  return (
    <div></div>
  )
}
export default StreetViewMap

Create Street View Map Component

You will have to obtain an API key from the Google Cloud Developer Console.

Once you have the API key, you may include it to your React project.

To integrate the street view in our React application, go the StreetViewMap.js file immediately after insert the given code into the file.

import React from "react";
import Streetview from "react-google-streetview";
function StreetViewMap() {
  const googleMapsKey = "MAP_API_KEY";
  const StreetMapOptions = {
    position: { lat: 55.8271775, lng: 20.742731 },
    pov: { heading: 100, pitch: 0 },
    zoom: 1,
  };
  return (
    <div>
      <div
        style={{
          width: "850px",
          height: "550px",
          backgroundColor: "#cccccc",
        }}
      >
        <Streetview
          apiKey={googleMapsKey}
          streetViewPanoramaOptions={StreetMapOptions}
        />
      </div>
    </div>
  );
}
export default StreetViewMap;

Update Main Entry

Now, you have to look for the App.js file that is situated in src/ directory.

You need to import the StreetViewMap component and define the component in the App() function.

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import StreetViewMap from "./components/StreetViewMap";
function App() {
  return (
    <div className="container mt-3">
      <h2 className="mb-3">React Google Street View Map Example</h2>
      <StreetViewMap />
    </div>
  );
}
export default App;

Test App in Browser

Finally, we have to run the development server of our React application.

npm start

http://localhost:3000

Your app will run in the browser:

Conclusion

Street View is a dynamic tool for people to view destinations before visiting them.

In this tutorial, we have learned how to create street view component using function component in React js.

To integrate the street view in React we used the third-party library called React Google Street View.

We believe this guide will help you implement street view in React.