DEV Community: Danny Hodge

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

Danny Hodge — Sun, 15 Feb 2026 20:26:27 +0000

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:

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

Google Maps Routes API: Passing the 25 Waypoint Limit

Danny Hodge — Tue, 11 Nov 2025 21:11:46 +0000

If you've worked on the new Google Maps Routes API, and are working on a complex solution, you've probably been hampered by the 25 Waypoint limit. I've recently been working on a solution where the number of Waypoints could be in the hundreds! But not to worry, there's a solution that's simple and scalable. So pull up a chair, and let's take a look.

Getting Started

To help me along, I've used the 'vis.gl/react-google-maps' library, which provides React components that wrap around the Google Maps JavaScript API features. There's a couple of options for this (none fully featured unfortunately), but this one is Google sponsored (See their blob post here), so probably the best option. In my example, I'll be using version 1.7.1.

How it Works

The solution to this is actually quite simple. If you have a route with 50 Waypoints, you have a couple of options.

Send the request with 50 Waypoints, and have it be rejected.
Split the request into two 25 Waypoint requests.
Split the request into several requests, for example with up to 10 Waypoints.

The reason I chose option 3 is that it seems to be the cheapest, due to the pricing tier system Google employes. A request with 11 to 25 Intermediate Waypoints will jump up a cost tier (shown here in the Intermediate Waypoints documentation), making it slightly more expensive. Feel free to play around with the numbers yourself though, as this could change:

https://mapsplatform.google.com/pricing/#pricing-calculator

Once you've got the data back, you can simply render a Polyline for each of your requests, and it will be presented as one continuous line.

This solution will technically scale indefinitely, or at least until user's run into performance issues.

The Code

I'll link the full CodeSandbox below for this solution
here, but if you're not as experienced with the Google Maps JavaScript API, I suggest following along with the walkthrough to get a better understanding. You'll also need to get your own API Key to be able to run this demo.

The Components

The code for the Polyline component was taken from the vis.gl documentation. For some reason it isn't exposed as a component, but we can pull the component from their documentation regardless.

To give a short summary, this component takes in the customizable Polyline properties and events as optional parameters, uses them to instantiate the Polyline and renders it on the map. It's also responsible for bundling all this up into a React component for you to use in your application.

The Solution

This is where it gets a little more complicated. Let's break it down.

We'll start with the API request. We begin by iterating through our points, as shown in the code block below:

FetchRoute takes the start and end index of the current segment, passed in by a piece of code we'll see later. It gets the list of intermediate values (indices that will become Intermediate Waypoints) by taking a splice of a subset of the array (ignoring first and last point as these will be the Origin and Destination points), and then mapping through each of these values to format our data in the way the Google Routes API is expecting it, using the 'LatLng' type.

The next segment of our code is merely structuring the data for the API request. Take care to include the 'X-Goog-Api-Key' and 'X-Goog-FieldMask' headers, and arrange your data how you see fit.
Importantly, nothing I have included here will take this request out of the cheapest tier of pricing (as it stands in late 2025). However, Google's tier system means many of the optional parameters available to this Routes API Endpoint will significantly increase your cost, so tinker with caution!

At the end of the above screenshot, you'll see that we concatenate the route segments (encoded Polylines) together to form our array of routes, which we'll be iterating through later on when we come to render the full Route.

And we can see right after how we call the above function, iterating through our list of points, and passing the start/end points of each segment in as parameters. You'll see a ternary operator towards the end, which is there to ensure that the end index isn't larger than the size of the array.

Finally, we reach the end of the component, where we render our map and route (plus the markers to help visualise what's going on). Despite it being a large chunk of the code, there's really not much to explain here. The APIProvider and Map are basically passed in as they're found from any of the vis.gl docs, with a bit of styling added to keep it centred. After that, it's just a matter of looping through the array of Routes we set in state earlier, and rendering a Polyline for each of them.

I hope this has been helpful, please let me know if there are any more Google Maps guides/demos you'd like me to create.

What I Plan To Learn In 2025

Danny Hodge — Mon, 13 Jan 2025 18:40:39 +0000

As we start to approach the end of the year, one of my favorite things to do is to start considering what I want to start learning once January comes round the corner. It gets me excited about the year to come, and also helps me to reflect on the skills I've developed this year as well. In fact, it can also help with reflecting on your career as a whole, as figuring out what you want to learn may teach you what you enjoy the most about your job. For example, if your list is full of front end web frameworks, maybe it's time to consider focusing on front end?

Whatever you choose, I'm going to lay out my primary focuses, as well as some honourable mentions, and hopefully give you some tips and inspirations along the way, so that you can get more out of your personal development in 2024.

Tips For Building Your List

Starting with the most important, pick the topics you're most passionate about. It's so easy to lose steam if you pick topics you aren't really interested in.
Build up a list through the year, noting down interesting tools, frameworks and languages that you come across, which you can use to shortlist into the years goals.
Pay attention to the size of the list. Too long and it'll feel demotivating and unattainable, too short and you'll run out too fast, and potentially lose steam.
Consider your Depth vs Breadth. You'll probably lean more towards one than the other, but it's important to get a mixture. Breadth gives you more tools in your toolbelt, but depth is the key to becoming a great developer, as a shallow understanding of many concepts will only get you so far.

The Main Goals

A Deeper Dive into C

This may seem like an odd choice, since C# is actually the language I use the most, but the unfortunate truth is that most of my professional experience with it is with legacy code, and I'd love the opportunity to really get to grips with some of the newer features. I plan to learn this by going through past .NET releases, reading through to see what catches my attention, and creating small projects to use them, one by one.

This will likely be the biggest challenge to stick to out of all my learning goals for this year, as I tend to lean more towards learning new tools and frameworks than improving my depth of knowledge, but as I said earlier, depth is vital to improving skills as a developer, and I'm no exception.

Flutter

While I do enjoy making Apps, I've not been a big fan of the tools I've previously currently used, such as React Native, Xamarin and Android Studio. My issues vary, but the most important factor is the way the UI is built. React Native felt like the best, as most of my experience is as a Web developer, however that had it's own frustrations (such as the difficulty dealing with the many libraries needed to match the "out of the box" experience of other frameworks). Flutter, on the other hand, seems to approach UI from a unique perspective, and has become an instant favourite among many developers, so I'm excited to take a look at it, and see what the development experience is like.

My approach to learning this will (you may sense a trend here) be to develop an app using Flutter, after taking a quick look through some of the Getting Started guides on their website. As this is an entirely new framework and language for me, I've found that it can take some time to get the hang of things before settling on a judgement of whether or not to use it in the future, so I'll most likely wait til I have an idea for an app that I'd like to release, and create that using Flutter. This has the added benefit of ensuring I'll keep at it, as I'll want to finish off my project, instead of getting part way through a tutorial and giving up.

Machine Learning In Practice

During my MSc in Computer Science, I covered a decent amount of Machine Learning theory, however, as I'm sure anybody involved in the field would tell you, it's such an enormous field in it's own right that it warrants some more time spent learning. Most importantly, I've never had the opportunity to use it in practice, which is how I like to get a feel for a development tool. Therefore, in order to add this powerful tool to my arsenal, I'll be working on a project next year where I utilise Machine Learning to solve some kind of problem.

I'm probably the most excited about this one, as cracking this could really open up the potential side projects I can work on in the future. However, I know it could also be the most complex, so it'll require a good chunk of time being dedicated to it.

Even More Cloud

Cloud has already been a big focus for me this year, as the project I work on in my day to day uses Azure blob and queue storage, Azure Web App deployment and Azure Functions. However, like Machine Learning, Cloud is a massive field, and this barely scratches the surface of what can be done.

My primary focus will be on learning about different ways to use the Cloud to process information, such as Docker containers and Web Jobs. However, I also know that there are likely gaps in my knowledge that I haven't realised yet, so I'd love to complete something like the AZ900 Certification to ensure that I'm not learning to run before I can walk.

Conclusion

So, that's what I'm planning to learn this year. What's on your list? Let me know!