@react-google-maps/api vs react-google-maps vs google-maps-react
React Google Maps Libraries Comparison
Search packages..
1 Year
@react-google-maps/apireact-google-mapsgoogle-maps-reactSimilar Packages:
What's React Google Maps Libraries?

These libraries provide React components for integrating Google Maps into React applications. They facilitate the embedding of maps, markers, and various map controls, allowing developers to create interactive and visually appealing map interfaces. Each library has its own approach to handling Google Maps API, offering different levels of customization, performance, and ease of use, catering to various project requirements and developer preferences.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
@react-google-maps/api729,8791,8706.01 MB20315 days agoMIT
react-google-maps137,9744,627-2727 years agoMIT
google-maps-react60,9661,638-2955 years agoMIT
Feature Comparison: @react-google-maps/api vs react-google-maps vs google-maps-react

Performance

  • @react-google-maps/api:

    This library is optimized for performance, utilizing React's hooks and lazy loading techniques to minimize unnecessary renders and improve loading times. It allows for selective loading of components, which can significantly enhance the user experience in large applications.

  • react-google-maps:

    This library tends to have performance issues in larger applications due to its reliance on class components and less efficient rendering strategies. It may not be the best choice for performance-critical applications.

  • google-maps-react:

    While this library provides a comprehensive set of features, it may not be as performance-optimized as @react-google-maps/api. It can lead to more frequent re-renders, which may impact performance in complex applications.

Ease of Use

  • @react-google-maps/api:

    This package offers a straightforward API with a focus on React's functional components and hooks, making it easier for developers to integrate and manage map features without extensive boilerplate code.

  • react-google-maps:

    This library may require more setup and understanding of class components, which can be a barrier for newer developers. However, it provides a more traditional approach that some may find familiar.

  • google-maps-react:

    This library is designed for ease of use, providing a simple API that allows developers to quickly set up maps and markers. It is suitable for those who want to get started with minimal configuration.

Customization

  • @react-google-maps/api:

    Highly customizable, this library allows developers to leverage the full capabilities of the Google Maps API while providing React-friendly components. It supports custom overlays, markers, and event handling, enabling tailored map experiences.

  • react-google-maps:

    This library allows for customization but may not provide as many hooks or options as the other two libraries. Developers may need to write more boilerplate code to achieve specific customizations.

  • google-maps-react:

    Offers a decent level of customization, but may not expose all the advanced features of the Google Maps API. It provides a good balance between ease of use and customization options for most common use cases.

Community and Support

  • @react-google-maps/api:

    This library has a growing community and is actively maintained, ensuring that developers have access to support and updates. Its modern approach aligns with current React best practices, making it a reliable choice.

  • react-google-maps:

    This library has a smaller community and may not be as actively maintained, which could lead to challenges in finding support or updates for newer React features.

  • google-maps-react:

    Being one of the older libraries, it has a larger community and a wealth of resources, tutorials, and examples available. However, it may not receive updates as frequently as newer libraries.

Learning Curve

  • @react-google-maps/api:

    This library has a gentle learning curve, especially for developers familiar with React hooks. Its modern design aligns well with current React paradigms, making it accessible for new developers.

  • react-google-maps:

    This library may present a steeper learning curve due to its reliance on class components and more complex setup. Developers may need to invest more time to become proficient with its usage.

  • google-maps-react:

    This library is relatively easy to learn, with a straightforward API that allows developers to quickly implement maps. However, it may require some understanding of the underlying Google Maps API.

How to Choose: @react-google-maps/api vs react-google-maps vs google-maps-react
  • @react-google-maps/api:

    Choose this package for a modern, lightweight solution that emphasizes performance and modular design. It is well-maintained and provides hooks for better integration with React's functional components.

  • react-google-maps:

    Select this package if you prefer a library that offers a more traditional approach to Google Maps integration with a focus on higher-level components. It may be less performant compared to others but can be easier to use for developers familiar with class components.

  • google-maps-react:

    Opt for this package if you need a more established library with a broader set of features and a simpler API for integrating Google Maps. It is suitable for projects that require quick setup and ease of use, though it may not be as performant as newer alternatives.

Similar Npm Packages to @react-google-maps/api

@react-google-maps/api is a popular library for integrating Google Maps into React applications. It provides a set of React components that make it easy to render maps, markers, and other map-related features while leveraging the Google Maps JavaScript API. This library is designed to be lightweight, efficient, and compatible with modern React features, making it a go-to choice for developers looking to incorporate maps into their applications.

While @react-google-maps/api is a powerful option, there are several alternatives available in the React ecosystem:

  • google-maps-react is another library that allows developers to integrate Google Maps into their React applications. It provides a set of components and higher-order components to work with the Google Maps API. Although it is a solid choice, some developers find it less flexible and more cumbersome compared to @react-google-maps/api. If you are looking for a straightforward way to implement Google Maps without needing advanced features, google-maps-react can still be a viable option.

  • react-google-maps is an older library that also enables the integration of Google Maps into React applications. It offers a set of components for rendering maps and markers, but it is less actively maintained compared to other options. While it may still work for basic use cases, developers might encounter limitations when trying to implement more complex features. As such, it may not be the best choice for new projects, especially when more modern alternatives are available.

To see how @react-google-maps/api compares with google-maps-react and react-google-maps, check out the comparison: Comparing @react-google-maps/api vs google-maps-react vs react-google-maps.

Similar Npm Packages to react-google-maps

react-google-maps is a popular library for integrating Google Maps into React applications. It provides a set of React components that allow developers to easily embed and customize Google Maps, including markers, overlays, and various map controls. With its straightforward API, react-google-maps is a go-to choice for developers looking to leverage the power of Google Maps in their React projects. However, there are alternative libraries that also offer mapping solutions for React applications. Here are a couple of notable alternatives:

  • react-geosuggest is a library that provides a simple and customizable autocomplete input for location search. It uses the Google Places API to suggest locations as users type, making it a great choice for applications that require location-based search functionality. While react-geosuggest focuses primarily on location input and suggestions, it can be used alongside other mapping libraries to enhance user experience when searching for places on a map.
  • react-leaflet is a library that provides React components for Leaflet, a widely used open-source JavaScript library for interactive maps. Unlike react-google-maps, which relies on Google Maps, react-leaflet allows developers to create maps using various tile providers, including OpenStreetMap. This flexibility makes react-leaflet a great option for projects that require open-source mapping solutions or want to avoid vendor lock-in. It also offers a rich set of features for handling markers, popups, and layers.

To see how react-google-maps compares with react-geosuggest and react-leaflet, check out the comparison: Comparing react-geosuggest vs react-google-maps vs react-leaflet.

Similar Npm Packages to google-maps-react

google-maps-react is a popular library for integrating Google Maps into React applications. It provides a set of components that make it easy to render maps, markers, and other map-related features using the Google Maps JavaScript API. With its straightforward API and React-friendly components, developers can create interactive and visually appealing maps with minimal effort. However, there are several alternatives available that offer different approaches to integrating Google Maps in React applications. Here are a few notable options:

  • google-maps-api-loader is a lightweight library designed to load the Google Maps JavaScript API dynamically. It provides a simple way to manage the loading process of the API, ensuring that it is available before your application attempts to use it. This library is particularly useful if you want to have more control over how and when the Google Maps API is loaded, without being tied to a specific component structure. It can be a great choice for developers who prefer to create their own custom map components while still leveraging the power of the Google Maps API.
  • react-google-maps is another library that provides a set of React components for Google Maps. It is built on top of the Google Maps JavaScript API and offers a more declarative approach to building maps in React. With react-google-maps, developers can easily create custom map components, markers, and overlays, while benefiting from the flexibility of React's component-based architecture. This library is suitable for those who want to build complex map interfaces with a focus on customization and component reusability.

To see how google-maps-react compares with google-maps-api-loader and react-google-maps, check out the comparison: Comparing google-maps-api-loader vs google-maps-react vs react-google-maps.

README for @react-google-maps/api

@react-google-maps/api

logo

npm package npm downloads npm bundle size

@react-google-maps/api

You can donate or became a sponsor of the project here: https://opencollective.com/react-google-maps-api#category-CONTRIBUTE

This library requires React v16.6 or later. To use the latest features (including hooks) requires React v16.8+. If you need support for earlier versions of React, you should check out react-google-maps Versions starting 12.20.0 should support React@19.

This is complete re-write of the (sadly unmaintained) react-google-maps library. We thank tomchentw for his great work that made possible.

@react-google-maps/api provides very simple bindings to the google maps api and lets you use it in your app as React components.

Here are the main additions to react-google-maps that were the motivation behind this re-write

Install @react-google-maps/api

with PNPM

pnpm install @react-google-maps/api

with NPM

npm i -S @react-google-maps/api

import React from 'react'
import { GoogleMap, useJsApiLoader } from '@react-google-maps/api'

const containerStyle = {
  width: '400px',
  height: '400px',
}

const center = {
  lat: -3.745,
  lng: -38.523,
}

function MyComponent() {
  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: 'YOUR_API_KEY',
  })

  const [map, setMap] = React.useState(null)

  const onLoad = React.useCallback(function callback(map) {
    // This is just an example of getting and using the map instance!!! don't just blindly copy!
    const bounds = new window.google.maps.LatLngBounds(center)
    map.fitBounds(bounds)

    setMap(map)
  }, [])

  const onUnmount = React.useCallback(function callback(map) {
    setMap(null)
  }, [])

  return isLoaded ? (
    <GoogleMap
      mapContainerStyle={containerStyle}
      center={center}
      zoom={10}
      onLoad={onLoad}
      onUnmount={onUnmount}
    >
      {/* Child components, such as markers, info windows, etc. */}
      <></>
    </GoogleMap>
  ) : (
    <></>
  )
}

export default React.memo(MyComponent)

Migration from react-google-maps@9.4.5

if you need an access to map object, instead of ref prop, you need to use onLoad callback on <GoogleMap /> component.

Before:

// before - don't do this!
<GoogleMap
  ref={(map) => {
    const bounds = new window.google.maps.LatLngBounds()

    map.fitBounds(bounds)
  }}
/>

After:

<GoogleMap
  onLoad={(map) => {
    const bounds = new window.google.maps.LatLngBounds()
    map.fitBounds(bounds)
  }}
  onUnmount={(map) => {
    // do your stuff before map is unmounted
  }}
/>

If you want to use window.google object, you need to extract GoogleMap in separate module, so it is lazy executed then google-maps-api script is loaded and executed by <LoadScript />. If you try to use window.google before it is loaded it will be undefined and you'll get a TypeError.

Main features

  • Simplified API
  • Uses the new Context API
  • Supports async React (StrictMode compliant)
  • Removes lodash dependency => smaller bundle size 12.4kb gzip, tree-shakeable https://bundlephobia.com/result?p=@react-google-maps/api
  • forbids loading of Roboto fonts, if you set property preventGoogleFonts on <LoadScript preventGoogleFonts /> component

Examples

Examples can be found in two places:

  1. Official docs (powered by react-styleguidist.
  2. A Gatsby app including some examples. See the examples folder

Advice

Using the examples requires you to generate a google maps api key. For instructions on how to do that please see the following guide

Community Help Resource

You can join our Slack channel

Contribute

Maintainers and contributors are very welcome! See this issue to get started.

How to test changes locally

When working on a feature/fix, you're probably gonna want to test your changes. This workflow is a work in progress. Please feel free to improve it!

  1. In the file packages/react-google-maps-api/package.json change main to "src/index.ts"
  2. In the same file, delete the module field
  3. You can now use the package react-google-maps-api-gatsby-example to test your changes. Just make sure you change the import from @react-google-maps/api to ../../../react-google-maps-api

Since 1.2.0 you can use onLoad and onMount props for each @react-google-maps/api component, ref does not contain API methods anymore.

Since version 1.2.2 We added useGoogleMap hook, which is working only with React@16.8.1 and later versions.

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc or npmjs.com, the official website for the npm registry. Please note that npm is a registered trademark of npm, Inc. For more details, please refer to our Terms & Privacy.