Skip to content
Products
Solutions
By industry
By use case
Resources
Products
Solutions
By industry
By use case
Resources
Products
Solutions
By industry
By use case
Resources
Introducing React components for the Maps JavaScript API
Mike Pegg
Developer Relations, Google Maps Platform
Nov 2, 2023
Try Google Maps Platform
Unlock access to real-world data and insights with a monthly $200 Google Maps Platform credit.
Get started

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;
Copied to clipboard!

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]);
}
Copied to clipboard!

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.

Clay cityscape
Clay cityscape
Google Maps Platform
Get going with Google Maps Platform