Integrating Google Street View into your React App WITHOUT using Google Maps

Source: Dev.to

Introduction

Google Maps offers many features, but its cost at high loads can be a concern. You can still integrate Google Street View into your app without displaying a full Google Map. This guide shows how to embed Street View in a React app using a Leaflet map (the approach works with any mapping provider) and outlines the associated restrictions.

Prerequisites

• Google Maps API Key – Follow the official documentation to obtain a key and enable billing on your Google Cloud project.
• Leaflet – Use the standard Leaflet setup (no API key required).
• React – The example uses react-leaflet for easier integration.

Adding the Google Maps script

Add the script tag to your index.html (or equivalent entry point):

<!-- Insert your Google Maps script tag with your API key here -->

Pricing Overview

• Google Maps Platform uses a pay‑as‑you‑go model; each Street View panorama load counts as a billable event.
• Billing must be enabled on the project that provides the API key.
• The relevant SKU is Dynamic Street View (see the Google Maps pricing page).
• As of February 2026, the first 10,000 Street View calls per month are free.

Implementation

Install dependencies

npm install react-leaflet leaflet
# or with yarn
yarn add react-leaflet leaflet

Full App.tsx

import { MapContainer, TileLayer, Marker } from "react-leaflet";
import "./styles.css";
import { useEffect, useRef } from "react";

export default function App() {
  const streetViewRef = useRef(null);
  const location = [53.3957542, -1.3052656]; // latitude, longitude

  useEffect(() => {
    if (!window?.google || !streetViewRef.current) return;

    new window.google.maps.StreetViewPanorama(streetViewRef.current, {
      position: { lat: location[0], lng: location[1] },
      pov: {
        heading: 180,
        pitch: 0,
      },
      zoom: 1,
    });
  }, [location]);

  return (
    
      
        
        
      

      {/* Street View container */}
      
    
  );
}

Step‑by‑step explanation

1. Create a useRef (streetViewRef) that will hold the DOM element where Street View renders.
2. Load the Street View panorama inside a useEffect hook once the Google Maps script (window.google) and the ref are available.
3. Pass the location (lat & lng) to new window.google.maps.StreetViewPanorama. Accurate coordinates are essential; an incorrect decimal place results in a blank view.
4. Render a container (“) with explicit width and height so the panorama is visible.
5. The rest of the component sets up a basic Leaflet map with a marker at the same location.

Testing the coordinates

To find reliable latitude and longitude values:

1. Open Google Maps, locate the desired Street View point.
2. Inspect the network requests or use the “Share” → “Copy link” option and extract the !3d (latitude) and !4d (longitude) parameters.

Running the example

1. Insert your API key into the script tag in index.html.
2. Start the React development server (npm start or yarn start).
3. The map appears with a marker, and the Street View panorama loads below it.

If the panorama does not appear, verify that the container has non‑zero width/height and that the coordinates are correct.

Further resources

• Leaflet Getting Started guide
• React‑Leaflet documentation
• Google Maps Street View API reference

Feel free to explore the live CodeSandbox (add your API key) and adapt the implementation to your own project. Happy coding!