Step-by-Step Guide: Adding Google Maps to Your React App Using Vis.gl

Visualizing Maps in React

Adding custom maps to web applications can add a lot of value. Whether you are building a real estate app, a location finder, or a delivery tracker, maps are highly interactive visual elements.

The standard Google Maps JavaScript API can be difficult to manage with React's lifecycle. Fortunately, vis.gl (by the creators of deck.gl) provides a React wrapper library @vis.gl/react-google-maps that makes integration incredibly smooth and declarative.

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

Setting Up the Map Provider

To use Google Maps in React, you wrap your component hierarchy in an APIProvider and render a Map component inside it.

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

export default function MyMap() {
  return (
    <APIProvider apiKey="YOUR_GOOGLE_MAPS_API_KEY">
      <div style={{ height: '400px', width: '100%' }}>
        <Map
          defaultCenter={{ lat: 28.6139, lng: 77.2090 }}
          defaultZoom={10}
          gestureHandling="greedy"
        >
          <Marker position={{ lat: 28.6139, lng: 77.2090 }} />
        </Map>
      </div>
    </APIProvider>
  );
}

This simple setup brings custom, performant, and reactive maps straight into your application.