Google Maps API and React

A quick tutorial for using React with Google Maps API

October 2022

The Google Maps API is incredibly useful and React is incredibly versatile. Combining the two is a bit confusing. This is a quick tutorial for a way to extend the Google Maps API with a custom Popup (called OverlayView on the Google Maps API) that we will build in React.

Extend Overlay View

In the constructor, create a container that will be:

  • passed to Google Maps in the onAdd function
  • and will render our React content in the draw function
class Popup extends google.maps.OverlayView {
    constructor({ content }) {
        // The container is a div that we can feed to Google Maps and attach our React content to
        this.container = document.createElement('div'); = 'absolute';
        this.content = content;

    public onAdd(): void {

    public draw(): void {
        // The draw function is called every time the Popup needs to render 
        // so here we will use React to render our content (React.Component) 
        React.render(this.content, this.container);

This is all it takes, now when we go to render a Popup on our map, we can pass React JSX as our content. A more complete version of the code can be found on Github.