top of page
Writer's picture28East

Introducing React components for the Maps JavaScript API



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. Google Maps Platform 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, they recently announced 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, Google Maps Platform 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 visualisation overlays on Google maps, they 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

Get in touch with us today to learn more about the latest advancements in map technologies and to discuss how your business can benefit from it. 


14 views0 comments

Comments


bottom of page