@react-google-maps/api vs react-google-maps vs google-maps-react
React Google Maps Libraries
Search packages..
@react-google-maps/apireact-google-mapsgoogle-maps-reactSimilar Packages:
React Google Maps Libraries

React Google Maps Libraries are packages that provide React components for integrating Google Maps into React applications. They offer a way to embed maps, markers, and other map features using Google Maps APIs, while providing a React-friendly interface for easier integration and customization. These libraries help developers create interactive and location-based applications with map functionalities, such as displaying locations, adding markers, drawing shapes, and handling user interactions with the map.

Npm Package Weekly Downloads Trend
3 Years
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
@react-google-maps/api1,320,2151,9736.02 MB1882 months agoMIT
react-google-maps105,7314,628-2728 years agoMIT
google-maps-react46,1521,641-2936 years agoMIT
Feature Comparison: @react-google-maps/api vs react-google-maps vs google-maps-react

Size and Performance

  • @react-google-maps/api:

    @react-google-maps/api is designed with performance in mind, offering a smaller bundle size compared to other libraries. It optimizes the loading of Google Maps scripts and components, making it suitable for applications where performance and load times are critical.

  • react-google-maps:

    react-google-maps has a moderate bundle size, but it may not be as optimized as @react-google-maps/api. The library provides a good balance between features and performance, making it suitable for most applications.

  • google-maps-react:

    google-maps-react is larger in size due to its feature-rich nature. While it provides many built-in components and functionalities, the increased size may impact load times in performance-sensitive applications.

API Design

  • @react-google-maps/api:

    @react-google-maps/api offers a clean and modern API that aligns with React’s functional programming paradigm. It provides hooks and components that are easy to use and integrate into functional components, promoting better code organization and reusability.

  • react-google-maps:

    react-google-maps follows a higher-order component (HOC) pattern, which may require a bit of a learning curve for developers unfamiliar with HOCs. However, it provides a flexible and reusable approach to map integration, allowing for greater customization.

  • google-maps-react:

    google-maps-react provides a straightforward API that is easy to understand and use. It offers a range of components and props that allow for quick integration of Google Maps features, making it accessible for developers of all skill levels.

Customization

  • @react-google-maps/api:

    @react-google-maps/api allows for extensive customization of map components, including markers, overlays, and controls. It provides a high level of flexibility, enabling developers to create highly customized map experiences while maintaining performance.

  • react-google-maps:

    react-google-maps provides a decent level of customization, particularly through its HOC structure. Developers can easily customize map components, but the library may not be as flexible as @react-google-maps/api for more complex customizations.

  • google-maps-react:

    google-maps-react offers good customization options, especially for its built-in components. However, some advanced customizations may require additional work or workarounds, as the library is more opinionated in its design.

Documentation and Community

  • @react-google-maps/api:

    @react-google-maps/api has comprehensive documentation that covers all aspects of the library, including setup, usage, and advanced features. The library is actively maintained, and its community is growing, providing a good support network for developers.

  • react-google-maps:

    react-google-maps has decent documentation, but it may not be as thorough as the other two libraries. The community is smaller, which may result in fewer resources and third-party contributions.

  • google-maps-react:

    google-maps-react offers solid documentation with examples and guides to help developers get started quickly. The library has a large user base, which contributes to a vibrant community and plenty of resources available online.

Ease of Use: Code Examples

  • @react-google-maps/api:

    Simple Map Example with @react-google-maps/api

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

const mapContainerStyle = {
  height: '400px',
  width: '800px'
};

const center = {
  lat: -3.745,
  lng: -73.589
};

const SimpleMap = () => {
  return (
    <LoadScript googleMapsApiKey="YOUR_API_KEY">
      <GoogleMap
        mapContainerStyle={mapContainerStyle}
        center={center}
        zoom={10}
      />
    </LoadScript>
  );
};

export default SimpleMap;
  • react-google-maps:

    Simple Map Example with react-google-maps

    import React from 'react';
import { GoogleMap, withGoogleMap, withScriptjs } from 'react-google-maps';

const MapComponent = withScriptjs(
  withGoogleMap(() => (
    <GoogleMap defaultZoom={10} defaultCenter={{ lat: -3.745, lng: -73.589 }} />
  ))
);

const SimpleMap = () => {
  return (
    <MapComponent
      googleMapURL="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"
      loadingElement={<div style={{ height: '100%' }} />}
      containerElement={<div style={{ height: '400px', width: '800px' }} />}
      mapElement={<div style={{ height: '100%' }} />}
    />
  );
};

export default SimpleMap;
  • google-maps-react:

    Simple Map Example with google-maps-react

    import React from 'react';
import { GoogleApiWrapper, Map } from 'google-maps-react';

const mapStyles = {
  width: '800px',
  height: '400px'
};

const SimpleMap = (props) => {
  return (
    <Map
      google={props.google}
      style={mapStyles}
      initialCenter={{ lat: -3.745, lng: -73.589 }}
      zoom={10}
    />
  );
};

export default GoogleApiWrapper({
  apiKey: 'YOUR_API_KEY'
})(SimpleMap);
How to Choose: @react-google-maps/api vs react-google-maps vs google-maps-react
  • @react-google-maps/api:

    Choose @react-google-maps/api if you need a modern, lightweight, and highly customizable solution that follows React best practices. It is suitable for projects that require performance optimization and minimal bundle size.

  • react-google-maps:

    Choose react-google-maps if you prefer a library that provides a set of higher-order components (HOCs) for Google Maps. It is suitable for developers who want to leverage HOCs for map integration and are comfortable with a more opinionated approach.

  • google-maps-react:

    Choose google-maps-react if you are looking for a feature-rich library with a simple API for integrating Google Maps quickly. It is ideal for projects that need a wide range of built-in features and components without extensive customization.

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, the official website for the npm registry. Note that npm is a registered trademark of npm, Inc. Please share your feedback via our GitHub repository. For more details, please refer to our Terms & Privacy.