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.
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
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
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
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;
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;
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 !!!