Nitrogen Poisonous Monoxide

    google-map-react
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/google-map-react package

    2.1.10 • Public • Published

    Google Map React · npm version Build Status PRs Welcome

    google-map-react is a component written over a small set of the Google Maps API. It allows you to render any React component on the Google Map. It is fully isomorphic and can render on a server. Additionally, it can render map components in the browser even if the Google Maps API is not loaded. It uses an internal, tweakable hover algorithm - every object on the map can be hovered.

    It allows you to create interfaces like this example (You can scroll the table, zoom/move the map, hover/click on markers, and click on table rows)

    Getting started

    In the simple case you just need to add lat and lng props to any child of GoogleMapReact component.

    See it in action at jsbin

    import React, { Component } from 'react';
    import GoogleMapReact from 'google-map-react';
    
    const AnyReactComponent = ({ text }) => <div>{text}</div>;
    
    class SimpleMap extends Component {
      static defaultProps = {
        center: {
          lat: 59.95,
          lng: 30.33
        },
        zoom: 11
      };
    
      render() {
        return (
          // Important! Always set the container height explicitly
          <div style={{ height: '100vh', width: '100%' }}>
            <GoogleMapReact
              bootstrapURLKeys={{ key: /* YOUR KEY HERE */ }}
              defaultCenter={this.props.center}
              defaultZoom={this.props.zoom}
            >
              <AnyReactComponent
                lat={59.955413}
                lng={30.337844}
                text="My Marker"
              />
            </GoogleMapReact>
          </div>
        );
      }
    }
    
    export default SimpleMap;

    My map doesn't appear!

    • Make sure the container element has width and height. The map will try to fill the parent container, but if the container has no size, the map will collapse to 0 width / height. This is not a requirement for google-map-react, its a requirement for google-maps in general.

    Installation

    npm:

    npm install --save google-map-react
    

    yarn:

    yarn add google-map-react
    

    Features

    Works with your Components

    Instead of the default Google Maps markers, balloons and other map components, you can render your cool animated react components on the map.

    Isomorphic Rendering

    It renders on the server. (Welcome search engines) (you can disable javascript in browser dev tools, and reload any example page to see how it works)

    Component Positions Calculated Independently of Google Maps API

    It renders components on the map before (and even without) the Google Maps API loaded.

    Google Maps API Loads on Demand

    There is no need to place a <script src= tag at top of page. The Google Maps API loads upon the first usage of the GoogleMapReact component.

    Use Google Maps API

    You can access to Google Maps map and maps objects by using onGoogleApiLoaded, in this case you will need to set yesIWantToUseGoogleMapApiInternals to true

    ...
    
    const handleApiLoaded = (map, maps) => {
      // use map and maps objects
    };
    
    ...
    
    <GoogleMapReact
      bootstrapURLKeys={{ key: /* YOUR KEY HERE */ }}
      defaultCenter={this.props.center}
      defaultZoom={this.props.zoom}
      yesIWantToUseGoogleMapApiInternals
      onGoogleApiLoaded={({ map, maps }) => handleApiLoaded(map, maps)}
    >
      <AnyReactComponent
        lat={59.955413}
        lng={30.337844}
        text="My Marker"
      />
    </GoogleMapReact>

    PST: Remember to set yesIWantToUseGoogleMapApiInternals to true.

    Example here

    Internal Hover Algorithm

    Now every object on the map can be hovered (however, you can still use css hover selectors if you want). If you try zooming out here example, you will still be able to hover on almost every map marker.

    Examples

    Documentation

    You can find the documentation here:

    Contribute

    Local development is broken into two parts (ideally using two tabs).

    First, run rollup to watch your src/ module and automatically recompile it into dist/ whenever you make changes.

    npm start # runs rollup with watch flag

    The second part will be running the example/ create-react-app that's linked to the local version of your module.

    # (in another tab)
    cd example
    npm start # runs create-react-app dev server

    Now, anytime you make a change to your library in src/ or to the example app's example/src, create-react-app will live-reload your local dev server so you can iterate on your component in real-time.

    Manual link-install

    If you get the error Module not found: Can't resolve 'google-react-map'... while trying to run the example app, you need to manually link your local development module, try the following steps:

    1. In the root folder:
    npm link
    1. Go into example/ and (after installing other dependencies) execute:
    npm link google-map-react

    License

    MIT

    Known Issues

    !!! We are looking for contributors

    We're actively looking for contributors, please send a message to the Owner or any of the Collaborators.

    Install

    npm i google-map-react

    DownloadsWeekly Downloads

    213,657

    Version

    2.1.10

    License

    MIT

    Unpacked Size

    497 kB

    Total Files

    10

    Last publish

    Collaborators

    • istarkov
    • itsmichaeldiego