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

type PopupConfig = {
  map: google.maps.Map;
  content: React.Component;
  position: google.maps.LatLng;

class Popup extends google.maps.OverlayView {
    private readonly container: HTMLDivElement;
    private content: ComponentChild;
    private position: google.maps.LatLng;

    constructor({ map, content, position }: PopupConfig) {
        // 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);

    public onRemove(): void {
        if (this.container.parentElement) {