When the Maps JavaScript API launched back in 2005, the web performed a lot differently than it does now. Since then, frontend web frameworks have emerged, vastly simplifying how frontend developers create user-friendly interfaces. Today, React.js is the most popular frontend web framework, in use by over half of frontend web developers. We started off supporting React developers with a wrapper library for loading the Maps JavaScript API and a set of videos teaching how to integrate the Maps JavaScript API into a React app.

Building off of that initial support, today we’re announcing the alpha release of @vis.gl/react-google-maps, the first Google-sponsored library for integrating Maps JavaScript API components in a React web app. The package contains React components that correspond to elements in the Maps JavaScript API and hooks to access the map instance and additional libraries, speeding up load times and making the overall codebase easier to manage. This package will allow developers to quickly and easily create web applications that have geospatial experiences while having the peace of mind that the library will be kept up to date.

How to use the vis.gl react-google-maps library

This library is available on npm as @vis.gl/react-google-maps. In your code, import the API provider to load the Maps JavaScript API and any other components you'll need, such as the Map component.

import {APIProvider, Map, Marker} from '@vis.gl/react-google-maps';

function App() {
  const position = {lat: 61.2176, lng: -149.8997};

  return (
    <APIProvider apiKey={'YOUR_API_KEY'}>
      <Map center={position} zoom={10}>
        <Marker position={position} />
      </Map>
    </APIProvider>
  );
}

export default App;

Then access services and libraries of the Maps JavaScript API by importing the "use Maps Library" hook.

import { APIProvider, useMapsLibrary } from '@vis.gl/react-google-maps';

export default function Page() {
  return (
    <APIProvider apiKey={'YOUR_API_KEY'}>
      <Geocoding />
    </APIProvider>
  );
}

function Geocoding() {
  const geocodingLibrary = useMapsLibrary('geocoding');
  useEffect(() => {
    if (!geocodingLibrary) return;

    const geocoder = new geocodingLibrary.Geocoder();
    // ...
  }, [geocodingLibrary]);
}

Contributing to the OpenJS Foundation

From the outset, we wanted to open source the React package for its longevity and health. The OpenJS Foundation houses many important open-source projects for the JavaScript community including node.js, jQuery, Webpack, Electron, and vis.gl which includes deck.gl. Building upon the Foundation's stewardship of @deck.gl/google-maps for high-performance WebGL-based data visualization overlays on Google maps, we felt that the vis.gl community would be the best caretakers of this library, ensuring its quality and longevity for all developers who depend on it.

Google is committed to ensuring the package is up-to-date and healthy. The vis.gl team will maintain the package as owners who manage pull requests and releases on GitHub.

Getting started

@vis.gl/react-google-maps is available to developers on GitHub and npm. You can find examples and documentation on the website. We’d love to hear your experience over on the Google Maps Platform Discord server in the #react channel!

For more information on Google Maps Platform, visit our website.