Declarative React Google Map Components
npm install react-google-map-componentsDeclarative React Google Map Components.
With yarn:
``bash`
yarn add react-google-map-components
With npm:
`bash`
npm install --save react-google-map-components
Not all Google Map components are ported (See #1).
`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 ? (
) : (
)}
style={{ position: spring(step, { stiffness: 10, damping: 26 }) }}
>
{x =>
);
}
}
`
Check documentation page for more examples.
`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;
}
`
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"]]]
}
* https://github.com/istarkov/google-map-react
* https://github.com/tomchentw/react-google-maps
* https://github.com/googlemaps/v3-utility-library
MIT