react-maps-google

🗺 react-maps-google

React components that make it easy to add Google maps and markers to your React projects.

Install

Via npm

npm install --save react-maps-google

Via Yarn

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.

<GoogleMap /> Component

Properties

• apiKey:String Required - Google Maps Javascript API key. Guide to get an API key
• async:Bool - True loads Google Maps script asynchronously. Defaults to true.
• options:Object - Options for customizing/styling the map. MapOptions Interface
• 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

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 /> 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
• 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

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]

License

MIT © Ryan Hefner