Editor’s Note: This post is part of our Google I/O 2024 series sharing the latest Google Maps Platform news from our annual developer conference. To learn more about the latest updates, register for our I/O technical session or our Maps Compose Library workshop on May 16.

After several months of steady growth and active contributions from the community, we're excited to announce the official 1.0 release of our React integration library for the Maps JavaScript API, React Google Maps Library. Building from the initial alpha release in November, this library enables React.js developers to quickly build rich geospatial experiences. 

What the React Google Maps Library brings to the table

• React Integration: Incorporate elements from the Maps JavaScript API as React components for an intuitive development experience, complete with state management and hooks to access the underlying Map instance.

• Extensibility: The included context and hooks unlock custom component creation to suit any specific use case.

• Framework Suite Integration: Combine the strengths of the React Google Maps Library with the data visualization powerhouse deck.gl to overlay compelling 2D and 3D WebGL/WebGPU visualizations on your Google maps.

A history of React support

Let's cast our minds back to 2005 when the web landscape was vastly different. The Maps JavaScript API transformed online mapping, and in the years that followed, frontend frameworks like React revolutionized web development.

Recognizing React's prominence, Google embarked on its support journey with a wrapper library and tutorials. Building on that foundation, the alpha release of React Google Maps Library was born—the inaugural Google-sponsored library offering React components and hooks for effortless Maps JavaScript API integration.

Contributing to open collaboration

To foster a healthy and sustainable environment for the React Google Maps Library, we partnered with the OpenJS Foundation. This foundation is renowned for nurturing critical JavaScript projects like node.js, ESLint, and Jest. The OpenJS Foundation hosts vis.gl, a suite of geospatial data visualization frameworks, which has maintained  @deck.gl/google-maps for five years. vis.gl will provide open governance for the React Google Maps Library while Google actively contributes to its upkeep and evolution.

Using the React Google Maps Library: A CARTO example

Many of the large-scale geospatial applications powered by CARTO and deck.gl provide a familiar environment for both developers and end-users by integrating with Google Maps Platform. Visualizations such as real estate or environmental use cases would have far less impact without a high-resolution satellite view or a smooth integration with Street View.

At CARTO we use React and Google Maps Platform as part of our everyday stack. Seeing this release joining the rest of the projects under the vis.gl community makes us extremely happy and predicts a great future ahead for both the geospatial and the React ecosystems. Felix Palmer Principal Rendering Engineer, CARTO

The React Google Maps Library makes this integration easier, seamless, and more reliable in the context of a modern React + deck.gl application. Treating the Google map as a React component removes the burden of translating the imperative Maps JavaScript API into a declarative UI. In addition, the seamless integration with deck.gl makes it simple to create a performant geospatial visualizations.

Let’s see this in practice with a simple example:

const App = () => {
  return (
    <APIProvider apiKey={process.env.GOOGLE_MAPS_API_KEY}>
      <Map
        defaultCenter={config.mapCenter}
        defaultZoom={config.mapZoom}
      >
        <AdvancedMarker position={config.markerPosition} />
        <MapControl position={ControlPosition.TOP_LEFT}>
          <ResetMapButton />
        </MapControl>
      </Map>
    </APIProvider>
  );
};

const ResetMapButton = () => {
  const map: google.maps.Map | null = useMap();
  const resetMap = useCallback(() => {
      if (!map) return;

      map.setCenter(config.mapCenter);
      map.setZoom(config.mapZoom);
  }, [map]);

  return <button onClick={resetMap}>Reset Map View</button>;
};

As we’ve seen, using the hooks and components available in @vis.gl/react-google-maps saves valuable development time and reduces the complexity of our applications, which now have an easier to maintain, always up-to-date, native React-version for most Google maps features, matching the rest of our codebase. 

Get started

Find documentation and examples on the React Google Maps Library website. To support developers further, we also offer a step-by-step tutorial as a codelab, as well as code samples for integrating React components from this library with other web components for common (e.g. Place Autocomplete) and complex use cases. To discuss this library with other developers, join the Google Maps Platform Discord server and join the #react channel. And finally, learn from this playlist of video tutorials for using the Maps JavaScript API with React.

We believe that the React Google Maps Library reaching its 1.0 milestone will usher in a new era of React-based Google Maps Platform projects. Thank you for being a part of this exciting journey.