How to Build Google Street View Map in React 18

Last Updated on by in React JS

In this tutorial, we will teach you how to create a street view map in React using Google API keys, functional components, and the react-react-google-streetview package, implementing panoramic 360-degree views from designated roads to your project.

In this tutorial, we will teach you how to create a street view map in React using Google API keys, functional components, and the react-react-google-streetview package, adding panoramic 360 degree views from designated roads to your project.

To add a Google Street View map to your React application, you may use the react-google-streetview package. It’s a feature-rich plugin, offering a React component for rendering Google Maps and allowing developers to add markers, directions, and other features to your map.

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:

How to Build Google Street View Map in React Js

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 and create dynamic road maps to make your web application feature rich.

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.