react-google-map-components

Declarative React Google Map Components.

Installation

With yarn:

yarn add react-google-map-components

With npm:

npm install --save react-google-map-components

WIP Alert

Not all Google Map components are ported (See #1).

Usage

import React from "react";
import { Motion, spring } from "react-motion";
import {
  GoogleMap,
  Polyline,
  FitBounds,
  ZoomControl,
  CustomControl,
} from "react-google-map-components";

export default class DirectionMap extends React.Component {
  state = { step: 0 };

  render() {
    const { step } = this.state;
    const { maps, path, style, center } = this.props;

    return (
      <GoogleMap zoom={9} maps={maps} style={style} center={center}>
        <ZoomControl />

        <FitBounds latLngBounds={path} />

        <Polyline path={path} strokeOpacity={0.3} />

        <CustomControl position="BOTTOM_CENTER">
          {step === 0 ? (
            <button onClick={() => this.setState({ step: path.length - 1 })}>
              Start
            </button>
          ) : (
            <button onClick={() => this.setState({ step: 0 })}>Revert</button>
          )}
        </CustomControl>

        <Motion
          defaultStyle={{ position: 0 }}
          style={{ position: spring(step, { stiffness: 10, damping: 26 }) }}
        >
          {x => <Polyline path={path.slice(0, x.position)} />}
        </Motion>
      </GoogleMap>
    );
  }
}

Check documentation page for more examples.

Touch Events not working?

if (window.navigator) {
  /**
   * Make mouse work with google maps in Windows touch devices.
   *
   * @link http://stackoverflow.com/a/37611736/1709679
   */
  window.navigator.msPointerEnabled = true;

  /**
   * Make touch/pan/zoom work with google maps work in Windows touch devices.
   *
   * @link https://code.google.com/p/gmaps-api-issues/issues/detail?id=6425
   */
  window.navigator.msMaxTouchPoints = window.navigator.msMaxTouchPoints || 2;
}

Minimizing Bundle Size

If you're bundling your app with Rollup or webpack and don't want to manually chery pick modules you're using, you can use babel plugin that will do it for you.

{
  "plugins": [["direct-import", ["react-google-map-components"]]]
}

Related Projects

• https://github.com/istarkov/google-map-react
• https://github.com/tomchentw/react-google-maps
• https://github.com/googlemaps/v3-utility-library

Licence

MIT