Building a Street View Map Component with React and @react-google-maps/api

Creating interactive maps in React applications can significantly enhance user experience, especially when incorporating features like Google Street View. In this article, we'll explore how to build a Street View map component using React and the @react-google-maps/api library.
Google Maps provides a powerful JavaScript API that allows developers to embed maps and interactive features into web applications. The @react-google-maps/api library is a popular choice for integrating Google Maps with React, offering a set of React components that wrap the Google Maps JavaScript API.

One of the advanced features provided by the API is Street View, which gives users a panoramic, street-level view of a location. Implementing Street View in a React application can be tricky due to the asynchronous nature of loading external scripts and initializing map components. This article aims to guide you through the process step by step.

Prerequisites

Before we begin, ensure you have the following:

1. A React project set up (preferably using Create React App or Next.js)

2. Node.js and npm installed

3. A Google Cloud Platform account with Maps JavaScript API enabled

4. An API key from the Google Cloud Console

Implementation

"use client";

import { useLoadScript, StreetViewPanorama, GoogleMap } from "@react-google-maps/api";
import { useMemo } from "react";

interface MapProps {
  lat: number;
  lng: number;
}

export default function StreetView({ lat, lng }: MapProps) {
  const nextPublicGoogleMapsApiKey = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY as string;
  const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: nextPublicGoogleMapsApiKey as string,
  });

  const center = useMemo(() => ({ lat, lng }), [lat, lng]);

  if (loadError) return <div>Error loading maps</div>;
  if (!isLoaded) return <div>Loading maps</div>;

  return (
    <div className="w-full h-full">
      <GoogleMap
        mapContainerStyle={{ width: "100%", height: "100%" }}
        center={center}
        zoom={15}
        options={{ streetViewControl: false }}
      >
        <StreetViewPanorama
          options={{
            showRoadLabels: true,
            fullscreenControl: true,
            position: center,
            visible: true,
            pov: { heading: 100, pitch: 0 },
          }}
        />
      </GoogleMap>
    </div>
  );
}

Understanding the Implementation

• We import necessary components from @react-google-maps/api.

• Then We define an interface MapProps to specify the expected lat and lng properties, ensuring type safety.

• We use the useLoadScript hook to asynchronously load the Google Maps JavaScript API. This hook provides isLoaded and loadError to manage the loading state.

  We wrap everything in a div with classes w-full h-full to ensure the map and panorama occupy the full available space.

The Google Map Component

• mapContainerStyle: Defines the dimensions of the map container.

• center: Sets the initial center of the map to our center coordinates.

• zoom: Sets the initial zoom level of the map.

• options: We disable the default Street View control to prevent conflicts.

The StreetViewPanorama Component

• options: We pass several options to customize the Street View panorama:

  • position: The latitude and longitude where the panorama should be centered.

  • pov: The point of view, defining the direction and angle of the camera.

  • visible: Set to true to display the panorama.

  • showRoadLabels: Displays road labels on the panorama.

  • fullscreenControl: Adds a fullscreen button to the panorama.

Avoiding Common Pitfalls

• Nesting: StreetViewPanorama must be nested inside GoogleMap to function correctly.

• Visibility: Ensure the visible option is set to true; otherwise, the panorama won't display.

• Component Dimensions: The container and map components must have explicit width and height styles.

Conclusion

Implementing Google Street View in a React application using @react-google-maps/api provides a powerful way to offer immersive location experiences to your users. By following the steps and best practices outlined in this article, you can create a robust, performant, and customizable Street View integration.

Additional Resources

• @react-google-maps/api Documentation [https://www.npmjs.com/package/@react-google-maps/api]

• Google Maps JavaScript API - Street View [https://developers.google.com/maps/documentation/javascript/streetview]