Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ryanhefner/react-maps-google
🗺 React components that make it easy to add Google maps and markers to your React projects.
https://github.com/ryanhefner/react-maps-google
google-maps google-maps-api google-maps-markers-list react react-component
Last synced: 21 days ago
JSON representation
🗺 React components that make it easy to add Google maps and markers to your React projects.
- Host: GitHub
- URL: https://github.com/ryanhefner/react-maps-google
- Owner: ryanhefner
- License: mit
- Created: 2018-04-04T20:03:52.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-12-19T18:55:20.000Z (11 months ago)
- Last Synced: 2023-12-20T11:59:50.960Z (11 months ago)
- Topics: google-maps, google-maps-api, google-maps-markers-list, react, react-component
- Language: JavaScript
- Homepage: https://www.pkgstats.com/pkg:react-maps-google
- Size: 24.9 MB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 223
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# 🗺 react-maps-google
[](https://www.pkgstats.com/pkg:react-maps-google)
[](LICENSE)
[](https://www.pkgstats.com/pkg:react-maps-google)
[](https://coveralls.io/github/ryanhefner/react-maps-google)
[](https://circleci.com/gh/ryanhefner/react-maps-google)
React components that make it easy to add Google maps and markers to your React projects.
## Install
Via [npm](https://npmjs.com/package/react-maps-google)
```sh
npm install --save react-maps-google
```
Via [Yarn](https://yarn.fyi/react-maps-google)
```sh
yarn add react-maps-google
```
## How to use
This package includes the core `GoogleMap` component that renders a Google Map
into your React project. Along with `Marker` and `MarkerClusterer` components that
make it easy to compose markers into your map instances.
### `` Component
#### Properties
* `apiKey:String` **Required** - Google Maps Javascript API key. [Guide to get an API key](https://developers.google.com/maps/documentation/javascript/get-api-key)
* `async:Bool` - True loads Google Maps script asynchronously. Defaults to true.
* `options:Object` - Options for customizing/styling the map. [MapOptions Interface](https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions)
* `onReady:Function` - Called when the Google Maps script has initialized `(map) => {}`
* `onBoundsChange:Function` - Called when the `bounds_changed` event is fired from the map. `(map) => {}`
* `onCenterChange:Function` - Called when the `change_changed` event is fired from the map. `(map) => {}`
* `onClick:Function` - Called when the `click` event is fired from the map. `(map, event) => {}`
* `onDoubleClick:Function` - Called when the `dblclick` event is fired from the map. `(map, event) => {}`
* `onDrag:Function` - Called when the `drag` event is fired from the map. `(map) => {}`
* `onDragEnd:Function` - Called when the `dragend` event is fired from the map. `(map) => {}`
* `onDragStart:Function` - Called when the `dragstart` event is fired from the map. `(map) => {}`
* `onHeadingChange:Function` - Called when the `heading_changed` event is fired from the map. `(map) => {}`
* `onIdle:Function` - Called when the `idle` event is fired from the map. `(map) => {}`
* `onMapTypeIdChange:Function` - Called when the `maptypeid_changed` event is fired from the map. `(map) => {}`
* `onMouseMove:Function` - Called when the `mousemove` event is fired from the map. `(map, event) => {}`
* `onMouseOut:Function` - Called when the `mouseout` event is fired from the map. `(map, event) => {}`
* `onMouseOver:Function` - Called when the `mouseover` event is fired from the map. `(map, event) => {}`
* `onProjectionChange:Function` - Called when the `projection_changed` event is fired from the map. `(map) => {}`
* `onRightClick:Function` - Called when the `rightclick` event is fired from the map. `(map, event) => {}`
* `onTilesLoad:Function` - Called when the `tilesloaded` event is fired from the map. `(map) => {}`
* `onTiltChange:Function` - Called when the `tilt_changed` event is fired from the map. `(map) => {}`
* `onZoomChange:Function` - Called when the `zoom_changed` event is fired from the map. `(map) => {}`
All callbacks return a reference to the `google.maps.Map` instance rendered within the
component and the associated `Event` (where supported).
#### Example
```js
import React from 'react';
import GoogleMap, { Marker } from 'react-maps-google';
const ExampleMap = (props) => {
return (
);
}
```
### `` Component
#### Properties
* `position:Object` **Required** - The latitude and longitude coordinates to render the marker. `{{lat: 0, lng: 0}}`
* `map:Object` - Reference the to the `google.maps.Map` instance, passed to the component within `GoogleMap`.
* `options:Object` - Options for customizing/styling the marker. [MarkerOptions Interface](https://developers.google.com/maps/documentation/javascript/reference/3.exp/marker?authuser=0#MarkerOptions)
* `onAnimationChange:Function` - Called when the `animation_changed` event is fired from the marker. `(marker) => {}`
* `onClick:Function` - Called when the `click` event is fired from the marker. `(marker, event) => {}`
* `onClickkableChange:Function` - Called when the `clickable_changed` event is fired from the marker. `(marker) => {}`
* `onCursorChange:Function` - Called when the `cursor_changed` event is fired from the marker. `(marker) => {}`
* `onDoubleClick:Function` - Called when the `dblclick` event is fired from the marker. `(marker, event) => {}`
* `onDrag:Function` - Called when the `drag` event is fired from the marker. `(marker, event) => {}`
* `onDragEnd:Function` - Called when the `dragend` event is fired from the marker. `(marker, event) => {}`
* `onDraggableChange:Function` - Called when the `draggable_changed` event is fired from the marker. `(marker) => {}`
* `onDragStart:Function` - Called when the `dragstart` event is fired from the marker. `(marker, event) => {}`
* `onFlatChange:Function` - Called when the `flat_changed` event is fired from the marker. `(marker) => {}`
* `onIconChange:Function` - Called when the `icon_changed` event is fired from the marker. `(marker) => {}`
* `onMouseDown:Function` - Called when the `mousedown` event is fired from the marker. `(marker, event) => {}`
* `onMouseOut:Function` - Called when the `mouseout` event is fired from the marker. `(marker, event) => {}`
* `onMouseOver:Function` - Called when the `mouseover` event is fired from the marker. `(marker, event) => {}`
* `onMouseUp:Function` - Called when the `mouseup` event is fired from the marker. `(marker, event) => {}`
* `onPositionChange:Function` - Called when the `position_changed` event is fired from the marker. `(marker) => {}`
* `onRightClick:Function` - Called when the `rightclick` event is fired from the marker. `(marker, event) => {}`
* `onShapeChange:Function` - Called when the `shape_changed` event is fired from the marker. `(marker) => {}`
* `onTitleChange:Function` - Called when the `title_changed` event is fired from the marker. `(marker) => {}`
* `onVisibleChange:Function` - Called when the `visible_changed` event is fired from the marker. `(marker) => {}`
* `onZIndexChange:Function` - Called when the `zindex_changed` event is fired from the marker. `(marker) => {}`
#### Example
```js
import React, { Component } from 'react';
import GoogleMap, { Marker } from 'react-maps-google';
class ExampleMap extends Component {
constructor(props) {
super(props);
this.onMarkerClick = this.onMarkerClick.bind(this);
}
onMarkerClick(marker, event) {
}
render() {
return (
);
}
}
```
### `` Component
_[in development]_
## License
[MIT](LICENSE) © [Ryan Hefner](https://www.ryanhefner.com)