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 you can't integrate Google Street View to 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 (this works with any mapping provider), I wont be explaining it's setup.

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 our 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 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 out StreetView location. The Latitude and Longitude are very important to get accurate, as getting them slightly wrong 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.