react-google-map-components

Declarative React Google Map Components.

Installation

With yarn:

``bash yarn add react-google-map-components`

With npm:

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

`WIP Alert`

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

`Usage`

`javascript 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 (

{step === 0 ? ( ) : ( )}

defaultStyle={{ position: 0 }} style={{ position: spring(step, { stiffness: 10, damping: 26 }) }} > {x => } ); } }`

Check documentation page for more examples.

`Touch Events not working?`

`javascript 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.

`json { "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

Usage

javascript
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 (

        
          {step === 0 ? (
            
          ) : (
            
          )}

                  defaultStyle={{ position: 0 }}
          style={{ position: spring(step, { stiffness: 10, damping: 26 }) }}
        >
          {x => }
        
      
    );
  }
}

Check documentation page for more examples.

Touch Events not working?

javascript
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;
}