React Components for the Google Maps JavaScript API

This is a TypeScript / JavaScript library to integrate the Maps JavaScript API into your React application. It comes with a collection of React components to create maps, markers and infowindows, and a set of hooks to use some of the Maps JavaScript API Services and Libraries.

Installation

This library is available on npm as @vis.gl/react-google-maps.

npm install @vis.gl/react-google-maps

Usage

Import the APIProvider and wrap it around all components that should have access to the Google Maps API. Any component within the context of the APIProvider can use the hooks and components provided by this library.

To render a simple map, add a Map component inside the APIProvider. Within the Map component, you can then add further components like Marker, AdvancedMarker, or InfoWindow to render content on the map.

For more advanced use-cases you can even add your own components to the map that make use of google.maps.OverlayView or google.maps.WebGlOverlayView.

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

function App() {
  const position = {lat: 53.54992, lng: 10.00678};

  return (
    <APIProvider apiKey={'YOUR API KEY HERE'}>
      <Map center={position} zoom={10}>
        <Marker position={position} />
      </Map>
    </APIProvider>
  );
}

export default App;

Please see our documentation or examples for more in-depth information about this library.

Using other libraries of the Maps JavaScript API

Besides rendering maps, the Maps JavaScript API has a lot of additional libraries for things like geocoding, routing, the Places API, Street View, and a lot more. These libraries are not loaded by default, which is why this module provides the useMapsLibrary() hook to handle dynamic loading of additional libraries.

For example, if you want to use the google.maps.places.PlacesService class in your component, you can implement it like this:

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

const MyComponent = () => {
  // triggers loading the places library and returns true once complete (the
  // component calling the hook gets automatically re-rendered when this is
  // the case)
  const placesLib = useMapsLibrary('places');
  const [placesService, setPlacesService] = useState(null);

  useEffect(() => {
    if (!placesLib) return;

    setPlacesService(new placesLib.PlacesService());
  }, [placesLib]);

  useEffect(() => {
    if (!placesService) return;

    // ...use placesService...
  }, [placesService]);

  return <></>;
};

Examples

Explore our examples directory on GitHub or the examples on our website for full implementation examples.