React.js Google Maps integration component
npm install maxwells-react-google-maps[![Version][npm-image]][npm-url] [![Travis CI][travis-image]][travis-url] [![Quality][codeclimate-image]][codeclimate-url] [![Coverage][codeclimate-coverage-image]][codeclimate-coverage-url] [![Dependencies][gemnasium-image]][gemnasium-url] [![Gitter][gitter-image]][gitter-url]
Try it via:
``sh`
npm install --save react-google-maps@beta
As the author ([tomchentw][tomchentw]) currently doesn't actively use this module, he's looking for awesome contributors to help and keep the community healthy. Please don't hesitate to [contact him][tomchentw] directly. See [#266][call-for-maintainers] for more information.
Basically just a simple wrapper around [Google Maps Javascript API][Google Maps Javascript API]. Also check out the [demo][demo] app and it's source under [src/app][src_app] folder.
Note: this doc is under development for v6.0.0. Find docs for [v5.x][docs_v5] and [v4.x][docs_v4] with the git tags.
`jsx
import { withGoogleMap } from "react-google-maps";
// Wrap all react-google-maps // Wrap all The changelog is automatically generated via [conventional-changelog][conventional-changelog] and can be found in project root as well as npm tarball. [npm-image]: https://img.shields.io/npm/v/react-google-maps.svg?style=flat-square [travis-image]: https://img.shields.io/travis/tomchentw/react-google-maps.svg?style=flat-square components with withGoogleMap HOC
// and name it GettingStartedGoogleMap
const GettingStartedGoogleMap = withGoogleMap(props => (
defaultZoom={3}
defaultCenter={{ lat: -25.363882, lng: 131.044922 }}
onClick={props.onMapClick}
>
{props.markers.map((marker, index) => (
onRightClick={() => props.onMarkerRightClick(index)}
/>
))}
));
// Then, render it:
render(
100% }} />
}
mapElement={
100% }} />`
}
onMapLoad={_.noop}
onMapClick={_.noop}
markers={markers}
onMarkerRightClick={_.noop}
/>,
document.getElementById('root')
);`$3
jsx`
onRightClick={_.noop}
onDragStart={_.noop}
/>`$3
jsx`
onRightClick={_.noop}
onDragStart={_.noop}
/>`$3
jsx`
onRightClick={_.noop}
onDragStart={_.noop}
/>`$3
jsx`
onRightClick={_.noop}
onDragStart={_.noop}
/>`$3
jsx`
onRightClick={_.noop}
onDragStart={_.noop}
/>`$3
jsx`
onRightClick={_.noop}
onDragStart={_.noop}
/>`$3
jsx`
onDefaultViewportChanged={_.noop}
onStatusChanged={_.noop}
preserveViewport
suppressInfoWindows
/>`$3
jsx`
onDomReady={_.noop}
onZIndexChanged={_.noop}
/>`$3
jsx`
onOverlayComplete={_.noop}
/>`$3
jsx`
inputStyle={INPUT_STYLE}
/>`$3
jsx`
onMouseOut={_.noop}
/>`$3
jsx`
onDomReady={_.noop}
onZIndexChanged={_.noop}
/>`$3
jsxreact-google-maps
import { withGoogleMap } from "react-google-maps";
import withScriptjs from "react-google-maps/lib/async/withScriptjs"; components with withGoogleMap HOCwithScriptjs
// then wraps it into HOC
// It loads Google Maps JavaScript API v3 for you asynchronously.
// Name the component AsyncGettingStartedExampleGoogleMap
const AsyncGettingStartedExampleGoogleMap = withScriptjs(
withGoogleMap(
props => (
defaultZoom={3}
defaultCenter={{ lat: -25.363882, lng: 131.044922 }}
onClick={props.onMapClick}
>
{props.markers.map(marker => (
onRightClick={() => props.onMarkerRightClick(marker)}
/>
))}
)
);
// Then, render it:
render(
loadingElement={
100% }}>block
display: ,80px
width: ,80px
height: ,150px auto
margin: ,fa-spin 2s infinite linear
animation: ,
}}
/>
}
containerElement={
100% }} />
}
mapElement={
100% }} />``
}
onMapLoad={_.noop}
onMapClick={_.noop}
markers={markers}
onMarkerRightClick={_.noop}
/>,
document.getElementById('root')
);Changelog
[npm-url]: https://www.npmjs.org/package/react-google-maps
[travis-url]: https://travis-ci.org/tomchentw/react-google-maps
[codeclimate-image]: https://img.shields.io/codeclimate/github/tomchentw/react-google-maps.svg?style=flat-square
[codeclimate-url]: https://codeclimate.com/github/tomchentw/react-google-maps
[codeclimate-coverage-image]: https://img.shields.io/codeclimate/coverage/github/tomchentw/react-google-maps.svg?style=flat-square
[codeclimate-coverage-url]: https://codeclimate.com/github/tomchentw/react-google-maps
[gemnasium-image]: https://img.shields.io/gemnasium/tomchentw/react-google-maps.svg?style=flat-square
[gemnasium-url]: https://gemnasium.com/tomchentw/react-google-maps
[gitter-image]: https://badges.gitter.im/Join%20Chat.svg
[gitter-url]: https://gitter.im/tomchentw/react-google-maps?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge
[tomchentw]: https://github.com/tomchentw
[call-for-maintainers]: https://github.com/tomchentw/react-google-maps/issues/266
[demo]: https://tomchentw.github.io/react-google-maps/
[src_app]: https://github.com/tomchentw/react-google-maps/tree/master/src/app
[Google Maps Javascript API]: https://developers.google.com/maps/documentation/javascript/
[conventional-changelog]: https://github.com/ajoslin/conventional-changelog
[docs_v5]: https://github.com/tomchentw/react-google-maps/tree/v5.1.0#documentation
[docs_v4]: https://github.com/tomchentw/react-google-maps/tree/v4.11.0#documentation