React Google Street View Map

Google Street View is a feature within Google Maps that allows users to virtually explore and navigate locations around the world. It utilizes panoramic photographs stitched together to create an immersive 360-degree view of streets, landmarks, and natural environments. Users can virtually move along streets, zoom in and out, and even explore interior spaces of certain establishments.

In this tutorial, we will learn how to create street view map in React js using Google API keys, react google street view package, and React functional component. To create a street view map in React js using Google API keys we follow these steps.

Step 1: 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

Step 2: 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

Step 3: 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

Step 4: 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;

Step 5: 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;

Step 6: 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:

Happy Coding !!!

#react