@slorber/react-google-maps
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.2 • Public • Published

    @react-google-maps/api

    logo

    @react-google-maps/api

    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

    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 NPM

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

    or Yarn

    yarn add @react-google-maps/api
    

    Main features

    • Simplified API
    • Uses the new Context API
    • Supports async React (StrictMode complient)
    • Removes lodash dependency => smaller bundle size 12.4kb gzip, tree-shakeable https://bundlephobia.com/result?p=@react-google-maps/api@1.4.0
    • 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
    3. Gatsby.js Demo

    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 the community at https://spectrum.chat/react-google-maps to ask questions and help others with your experience.

    Contribute

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

    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
    <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
      }}
    />

    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.

    Websites made with @react-google-maps-api

    DriveFromTo.com Transfer Booking service PWA.

    add your website by making PR!

    Install

    npm i @slorber/react-google-maps

    DownloadsWeekly Downloads

    8

    Version

    1.4.2

    License

    MIT

    Unpacked Size

    932 kB

    Total Files

    162

    Last publish

    Collaborators

    • slorber