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

Although Google Maps has plenty of upsides, there are reasons you might pick an alternative, for example the cost at high loads. But that doesn't mean you can't integrate Google Street View into your app! I'll show you how to integrate it into a Leaflet map (although this will work regardless of which mapping provider you go with), and cover some of the restrictions it comes with. Let's get started!

How it Works

For this project, we'll be using the Street View Service from the Google Maps JavaScript API (the same one used to render Google Maps). As such, it is priced in the same way, based on the amount of times it is loaded by users. Therefore, it makes sense to hide this feature unless the user requests it in some way (i.e behind a 'Street View' button, instead of constantly showing).

The Leaflet map is loaded as standard. I'll share the code (including the entire CodeSandbox for this project), but as this isn't a Leaflet specific tutorial, I wont be explaining it's setup beyond linking to their official setup guides.

First Steps

Before you get started, you'll need a Google Maps API Key. Google have this pretty well documented, so if you check this link, you'll find what you need to get started. Once you have your key, you'll need to import the script in your project root (typically your index.html file). For example:

    <script
      src="https://maps.googleapis.com/maps/api/js?key={ENTER_KEY_HERE}"
      async
      defer
    ></script>

After this, you'll just need to set up your map. If you're using Leaflet, this is incredibly simple (no API Key or authentication necessary!), just check out their Getting Started guide and go from there. If you're using React like I have, I strongly suggest using the react-leaflet library, just to make your life a bit easier. They also have a good Getting Started guide, so you're covered either way.

The Restrictions

Google Maps Platform uses a pay-as-you-go pricing model: you’re charged based on how many times a billable event (like loading a Street View panorama) occurs.

To use the API, you must enable billing on your Google Cloud project (the one you used to get your API key) and supply a valid API key or OAuth token with all requests.

Billing events are tracked per SKU (Stock Keeping Unit, a unique identifier for a sellable item) - for Street View that’s usually the Dynamic Street View SKU (see exact pricing here).

As of February 2026, you get 10,000 free calls a month.

The Code

Getting this working actually requires a remarkably small amount of code, especially for the Street View to be displayed. Below is the full App.tsx code, with the only additional code required being the imports for Leaflet and Google Maps API in the index.html:

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];

  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 (
    <div style={{ height: "100vh" }}>
      <MapContainer
        className="marker-map"
        center={[51.0, -1.5]}
        zoom={4}
        maxZoom={18}
      >
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
        <Marker position={{ lat: location[0], lng: location[1] }} />
      </MapContainer>
      <div ref={streetViewRef} style={{ width: "100%", height: "400px" }} />
    </div>
  );
}

So, to get the Google Street View working, you'll need to:

1. Declare a useRef for the Street View to use (we've called this 'streetViewRef'). This will be used to form a link between our HTML element that contains it (step 3), and the StreetView API that will use it.
2. We need to hook into the Google Maps StreetView API, in order to get the StreetView data back. This is significantly simpler than you'd think. It starts with the long qualifier 'window.google.maps.StreetViewPanorama', as this isn't an NPM package, but instead an old school script import in our root HTML file. Once we have this, we just need to pass in some location data for it to use to find our StreetView location. The Latitude and Longitude are very important to get accurate, as one wrong decimal place will result in a black screen and no useful error messages. For testing, I suggest finding a StreetView location on Google Maps, and checking the API calls it makes, in order to use it's Latitude and Longitude values. We don't need to do anything with the result; if we've gotten this right, and passed in our ref as we will in Step 3, the API should take care of the rest.
3. As mentioned in Step 1, all we need to do now is pass our useRef reference into a valid DOM object (an empty div being the most sensible choice in most cases). Whatever you use, remember this will act as a wrapper/parent for the StreetView component, so ensure your styling is correct. If you don't see the component at all, the most likely issue is the height/width not being set.

And that's it! The rest of the code you'll recognise from the Leaflet Getting Started guide, and makes up the majority of this project.

I'll link the CodeSandbox for this here, so that you can play with it yourself (after adding your Google API Key of course). Good luck, and please ask away if you have any questions.