React components that make it easy to add Google maps and markers to your React projects.
Via npm
npm install --save react-maps-google
Via Yarn
yarn add react-maps-google
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.
<GoogleMap />
ComponentapiKey:String
Required - Google Maps Javascript API key. Guide to get an API keyasync:Bool
- True loads Google Maps script asynchronously. Defaults to true.options:Object
- Options for customizing/styling the map. MapOptions InterfaceonReady: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).
import React from 'react';
import GoogleMap, { Marker } from 'react-maps-google';
const ExampleMap = (props) => {
return (
<GoogleMap apiKey="[insert your api key here]">
<Marker position={{lat: 40.7174343, lng: -73.9930319}} />
</GoogleMap>
);
}
<Marker />
Componentposition: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 InterfaceonAnimationChange: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) => {}
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 (
<GoogleMap apiKey="[insert your api key here]">
<Marker
position={{lat: 40.7174343, lng: -73.9930319}}
onClick={this.onMarkerClick}
/>
</GoogleMap>
);
}
}
<MarkerClusterer />
Component[in development]
MIT © Ryan Hefner