react-gmaps v1.9.0

Marker	Polyline	Polygon

const location = { lat: 40.73061, lng: -73.935242 };

function MyMarker() {
  return (
    <GMapsMarker location={location}>
      <p style={{ backgroundColor: "red" }}>Hello World</p>
    </GMapsMarker>
  );
}

function MyMap() {
  return (
    <div style={{ height: "100vh" }}>
      <GMaps center={location} zoom={12}>
        <MyMarker />
      </GMaps>
    </div>
  );
}

Features

• Marker, Polyline, Polygon components and more
• Hook based
• Highly extensible
• Interpolation animations for everything (markers, polygons, etc.)

Documentation

See our documentation

Why yet another Google Maps integration for ReactJS?

Why choose React GMaps when there's already react-google-maps-api, google-maps-react, google-map-react, etc. ? The current landscape doesn't really provide a smooth integration for GoogleMaps in a ReactJS application with hooks and modern patterns. Existing implementations tends to be old/unmaintained, outdated, lacking features, and/or a bit wobbly.

React GMaps aims to be more flexible, extensible, and composable by exposing simple primitives that can be used in various ways. It utilizes modern GoogleMaps features such as AdvancedMarkers to avoid wacky hacks and unstable integrations. Plus its context base architecture, enables users to easly access GMaps functionalities programmaticaly and create GoogleMaps related libraries for others to use (similarly to the built-in Animated components).

TODOs

Wanna help? See our contributing.md.

• Marker component (displays ReactJS components)
• LegacyMarker component (displays images only)
• Polyline component
• Polygon component
• Circle component
• Rectangle component
• Overlays
• Hooks to access the google sdk and google.maps.Map instance using a ref to <GMaps />