Introduction

react-google-maps provides a set of React components wrapping the underlying Google Maps JavaScript API v3 instances. The wrapping simply do:

props delegation
events as callbacks
lifecycle management
auto-mount on map

That's it. Nothing more. If you find some limitations, that might be due to Google Maps JavaScript API v3 but not react-google-maps.

This documentation site is created with the awesome react-styleguidist. It comes with components documentation with props, public methods and live demo. The live demos come with live updates by clicking the CODE button on the bottom-left corner and editing there.

Documentation

Installation

npm install --save react-google-maps # or
yarn add react-google-maps

Usage & Configuration

There're some steps to take to create your custom map components. Follow on:

Step 1

Everything inside a component will be mounted automatically on the map And it will be automatically unmounted from the map if you don't render it.

import { GoogleMap, Marker } from "react-google-maps"

const MyMapComponent = (props) =>
  <GoogleMap
    defaultZoom={8}
    defaultCenter={{ lat: -34.397, lng: 150.644 }}
  >
    {props.isMarkerShown && <Marker position={{ lat: -34.397, lng: 150.644 }} />}
  </GoogleMap>

<MyMapComponent isMarkerShown />// Map with a Marker
<MyMapComponent isMarkerShown={false} />// Just only Map

Step 2

In order to initialize the MyMapComponent with DOM instances, you'll need to wrap it with withGoogleMap HOC.

import { withGoogleMap, GoogleMap, Marker } from "react-google-maps"

const MyMapComponent = withGoogleMap((props) =>
  <GoogleMap
    defaultZoom={8}
    defaultCenter={{ lat: -34.397, lng: 150.644 }}
  >
    {props.isMarkerShown && <Marker position={{ lat: -34.397, lng: 150.644 }} />}
  </GoogleMap>
)

<MyMapComponent isMarkerShown />// Map with a Marker
<MyMapComponent isMarkerShown={false} />// Just only Map

Step 3

In order to correctly load Google Maps JavaScript API v3, you'll need to wrap it with withScriptjs HOC.

import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps"

const MyMapComponent = withScriptjs(withGoogleMap((props) =>
  <GoogleMap
    defaultZoom={8}
    defaultCenter={{ lat: -34.397, lng: 150.644 }}
  >
    {props.isMarkerShown && <Marker position={{ lat: -34.397, lng: 150.644 }} />}
  </GoogleMap>
))

<MyMapComponent isMarkerShown />// Map with a Marker
<MyMapComponent isMarkerShown={false} />// Just only Map

If you don't use withScriptjs, you have to put a <script/> tag for Google Maps JavaScript API v3 in your HTML's <head/> element

Step 4

Notice there're some required props for withGoogleMap and withScriptjs HOC.

import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps"

const MyMapComponent = withScriptjs(withGoogleMap((props) =>
  <GoogleMap
    defaultZoom={8}
    defaultCenter={{ lat: -34.397, lng: 150.644 }}
  >
    {props.isMarkerShown && <Marker position={{ lat: -34.397, lng: 150.644 }} />}
  </GoogleMap>
))

<MyMapComponent
  isMarkerShown
  googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
  loadingElement={<div style={{ height: `100%` }} />}
  containerElement={<div style={{ height: `400px` }} />}
  mapElement={<div style={{ height: `100%` }} />}
/>

For simplicity, in this documentation, I will use recompose to simplify the component. It'll look something like this with recompose:

import { compose, withProps } from "recompose"
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps"

const MyMapComponent = compose(
  withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withScriptjs,
  withGoogleMap
)((props) =>
  <GoogleMap
    defaultZoom={8}
    defaultCenter={{ lat: -34.397, lng: 150.644 }}
  >
    {props.isMarkerShown && <Marker position={{ lat: -34.397, lng: 150.644 }} />}
  </GoogleMap>
))

<MyMapComponent isMarkerShown />

Step 5

Implement your own state transition logic with MyMapComponent!

import React from "react"
import { compose, withProps } from "recompose"
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps"

const MyMapComponent = compose(
  withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withScriptjs,
  withGoogleMap
)((props) =>
  <GoogleMap
    defaultZoom={8}
    defaultCenter={{ lat: -34.397, lng: 150.644 }}
  >
    {props.isMarkerShown && <Marker position={{ lat: -34.397, lng: 150.644 }} onClick={props.onMarkerClick} />}
  </GoogleMap>
))

class MyFancyComponent extends React.PureComponent {
  state = {
    isMarkerShown: false,
  }

  componentDidMount() {
    this.delayedShowMarker()
  }

  delayedShowMarker = () => {
    setTimeout(() => {
      this.setState({ isMarkerShown: true })
    }, 3000)
  }

  handleMarkerClick = () => {
    this.setState({ isMarkerShown: false })
    this.delayedShowMarker()
  }

  render() {
    return (
      <MyMapComponent
        isMarkerShown={this.state.isMarkerShown}
        onMarkerClick={this.handleMarkerClick}
      />
    )
  }
}

HOCs

withGoogleMap

Props

containerElement: ReactElement
mapElement: ReactElement

Usage

import {
  withGoogleMap,
  GoogleMap,
  Marker,
} from "react-google-maps";

const MapWithAMarker = withGoogleMap(props =>
  <GoogleMap
    defaultZoom={8}
    defaultCenter={{ lat: -34.397, lng: 150.644 }}
  >
    <Marker
      position={{ lat: -34.397, lng: 150.644 }}
    />
  </GoogleMap>
);

<MapWithAMarker
  containerElement={<div style={{ height: `400px` }} />}
  mapElement={<div style={{ height: `100%` }} />}
/>

withScriptjs

Props

googleMapURL: String
loadingElement: ReactElement

Usage

import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
} from "react-google-maps";

const MapWithAMarker = withScriptjs(withGoogleMap(props =>
  <GoogleMap
    defaultZoom={8}
    defaultCenter={{ lat: -34.397, lng: 150.644 }}
  >
    <Marker
      position={{ lat: -34.397, lng: 150.644 }}
    />
  </GoogleMap>
));

<MapWithAMarker
  googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places"
  loadingElement={<div style={{ height: `100%` }} />}
  containerElement={<div style={{ height: `400px` }} />}
  mapElement={<div style={{ height: `100%` }} />}
/>

UI Components

InfoBox

import InfoBox from "react-google-maps/lib/components/addons/InfoBox";

A wrapper around InfoBox

http://htmlpreview.github.io/?https://github.com/googlemaps/v3-utility-library/blob/master/infobox/docs/reference.html

Prop name	Type	Description
`defaultOptions`	`any`
`defaultPosition`	`any`
`defaultVisible`	`bool`
`defaultZIndex`	`number`
`options`	`any`
`position`	`any`
`visible`	`bool`
`zIndex`	`number`
`onCloseClick`	`func`	function
`onDomReady`	`func`	function
`onContentChanged`	`func`	function
`onPositionChanged`	`func`	function
`onZindexChanged`	`func`	function

Styled Map with an InfoBox

Oops! Something went wrong.

This page didn't load Google Maps correctly. See the JavaScript console for technical details.

xxxxxxxxxx
 
const { compose, withProps, withStateHandlers } = require("recompose");const {  withScriptjs,  withGoogleMap,  GoogleMap,} = require("react-google-maps");const { InfoBox } = require("react-google-maps/lib/components/addons/InfoBox");const demoFancyMapStyles = require("./demoFancyMapStyles.json");​const StyledMapWithAnInfoBox = compose(  withProps({    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places",    loadingElement: <div style={{ height: `100%` }} />,    containerElement: <div style={{ height: `400px` }} />,    mapElement: <div style={{ height: `100%` }} />,    center: { lat: 25.03, lng: 121.6 },  }),  withStateHandlers(() => ({    isOpen: false,  }), {    onToggleOpen: ({ isOpen }) => () => ({      isOpen: !isOpen,    })  }),  withScriptjs,  withGoogleMap)(props =>  <GoogleMap    defaultZoom={5}    defaultCenter={props.center}    defaultOptions={{ styles: demoFancyMapStyles }}  >    <InfoBox      defaultPosition={new google.maps.LatLng(props.center.lat, props.center.lng)}      options={{ closeBoxURL: ``, enableEventPropagation: true }}    >      <div style={{ backgroundColor: `yellow`, opacity: 0.75, padding: `12px` }}>        <div style={{ fontSize: `16px`, fontColor: `#08233B` }}>          Hello, Taipei!        </div>      </div>    </InfoBox>    <Marker      position={{ lat: 22.6273, lng: 120.3014 }}      onClick={props.onToggleOpen}    >      {props.isOpen && <InfoBox        onCloseClick={props.onToggleOpen}        options={{ closeBoxURL: ``, enableEventPropagation: true }}      >        <div style={{ backgroundColor: `yellow`, opacity: 0.75, padding: `12px` }}>          <div style={{ fontSize: `16px`, fontColor: `#08233B` }}>            Hello, Kaohsiung!          </div>        </div>      </InfoBox>}    </Marker>  </GoogleMap>);​<StyledMapWithAnInfoBox />

MarkerClusterer

import MarkerClusterer from "react-google-maps/lib/components/addons/MarkerClusterer";

A wrapper around MarkerClusterer

https://github.com/mahnunchik/markerclustererplus/blob/master/docs/reference.html

Prop name	Type	Description
`defaultAverageCenter`	`bool`
`defaultBatchSizeIE`	`number`
`defaultBatchSize`	`number`
`defaultCalculator`	`func`
`defaultClusterClass`	`string`
`defaultEnableRetinaIcons`	`bool`
`defaultGridSize`	`number`
`defaultIgnoreHidden`	`bool`
`defaultImageExtension`	`string`
`defaultImagePath`	`string`
`defaultImageSizes`	`array`
`defaultMaxZoom`	`number`
`defaultMinimumClusterSize`	`number`
`defaultStyles`	`array`
`defaultTitle`	`string`
`defaultZoomOnClick`	`bool`
`averageCenter`	`bool`
`batchSizeIE`	`number`
`batchSize`	`number`
`calculator`	`func`
`clusterClass`	`string`
`enableRetinaIcons`	`bool`
`gridSize`	`number`
`ignoreHidden`	`bool`
`imageExtension`	`string`
`imagePath`	`string`
`imageSizes`	`array`
`maxZoom`	`number`
`minimumClusterSize`	`number`
`styles`	`array`
`title`	`string`
`zoomOnClick`	`bool`
`onClick`	`func`	function
`onClusteringBegin`	`func`	function
`onClusteringEnd`	`func`	function
`onMouseOut`	`func`	function
`onMouseOver`	`func`	function

Map with a MarkerClusterer

Oops! Something went wrong.

This page didn't load Google Maps correctly. See the JavaScript console for technical details.

xxxxxxxxxx
 
const fetch = require("isomorphic-fetch");const { compose, withProps, withHandlers } = require("recompose");const {  withScriptjs,  withGoogleMap,  GoogleMap,  Marker,} = require("react-google-maps");const { MarkerClusterer } = require("react-google-maps/lib/components/addons/MarkerClusterer");​const MapWithAMarkerClusterer = compose(  withProps({    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places",    loadingElement: <div style={{ height: `100%` }} />,    containerElement: <div style={{ height: `400px` }} />,    mapElement: <div style={{ height: `100%` }} />,  }),  withHandlers({    onMarkerClustererClick: () => (markerClusterer) => {      const clickedMarkers = markerClusterer.getMarkers()      console.log(`Current clicked markers length: ${clickedMarkers.length}`)      console.log(clickedMarkers)    },  }),  withScriptjs,  withGoogleMap)(props =>  <GoogleMap    defaultZoom={3}    defaultCenter={{ lat: 25.0391667, lng: 121.525 }}  >    <MarkerClusterer      onClick={props.onMarkerClustererClick}      averageCenter      enableRetinaIcons      gridSize={60}    >      {props.markers.map(marker => (        <Marker          key={marker.photo_id}          position={{ lat: marker.latitude, lng: marker.longitude }}        />      ))}    </MarkerClusterer>  </GoogleMap>);​class DemoApp extends React.PureComponent {  componentWillMount() {    this.setState({ markers: [] })  }​  componentDidMount() {    const url = [      // Length issue      `https://gist.githubusercontent.com`,      `/farrrr/dfda7dd7fccfec5474d3`,      `/raw/758852bbc1979f6c4522ab4e92d1c92cba8fb0dc/data.json`    ].join("")​    fetch(url)      .then(res => res.json())      .then(data => {        this.setState({ markers: data.photos });      });  }​  render() {    return (      <MapWithAMarkerClusterer markers={this.state.markers} />    )  }}​<DemoApp />

MarkerWithLabel

import MarkerWithLabel from "react-google-maps/lib/components/addons/MarkerWithLabel";

A wrapper around MarkerWithLabel

https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js

Prop name	Type	Default	Description
`children`	`node`		It will be `MarkerWithLabel#labelContent`. https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js
`labelAnchor`	`object`		For `MarkerWithLabel` https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js
`labelClass`	`string`		For `MarkerWithLabel` https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js
`labelStyle`	`object`		For `MarkerWithLabel`. This is for native JS style object, so you may expect some React shorthands for inline styles not working here. https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js
`labelVisible`	`bool`	`true`	For `MarkerWithLabel` https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js
`noRedraw`	`bool`		For the 2nd argument of `MarkerCluster#addMarker` https://github.com/mikesaidani/marker-clusterer-plus
`defaultAnimation`	`any`
`defaultClickable`	`bool`
`defaultCursor`	`string`
`defaultDraggable`	`bool`
`defaultIcon`	`any`
`defaultLabel`	`any`
`defaultOpacity`	`number`
`defaultOptions`	`any`
`defaultPlace`	`any`
`defaultPosition`	`any`
`defaultShape`	`any`
`defaultTitle`	`string`
`defaultVisible`	`bool`
`defaultZIndex`	`number`
`animation`	`any`
`clickable`	`bool`
`cursor`	`string`
`draggable`	`bool`
`icon`	`any`
`label`	`any`
`opacity`	`number`
`options`	`any`
`place`	`any`
`position`	`any`
`shape`	`any`
`title`	`string`
`visible`	`bool`
`zIndex`	`number`
`onDblClick`	`func`		function
`onDragEnd`	`func`		function
`onDragStart`	`func`		function
`onMouseDown`	`func`		function
`onMouseOut`	`func`		function
`onMouseOver`	`func`		function
`onMouseUp`	`func`		function
`onRightClick`	`func`		function
`onAnimationChanged`	`func`		function
`onClick`	`func`		function
`onClickableChanged`	`func`		function
`onCursorChanged`	`func`		function
`onDrag`	`func`		function
`onDraggableChanged`	`func`		function
`onFlatChanged`	`func`		function
`onIconChanged`	`func`		function
`onPositionChanged`	`func`		function
`onShapeChanged`	`func`		function
`onTitleChanged`	`func`		function
`onVisibleChanged`	`func`		function
`onZindexChanged`	`func`		function

Method name	Parameters	Description
`getAnimation()`
`getClickable()`
`getCursor()`
`getDraggable()`
`getIcon()`
`getLabel()`
`getOpacity()`
`getPlace()`
`getPosition()`
`getShape()`
`getTitle()`
`getVisible()`
`getZIndex()`

Map with a MarkerWithLabel

Oops! Something went wrong.

This page didn't load Google Maps correctly. See the JavaScript console for technical details.

xxxxxxxxxx
 
const { compose } = require("recompose");const {  withScriptjs,  withGoogleMap,  GoogleMap,} = require("react-google-maps");const { MarkerWithLabel } = require("react-google-maps/lib/components/addons/MarkerWithLabel");​const MapWithAMarkerWithLabel = compose(  withScriptjs,  withGoogleMap)(props =>  <GoogleMap    defaultZoom={8}    defaultCenter={{ lat: -34.397, lng: 150.644 }}  >    <MarkerWithLabel      position={{ lat: -34.397, lng: 150.644 }}      labelAnchor={new google.maps.Point(0, 0)}      labelStyle={{backgroundColor: "yellow", fontSize: "32px", padding: "16px"}}    >      <div>Hello There!</div>    </MarkerWithLabel>  </GoogleMap>);​<MapWithAMarkerWithLabel  googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places"  loadingElement={<div style={{ height: `100%` }} />}  containerElement={<div style={{ height: `400px` }} />}  mapElement={<div style={{ height: `100%` }} />}/>

BicyclingLayer

import { BicyclingLayer } from "react-google-maps";

A wrapper around google.maps.BicyclingLayer

https://developers.google.com/maps/documentation/javascript/3.exp/reference#BicyclingLayer

Map with a BicyclingLayer

Oops! Something went wrong.

This page didn't load Google Maps correctly. See the JavaScript console for technical details.

xxxxxxxxxx
 
const { compose, withProps } = require("recompose");const {  withScriptjs,  withGoogleMap,  GoogleMap,  BicyclingLayer,} = require("react-google-maps");​const MapWithABicyclingLayer = compose(  withProps({    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places",    loadingElement: <div style={{ height: `100%` }} />,    containerElement: <div style={{ height: `400px` }} />,    mapElement: <div style={{ height: `100%` }} />,  }),  withScriptjs,  withGoogleMap)(props =>  <GoogleMap    defaultZoom={12}    defaultCenter={{ lat: 34.17223, lng: -118.37897 }}  >    <BicyclingLayer autoUpdate />  </GoogleMap>);​<MapWithABicyclingLayer />

Circle

import { Circle } from "react-google-maps";

A wrapper around google.maps.Circle

https://developers.google.com/maps/documentation/javascript/3.exp/reference#Circle

Prop name	Type	Description
`defaultCenter`	`any`
`defaultDraggable`	`bool`
`defaultEditable`	`bool`
`defaultOptions`	`any`
`defaultRadius`	`number`
`defaultVisible`	`bool`
`center`	`any`
`draggable`	`bool`
`editable`	`bool`
`options`	`any`
`radius`	`number`
`visible`	`bool`
`onDblClick`	`func`	function
`onDragEnd`	`func`	function
`onDragStart`	`func`	function
`onMouseDown`	`func`	function
`onMouseMove`	`func`	function
`onMouseOut`	`func`	function
`onMouseOver`	`func`	function
`onMouseUp`	`func`	function
`onRightClick`	`func`	function
`onCenterChanged`	`func`	function
`onClick`	`func`	function
`onDrag`	`func`	function
`onRadiusChanged`	`func`	function

Method name	Parameters	Description
`getBounds()`		Gets the `LatLngBounds` of this Circle.
`getCenter()`		Returns the center of this circle.
`getDraggable()`		Returns whether this circle can be dragged by the user.
`getEditable()`		Returns whether this circle can be edited by the user.
`getRadius()`		Returns the radius of this circle (in meters).
`getVisible()`		Returns whether this circle is visible on the map.

DirectionsRenderer

import { DirectionsRenderer } from "react-google-maps";

A wrapper around google.maps.DirectionsRenderer

https://developers.google.com/maps/documentation/javascript/3.exp/reference#DirectionsRenderer

Prop name	Type	Description
`defaultDirections`	`any`
`defaultOptions`	`any`
`defaultPanel`	`any`
`defaultRouteIndex`	`number`
`directions`	`any`
`options`	`any`
`panel`	`any`
`routeIndex`	`number`
`onDirectionsChanged`	`func`	function

Method name	Parameters	Description
`getDirections()`		Returns the renderer's current set of directions.
`getPanel()`		Returns the panel `<div>` in which the `DirectionsResult` is rendered.
`getRouteIndex()`		Returns the current (zero-based) route index in use by this `DirectionsRenderer` object.

Map with a DirectionsRenderer

Oops! Something went wrong.

This page didn't load Google Maps correctly. See the JavaScript console for technical details.

xxxxxxxxxx
 
const { compose, withProps, lifecycle } = require("recompose");const {  withScriptjs,  withGoogleMap,  GoogleMap,  DirectionsRenderer,} = require("react-google-maps");​const MapWithADirectionsRenderer = compose(  withProps({    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places",    loadingElement: <div style={{ height: `100%` }} />,    containerElement: <div style={{ height: `400px` }} />,    mapElement: <div style={{ height: `100%` }} />,  }),  withScriptjs,  withGoogleMap,  lifecycle({    componentDidMount() {      const DirectionsService = new google.maps.DirectionsService();​      DirectionsService.route({        origin: new google.maps.LatLng(41.8507300, -87.6512600),        destination: new google.maps.LatLng(41.8525800, -87.6514100),        travelMode: google.maps.TravelMode.DRIVING,      }, (result, status) => {        if (status === google.maps.DirectionsStatus.OK) {          this.setState({            directions: result,          });        } else {          console.error(`error fetching directions ${result}`);        }      });    }  }))(props =>  <GoogleMap    defaultZoom={7}    defaultCenter={new google.maps.LatLng(41.8507300, -87.6512600)}  >    {props.directions && <DirectionsRenderer directions={props.directions} />}  </GoogleMap>);​<MapWithADirectionsRenderer />

DrawingManager

import DrawingManager from "react-google-maps/lib/components/drawing/DrawingManager";

A wrapper around google.maps.drawing.DrawingManager

https://developers.google.com/maps/documentation/javascript/3.exp/reference#DrawingManager

Prop name	Type	Description
`defaultDrawingMode`	`any`
`defaultOptions`	`any`
`drawingMode`	`any`
`options`	`any`
`onCircleComplete`	`func`	function
`onMarkerComplete`	`func`	function
`onOverlayComplete`	`func`	function
`onPolygonComplete`	`func`	function
`onPolylineComplete`	`func`	function
`onRectangleComplete`	`func`	function

Method name	Parameters	Description
`getDrawingMode()`		Returns the `DrawingManager`'s drawing mode.

Map with a DrawingManager

Oops! Something went wrong.

This page didn't load Google Maps correctly. See the JavaScript console for technical details.

xxxxxxxxxx
 
const { compose, withProps } = require("recompose");const {  withScriptjs,  withGoogleMap,  GoogleMap,} = require("react-google-maps");const { DrawingManager } = require("react-google-maps/lib/components/drawing/DrawingManager");​const MapWithADrawingManager = compose(  withProps({    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places",    loadingElement: <div style={{ height: `100%` }} />,    containerElement: <div style={{ height: `400px` }} />,    mapElement: <div style={{ height: `100%` }} />,  }),  withScriptjs,  withGoogleMap)(props =>  <GoogleMap    defaultZoom={8}    defaultCenter={new google.maps.LatLng(-34.397, 150.644)}  >    <DrawingManager      defaultDrawingMode={google.maps.drawing.OverlayType.CIRCLE}      defaultOptions={{        drawingControl: true,        drawingControlOptions: {          position: google.maps.ControlPosition.TOP_CENTER,          drawingModes: [            google.maps.drawing.OverlayType.CIRCLE,            google.maps.drawing.OverlayType.POLYGON,            google.maps.drawing.OverlayType.POLYLINE,            google.maps.drawing.OverlayType.RECTANGLE,          ],        },        circleOptions: {          fillColor: `#ffff00`,          fillOpacity: 1,          strokeWeight: 5,          clickable: false,          editable: true,          zIndex: 1,        },      }}    />  </GoogleMap>);​<MapWithADrawingManager />

FusionTablesLayer

import { FusionTablesLayer } from "react-google-maps";

A wrapper around google.maps.FusionTablesLayer

https://developers.google.com/maps/documentation/javascript/3.exp/reference#FusionTablesLayer

Prop name	Type	Description
`defaultOptions`	`any`
`options`	`any`
`onClick`	`func`	function

Map with a FusionTablesLayer

Oops! Something went wrong.

This page didn't load Google Maps correctly. See the JavaScript console for technical details.

xxxxxxxxxx
 
const { compose, withProps } = require("recompose");const {  withScriptjs,  withGoogleMap,  GoogleMap,  FusionTablesLayer,} = require("react-google-maps");​const MapWithAFusionTablesLayer = compose(  withProps({    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places",    loadingElement: <div style={{ height: `100%` }} />,    containerElement: <div style={{ height: `400px` }} />,    mapElement: <div style={{ height: `100%` }} />,  }),  withScriptjs,  withGoogleMap)(props =>  <GoogleMap    defaultZoom={11}    defaultCenter={{ lat: 41.850033, lng: -87.6500523 }}  >    <FusionTablesLayer      url="http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml"      options={{        query: {          select: `Geocodable address`,          from: `1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg`        }      }}    />  </GoogleMap>);​<MapWithAFusionTablesLayer />

GoogleMap

import { GoogleMap } from "react-google-maps";

A wrapper around google.maps.Map

https://developers.google.com/maps/documentation/javascript/3.exp/reference#Map

Prop name	Type	Description
`defaultExtraMapTypes`	`arrayOf[]`	https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapTypeRegistry
`defaultCenter`	`any`
`defaultClickableIcons`	`bool`
`defaultHeading`	`number`
`defaultMapTypeId`	`any`
`defaultOptions`	`any`
`defaultStreetView`	`any`
`defaultTilt`	`number`
`defaultZoom`	`number`
`center`	`any`
`clickableIcons`	`bool`
`heading`	`number`
`mapTypeId`	`any`
`options`	`any`
`streetView`	`any`
`tilt`	`number`
`zoom`	`number`
`onDblClick`	`func`	function
`onDragEnd`	`func`	function
`onDragStart`	`func`	function
`onMapTypeIdChanged`	`func`	function
`onMouseMove`	`func`	function
`onMouseOut`	`func`	function
`onMouseOver`	`func`	function
`onRightClick`	`func`	function
`onTilesLoaded`	`func`	function
`onBoundsChanged`	`func`	function
`onCenterChanged`	`func`	function
`onClick`	`func`	function
`onDrag`	`func`	function
`onHeadingChanged`	`func`	function
`onIdle`	`func`	function
`onProjectionChanged`	`func`	function
`onResize`	`func`	function
`onTiltChanged`	`func`	function
`onZoomChanged`	`func`	function

Method name	Parameters	Description
`fitBounds()`	`...args`	https://developers.google.com/maps/documentation/javascript/3.exp/reference#Map
`panBy()`	`...args`	https://developers.google.com/maps/documentation/javascript/3.exp/reference#Map
`panTo()`	`...args`	https://developers.google.com/maps/documentation/javascript/3.exp/reference#Map
`panToBounds()`	`...args`	https://developers.google.com/maps/documentation/javascript/3.exp/reference#Map
`getBounds()`		Returns the lat/lng bounds of the current viewport. If more than one copy of the world is visible, the bounds range in longitude from -180 to 180 degrees inclusive. If the map is not yet initialized (i.e. the mapType is still null), or center and zoom have not been set then the result is `null` or `undefined`.
`getCenter()`		Returns the position displayed at the center of the map. Note that this `LatLng` object is not wrapped. See `[LatLng](#LatLng)` for more information.
`getClickableIcons()`		Returns the clickability of the map icons. A map icon represents a point of interest, also known as a POI. If the returned value is true, then the icons are clickable on the map.
`getDiv()`
`getHeading()`		Returns the compass heading of aerial imagery. The heading value is measured in degrees (clockwise) from cardinal direction North.
`getMapTypeId()`
`getProjection()`		Returns the current `Projection`. If the map is not yet initialized (i.e. the mapType is still null) then the result is null. Listen to `projection_changed` and check its value to ensure it is not null.
`getStreetView()`		Returns the default `StreetViewPanorama` bound to the map, which may be a default panorama embedded within the map, or the panorama set using `setStreetView()`. Changes to the map's `streetViewControl` will be reflected in the display of such a bound panorama.
`getTilt()`		Returns the current angle of incidence of the map, in degrees from the viewport plane to the map plane. The result will be `0` for imagery taken directly overhead or `45` for 45° imagery. 45° imagery is only available for `satellite` and `hybrid` map types, within some locations, and at some zoom levels. Note: This method does not return the value set by `setTilt`. See `setTilt` for details.
`getZoom()`

Map with controlled zoom

Oops! Something went wrong.

This page didn't load Google Maps correctly. See the JavaScript console for technical details.

xxxxxxxxxx
 
const { compose, withProps, withState, withHandlers } = require("recompose");const FaAnchor = require("react-icons/lib/fa/anchor");const {  withScriptjs,  withGoogleMap,  GoogleMap,  Marker,  InfoWindow,} = require("react-google-maps");​const MapWithControlledZoom = compose(  withProps({    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places",    loadingElement: <div style={{ height: `100%` }} />,    containerElement: <div style={{ height: `400px` }} />,    mapElement: <div style={{ height: `100%` }} />,  }),  withState('zoom', 'onZoomChange', 8),  withHandlers(() => {    const refs = {      map: undefined,    }​    return {      onMapMounted: () => ref => {        refs.map = ref      },      onZoomChanged: ({ onZoomChange }) => () => {        onZoomChange(refs.map.getZoom())      }    }  }),  withScriptjs,  withGoogleMap)(props =>  <GoogleMap    defaultCenter={{ lat: -34.397, lng: 150.644 }}    zoom={props.zoom}    ref={props.onMapMounted}    onZoomChanged={props.onZoomChanged}  >    <Marker      position={{ lat: -34.397, lng: 150.644 }}      onClick={props.onToggleOpen}    >      <InfoWindow onCloseClick={props.onToggleOpen}>        <div>          <FaAnchor />          {" "}          Controlled zoom: {props.zoom}        </div>      </InfoWindow>    </Marker>  </GoogleMap>);​<MapWithControlledZoom />

GroundOverlay

import { GroundOverlay } from "react-google-maps";

A wrapper around google.maps.GroundOverlay

https://developers.google.com/maps/documentation/javascript/reference#GroundOverlay

Prop name	Type	Description
`defaultUrl`	`string`
`defaultBounds`	`object`	https://developers.google.com/maps/documentation/javascript/reference#GroundOverlay
`url`	`string`
`bounds`	`object`	Deprecated: use `defaultBounds` instead. It will be removed in v10.0.0 https://developers.google.com/maps/documentation/javascript/reference#GroundOverlay
`defaultOpacity`	`number`
`opacity`	`number`
`onDblClick`	`func`	function
`onClick`	`func`	function

Method name	Parameters	Description
`getBounds()`		Gets the `LatLngBounds` of this overlay.
`getOpacity()`		Returns the opacity of this ground overlay.
`getUrl()`		Gets the url of the projected image.

Map with Ground Overlay

Oops! Something went wrong.

This page didn't load Google Maps correctly. See the JavaScript console for technical details.

xxxxxxxxxx
 
const { compose } = require("recompose");const {  withScriptjs,  withGoogleMap,  GoogleMap,  GroundOverlay,} = require("react-google-maps");​const MapWithGroundOverlay = compose(  withScriptjs,  withGoogleMap)(props =>  <GoogleMap    defaultZoom={12}    defaultCenter={{lat: 40.740, lng: -74.18}}  >    <GroundOverlay      defaultUrl="https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg"      defaultBounds={new google.maps.LatLngBounds(        new google.maps.LatLng(40.712216, -74.22655),        new google.maps.LatLng(40.773941, -74.12544)      )}      defaultOpacity={.5}    />  </GoogleMap>);​<MapWithGroundOverlay  googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places"  loadingElement={<div style={{ height: `100%` }} />}  containerElement={<div style={{ height: `400px` }} />}  mapElement={<div style={{ height: `100%` }} />}/>

InfoWindow

import { InfoWindow } from "react-google-maps";

A wrapper around google.maps.InfoWindow

https://developers.google.com/maps/documentation/javascript/3.exp/reference#InfoWindow

Prop name	Type	Description
`defaultOptions`	`any`
`defaultPosition`	`any`
`defaultZIndex`	`number`
`options`	`any`
`position`	`any`
`zIndex`	`number`
`onCloseClick`	`func`	function
`onDomReady`	`func`	function
`onContentChanged`	`func`	function
`onPositionChanged`	`func`	function
`onZindexChanged`	`func`	function

Method name	Parameters	Description
`getPosition()`
`getZIndex()`

Click the Marker to show InfoWindow

Oops! Something went wrong.

This page didn't load Google Maps correctly. See the JavaScript console for technical details.

xxxxxxxxxx
 
const { compose, withProps, withStateHandlers } = require("recompose");const FaAnchor = require("react-icons/lib/fa/anchor");const {  withScriptjs,  withGoogleMap,  GoogleMap,  Marker,  InfoWindow,} = require("react-google-maps");​const MapWithAMakredInfoWindow = compose(  withStateHandlers(() => ({    isOpen: false,  }), {    onToggleOpen: ({ isOpen }) => () => ({      isOpen: !isOpen,    })  }),  withScriptjs,  withGoogleMap)(props =>  <GoogleMap    defaultZoom={8}    defaultCenter={{ lat: -34.397, lng: 150.644 }}  >    <Marker      position={{ lat: -34.397, lng: 150.644 }}      onClick={props.onToggleOpen}    >      {props.isOpen && <InfoWindow onCloseClick={props.onToggleOpen}>        <FaAnchor />      </InfoWindow>}    </Marker>  </GoogleMap>);​<MapWithAMakredInfoWindow  googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places"  loadingElement={<div style={{ height: `100%` }} />}  containerElement={<div style={{ height: `400px` }} />}  mapElement={<div style={{ height: `100%` }} />}/>

KmlLayer

import { KmlLayer } from "react-google-maps";

A wrapper around google.maps.KmlLayer

https://developers.google.com/maps/documentation/javascript/3.exp/reference#KmlLayer

Prop name	Type	Description
`defaultOptions`	`any`
`defaultUrl`	`string`
`defaultZIndex`	`number`
`options`	`any`
`url`	`string`
`zIndex`	`number`
`onDefaultViewportChanged`	`func`	function
`onClick`	`func`	function
`onStatusChanged`	`func`	function

Method name	Parameters	Description
`getDefaultViewport()`		Get the default viewport for the layer being displayed.
`getMetadata()`		Get the metadata associated with this layer, as specified in the layer markup.
`getStatus()`		Get the status of the layer, set once the requested document has loaded.
`getUrl()`		Gets the URL of the KML file being displayed.
`getZIndex()`		Gets the z-index of the KML Layer.

Map with a KmlLayer

Oops! Something went wrong.

This page didn't load Google Maps correctly. See the JavaScript console for technical details.

xxxxxxxxxx
 
const { compose, withProps } = require("recompose");const {  withScriptjs,  withGoogleMap,  GoogleMap,  KmlLayer,} = require("react-google-maps");​const MapWithAKmlLayer = compose(  withProps({    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places",    loadingElement: <div style={{ height: `100%` }} />,    containerElement: <div style={{ height: `400px` }} />,    mapElement: <div style={{ height: `100%` }} />,  }),  withScriptjs,  withGoogleMap)(props =>  <GoogleMap    defaultZoom={9}    defaultCenter={{ lat: 41.9, lng: -87.624 }}  >    <KmlLayer      url="http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml"      options={{ preserveViewport: true }}    />  </GoogleMap>);​<MapWithAKmlLayer />

Marker

import { Marker } from "react-google-maps";

A wrapper around google.maps.Marker

https://developers.google.com/maps/documentation/javascript/3.exp/reference#Marker

Prop name	Type	Description
`noRedraw`	`bool`	For the 2nd argument of `MarkerCluster#addMarker` https://github.com/mikesaidani/marker-clusterer-plus
`defaultAnimation`	`any`
`defaultClickable`	`bool`
`defaultCursor`	`string`
`defaultDraggable`	`bool`
`defaultIcon`	`any`
`defaultLabel`	`any`
`defaultOpacity`	`number`
`defaultOptions`	`any`
`defaultPlace`	`any`
`defaultPosition`	`any`
`defaultShape`	`any`
`defaultTitle`	`string`
`defaultVisible`	`bool`
`defaultZIndex`	`number`
`animation`	`any`
`clickable`	`bool`
`cursor`	`string`
`draggable`	`bool`
`icon`	`any`
`label`	`any`
`opacity`	`number`
`options`	`any`
`place`	`any`
`position`	`any`
`shape`	`any`
`title`	`string`
`visible`	`bool`
`zIndex`	`number`
`onDblClick`	`func`	function
`onDragEnd`	`func`	function
`onDragStart`	`func`	function
`onMouseDown`	`func`	function
`onMouseOut`	`func`	function
`onMouseOver`	`func`	function
`onMouseUp`	`func`	function
`onRightClick`	`func`	function
`onAnimationChanged`	`func`	function
`onClick`	`func`	function
`onClickableChanged`	`func`	function
`onCursorChanged`	`func`	function
`onDrag`	`func`	function
`onDraggableChanged`	`func`	function
`onFlatChanged`	`func`	function
`onIconChanged`	`func`	function
`onPositionChanged`	`func`	function
`onShapeChanged`	`func`	function
`onTitleChanged`	`func`	function
`onVisibleChanged`	`func`	function
`onZindexChanged`	`func`	function

Method name	Parameters	Description
`getAnimation()`
`getClickable()`
`getCursor()`
`getDraggable()`
`getIcon()`
`getLabel()`
`getOpacity()`
`getPlace()`
`getPosition()`
`getShape()`
`getTitle()`
`getVisible()`
`getZIndex()`

Map with a Marker

Oops! Something went wrong.

This page didn't load Google Maps correctly. See the JavaScript console for technical details.

xxxxxxxxxx
 
const { compose } = require("recompose");const {  withScriptjs,  withGoogleMap,  GoogleMap,  Marker,} = require("react-google-maps");​const MapWithAMarker = compose(  withScriptjs,  withGoogleMap)(props =>  <GoogleMap    defaultZoom={8}    defaultCenter={{ lat: -34.397, lng: 150.644 }}  >    <Marker      position={{ lat: -34.397, lng: 150.644 }}    />  </GoogleMap>);​<MapWithAMarker  googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places"  loadingElement={<div style={{ height: `100%` }} />}  containerElement={<div style={{ height: `400px` }} />}  mapElement={<div style={{ height: `100%` }} />}/>

OverlayView

import { OverlayView } from "react-google-maps";

A wrapper around google.maps.OverlayView

https://developers.google.com/maps/documentation/javascript/3.exp/reference#OverlayView

Prop name	Type	Default	Description
`mapPaneName`	`string`		https://developers.google.com/maps/documentation/javascript/3.exp/reference#OverlayView
`position`	`object`		https://developers.google.com/maps/documentation/javascript/3.exp/reference#OverlayView
`bounds`	`object`		https://developers.google.com/maps/documentation/javascript/3.exp/reference#OverlayView
`children`	`node`	Required	https://developers.google.com/maps/documentation/javascript/3.exp/reference#OverlayView
`getPixelPositionOffset`	`func`		https://developers.google.com/maps/documentation/javascript/3.exp/reference#OverlayView

Method name	Parameters	Description
`getPanes()`		Returns the panes in which this OverlayView can be rendered. The panes are not initialized until `onAdd` is called by the API.
`getProjection()`		Returns the `MapCanvasProjection` object associated with this `OverlayView`. The projection is not initialized until `onAdd` is called by the API.

Click the Marker to show OverlayView

Oops! Something went wrong.

This page didn't load Google Maps correctly. See the JavaScript console for technical details.

xxxxxxxxxx
 
const { compose, withProps, withStateHandlers } = require("recompose");const FaAnchor = require("react-icons/lib/fa/anchor");const {  withScriptjs,  withGoogleMap,  GoogleMap,  OverlayView,} = require("react-google-maps");​const getPixelPositionOffset = (width, height) => ({  x: -(width / 2),  y: -(height / 2),})​const MapWithAnOverlayView = compose(  withStateHandlers(() => ({    count: 0,  }), {    onClick: ({ count }) => () => ({      count: count + 1,    })  }),  withScriptjs,  withGoogleMap)(props =>  <GoogleMap    defaultZoom={8}    defaultCenter={{ lat: -34.397, lng: 150.644 }}  >    <OverlayView      position={{ lat: -34.397, lng: 150.644 }}      /*       * An alternative to specifying position is specifying bounds.       * bounds can either be an instance of google.maps.LatLngBounds       * or an object in the following format:       * bounds={{       *    ne: { lat: 62.400471, lng: -150.005608 },       *    sw: { lat: 62.281819, lng: -150.287132 }       * }}       */      /*       * 1. Specify the pane the OverlayView will be rendered to. For       *    mouse interactivity, use `OverlayView.OVERLAY_MOUSE_TARGET`.       *    Defaults to `OverlayView.OVERLAY_LAYER`.       */      mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}      /*       * 2. Tweak the OverlayView's pixel position. In this case, we're       *    centering the content.       */      getPixelPositionOffset={getPixelPositionOffset}      /*       * 3. Create OverlayView content using standard React components.       */    >      <div style={{ background: `white`, border: `1px solid #ccc`, padding: 15 }}>        <h1>OverlayView</h1>        <button onClick={props.onClick} style={{ height: 60 }}>          I have been clicked {props.count} time{props.count > 1 ? `s` : ``}        </button>      </div>    </OverlayView>  </GoogleMap>);​<MapWithAnOverlayView  googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places"  loadingElement={<div style={{ height: `100%` }} />}  containerElement={<div style={{ height: `400px` }} />}  mapElement={<div style={{ height: `100%` }} />}/>

import SearchBox from "react-google-maps/lib/components/places/SearchBox";

A wrapper around google.maps.places.SearchBox on the map

https://developers.google.com/maps/documentation/javascript/3.exp/reference#SearchBox

Prop name	Type	Description
`controlPosition`	`number`	Where to put `<SearchBox>` inside a `<GoogleMap>`
`defaultBounds`	`any`
`bounds`	`any`
`onPlacesChanged`	`func`	function

Method name	Parameters	Description
`getBounds()`		Returns the bounds to which query predictions are biased.
`getPlaces()`		Returns the query selected by the user, or `null` if no places have been found yet, to be used with `places_changed` event.

Map with a SearchBox

Oops! Something went wrong.

This page didn't load Google Maps correctly. See the JavaScript console for technical details.

xxxxxxxxxx
 
const _ = require("lodash");const { compose, withProps, lifecycle } = require("recompose");const {  withScriptjs,  withGoogleMap,  GoogleMap,  Marker,} = require("react-google-maps");const { SearchBox } = require("react-google-maps/lib/components/places/SearchBox");​const MapWithASearchBox = compose(  withProps({    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places",    loadingElement: <div style={{ height: `100%` }} />,    containerElement: <div style={{ height: `400px` }} />,    mapElement: <div style={{ height: `100%` }} />,  }),  lifecycle({    componentWillMount() {      const refs = {}​      this.setState({        bounds: null,        center: {          lat: 41.9, lng: -87.624        },        markers: [],        onMapMounted: ref => {          refs.map = ref;        },        onBoundsChanged: () => {          this.setState({            bounds: refs.map.getBounds(),            center: refs.map.getCenter(),          })        },        onSearchBoxMounted: ref => {          refs.searchBox = ref;        },        onPlacesChanged: () => {          const places = refs.searchBox.getPlaces();          const bounds = new google.maps.LatLngBounds();​          places.forEach(place => {            if (place.geometry.viewport) {              bounds.union(place.geometry.viewport)            } else {              bounds.extend(place.geometry.location)            }          });          const nextMarkers = places.map(place => ({            position: place.geometry.location,          }));          const nextCenter = _.get(nextMarkers, '0.position', this.state.center);​          this.setState({            center: nextCenter,            markers: nextMarkers,          });          // refs.map.fitBounds(bounds);        },      })    },  }),  withScriptjs,  withGoogleMap)(props =>  <GoogleMap    ref={props.onMapMounted}    defaultZoom={15}    center={props.center}    onBoundsChanged={props.onBoundsChanged}  >    <SearchBox      ref={props.onSearchBoxMounted}      bounds={props.bounds}      controlPosition={google.maps.ControlPosition.TOP_LEFT}      onPlacesChanged={props.onPlacesChanged}    >      <input        type="text"        placeholder="Customized your placeholder"        style={{          boxSizing: `border-box`,          border: `1px solid transparent`,          width: `240px`,          height: `32px`,          marginTop: `27px`,          padding: `0 12px`,          borderRadius: `3px`,          boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,          fontSize: `14px`,          outline: `none`,          textOverflow: `ellipses`,        }}      />    </SearchBox>    {props.markers.map((marker, index) =>      <Marker key={index} position={marker.position} />    )}  </GoogleMap>);​<MapWithASearchBox />

StandaloneSearchBox

import StandaloneSearchBox from "react-google-maps/lib/components/places/StandaloneSearchBox";

A wrapper around google.maps.places.SearchBox without the map

https://developers.google.com/maps/documentation/javascript/3.exp/reference#SearchBox

Prop name	Type	Description
`defaultBounds`	`any`
`bounds`	`any`
`onPlacesChanged`	`func`	function

Method name	Parameters	Description
`getBounds()`		Returns the bounds to which query predictions are biased.
`getPlaces()`		Returns the query selected by the user, or `null` if no places have been found yet, to be used with `places_changed` event.

Standalone SearchBox

xxxxxxxxxx
 
const { compose, withProps, lifecycle } = require("recompose");const {  withScriptjs,} = require("react-google-maps");const { StandaloneSearchBox } = require("react-google-maps/lib/components/places/StandaloneSearchBox");​const PlacesWithStandaloneSearchBox = compose(  withProps({    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places",    loadingElement: <div style={{ height: `100%` }} />,    containerElement: <div style={{ height: `400px` }} />,  }),  lifecycle({    componentWillMount() {      const refs = {}​      this.setState({        places: [],        onSearchBoxMounted: ref => {          refs.searchBox = ref;        },        onPlacesChanged: () => {          const places = refs.searchBox.getPlaces();​          this.setState({            places,          });        },      })    },  }),  withScriptjs  )(props =>  <div data-standalone-searchbox="">    <StandaloneSearchBox      ref={props.onSearchBoxMounted}      bounds={props.bounds}      onPlacesChanged={props.onPlacesChanged}    >      <input        type="text"        placeholder="Customized your placeholder"        style={{          boxSizing: `border-box`,          border: `1px solid transparent`,          width: `240px`,          height: `32px`,          padding: `0 12px`,          borderRadius: `3px`,          boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,          fontSize: `14px`,          outline: `none`,          textOverflow: `ellipses`,        }}      />    </StandaloneSearchBox>    <ol>      {props.places.map(({ place_id, formatted_address, geometry: { location } }) =>        <li key={place_id}>          {formatted_address}          {" at "}          ({location.lat()}, {location.lng()})        </li>      )}    </ol>  </div>);​<PlacesWithStandaloneSearchBox />

Polygon

import { Polygon } from "react-google-maps";

A wrapper around google.maps.Polygon

https://developers.google.com/maps/documentation/javascript/3.exp/reference#Polygon

Prop name	Type	Description
`defaultDraggable`	`bool`
`defaultEditable`	`bool`
`defaultOptions`	`any`
`defaultPath`	`any`
`defaultPaths`	`any`
`defaultVisible`	`bool`
`draggable`	`bool`
`editable`	`bool`
`options`	`any`
`path`	`any`
`paths`	`any`
`visible`	`bool`
`onDblClick`	`func`	function
`onDragEnd`	`func`	function
`onDragStart`	`func`	function
`onMouseDown`	`func`	function
`onMouseMove`	`func`	function
`onMouseOut`	`func`	function
`onMouseOver`	`func`	function
`onMouseUp`	`func`	function
`onRightClick`	`func`	function
`onClick`	`func`	function
`onDrag`	`func`	function

Method name	Parameters	Description
`getDraggable()`		Returns whether this shape can be dragged by the user.
`getEditable()`		Returns whether this shape can be edited by the user.
`getPath()`		Retrieves the first path.
`getPaths()`		Retrieves the paths for this polygon.
`getVisible()`		Returns whether this poly is visible on the map.

Polyline

import { Polyline } from "react-google-maps";

A wrapper around google.maps.Polyline

https://developers.google.com/maps/documentation/javascript/3.exp/reference#Polyline

Prop name	Type	Description
`defaultDraggable`	`bool`
`defaultEditable`	`bool`
`defaultOptions`	`any`
`defaultPath`	`any`
`defaultVisible`	`bool`
`draggable`	`bool`
`editable`	`bool`
`options`	`any`
`path`	`any`
`visible`	`bool`
`onDblClick`	`func`	function
`onDragEnd`	`func`	function
`onDragStart`	`func`	function
`onMouseDown`	`func`	function
`onMouseMove`	`func`	function
`onMouseOut`	`func`	function
`onMouseOver`	`func`	function
`onMouseUp`	`func`	function
`onRightClick`	`func`	function
`onClick`	`func`	function
`onDrag`	`func`	function

Method name	Parameters	Description
`getDraggable()`		Returns whether this shape can be dragged by the user.
`getEditable()`		Returns whether this shape can be edited by the user.
`getPath()`		Retrieves the path.
`getVisible()`		Returns whether this poly is visible on the map.

Rectangle

import { Rectangle } from "react-google-maps";

A wrapper around google.maps.Rectangle

https://developers.google.com/maps/documentation/javascript/3.exp/reference#Rectangle

Prop name	Type	Description
`defaultBounds`	`any`
`defaultDraggable`	`bool`
`defaultEditable`	`bool`
`defaultOptions`	`any`
`defaultVisible`	`bool`
`bounds`	`any`
`draggable`	`bool`
`editable`	`bool`
`options`	`any`
`visible`	`bool`
`onDblClick`	`func`	function
`onDragEnd`	`func`	function
`onDragStart`	`func`	function
`onMouseDown`	`func`	function
`onMouseMove`	`func`	function
`onMouseOut`	`func`	function
`onMouseOver`	`func`	function
`onMouseUp`	`func`	function
`onRightClick`	`func`	function
`onBoundsChanged`	`func`	function
`onClick`	`func`	function
`onDrag`	`func`	function

Method name	Parameters	Description
`getBounds()`		Returns the bounds of this rectangle.
`getDraggable()`		Returns whether this rectangle can be dragged by the user.
`getEditable()`		Returns whether this rectangle can be edited by the user.
`getVisible()`		Returns whether this rectangle is visible on the map.

StreetViewPanorama

import { StreetViewPanorama } from "react-google-maps";

A wrapper around google.maps.StreetViewPanorama

https://developers.google.com/maps/documentation/javascript/3.exp/reference#StreetViewPanorama

Prop name	Type	Description
`defaultLinks`	`any`
`defaultMotionTracking`	`bool`
`defaultOptions`	`any`
`defaultPano`	`string`
`defaultPosition`	`any`
`defaultPov`	`any`
`defaultVisible`	`bool`
`defaultZoom`	`number`
`links`	`any`
`motionTracking`	`bool`
`options`	`any`
`pano`	`string`
`position`	`any`
`pov`	`any`
`visible`	`bool`
`zoom`	`number`
`onCloseClick`	`func`	function
`onPanoChanged`	`func`	function
`onPositionChanged`	`func`	function
`onPovChanged`	`func`	function
`onResize`	`func`	function
`onStatusChanged`	`func`	function
`onVisibleChanged`	`func`	function
`onZoomChanged`	`func`	function

Method name	Parameters	Description
`getLinks()`		Returns the set of navigation links for the Street View panorama.
`getLocation()`		Returns the StreetViewLocation of the current panorama.
`getMotionTracking()`		Returns the state of motion tracker. If true when the user physically moves the device and the browser supports it, the Street View Panorama tracks the physical movements.
`getPano()`		Returns the current panorama ID for the Street View panorama. This id is stable within the browser's current session only.
`getPhotographerPov()`		Returns the heading and pitch of the photographer when this panorama was taken. For Street View panoramas on the road, this also reveals in which direction the car was travelling. This data is available after the `pano_changed` event.
`getPosition()`		Returns the current `LatLng` position for the Street View panorama.
`getPov()`		Returns the current point of view for the Street View panorama.
`getStatus()`		Returns the status of the panorama on completion of the `setPosition()` or `setPano()` request.
`getVisible()`		Returns `true` if the panorama is visible. It does not specify whether Street View imagery is available at the specified position.
`getZoom()`		Returns the zoom level of the panorama. Fully zoomed-out is level 0, where the field of view is 180 degrees. Zooming in increases the zoom level.

Click the Marker to show OverlayView

Oops! Something went wrong.

This page didn't load Google Maps correctly. See the JavaScript console for technical details.

xxxxxxxxxx
 
const { compose, withProps } = require("recompose");const FaAnchor = require("react-icons/lib/fa/anchor");const {  withScriptjs,  withGoogleMap,  GoogleMap,  StreetViewPanorama,  OverlayView,} = require("react-google-maps");​const getPixelPositionOffset = (width, height) => ({  x: -(width / 2),  y: -(height / 2),})​const StreetViewPanormaWithAnOverlayView = compose(  withProps({    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places",    loadingElement: <div style={{ height: `100%` }} />,    containerElement: <div style={{ height: `400px` }} />,    mapElement: <div style={{ height: `100%` }} />,    center: { lat: 49.2853171, lng: -123.1119202 },  }),  withScriptjs,  withGoogleMap)(props =>  <GoogleMap defaultZoom={8} defaultCenter={props.center}>    <StreetViewPanorama defaultPosition={props.center} visible>      <OverlayView        position={{ lat: 49.28590291211115, lng: -123.11248166065218 }}          mapPaneName={OverlayView.OVERLAY_LAYER}          getPixelPositionOffset={getPixelPositionOffset}      >        <div style={{ background: `red`, color: `white`, padding: 5, borderRadius: `50%` }}>          OverlayView        </div>      </OverlayView>    </StreetViewPanorama>  </GoogleMap>);​<StreetViewPanormaWithAnOverlayView />

TrafficLayer

import { TrafficLayer } from "react-google-maps";

A wrapper around google.maps.TrafficLayer

https://developers.google.com/maps/documentation/javascript/3.exp/reference#TrafficLayer

Prop name	Type	Default	Description
`defaultOptions`	`any`
`options`	`any`

Map with a TrafficLayer

Oops! Something went wrong.

This page didn't load Google Maps correctly. See the JavaScript console for technical details.

xxxxxxxxxx
 
const { compose, withProps } = require("recompose");const {  withScriptjs,  withGoogleMap,  GoogleMap,  TrafficLayer,} = require("react-google-maps");​const MapWithATrafficLayer = compose(  withProps({    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places",    loadingElement: <div style={{ height: `100%` }} />,    containerElement: <div style={{ height: `400px` }} />,    mapElement: <div style={{ height: `100%` }} />,  }),  withScriptjs,  withGoogleMap)(props =>  <GoogleMap    defaultZoom={8}    defaultCenter={{ lat: 41.9, lng: -87.624 }}  >    <TrafficLayer autoUpdate />  </GoogleMap>);​<MapWithATrafficLayer />

HeatmapLayer

import HeatmapLayer from "react-google-maps/lib/components/visualization/HeatmapLayer";

A wrapper around google.maps.visualization.HeatmapLayer

https://developers.google.com/maps/documentation/javascript/3.exp/reference#HeatmapLayer

Prop name	Type	Default	Description
`defaultData`	`any`
`defaultOptions`	`any`
`data`	`any`
`options`	`any`

Method name	Parameters	Description
`getData()`		Returns the data points currently displayed by this heatmap.

Step 1

Step 2

Step 3

Step 4

Step 5

Props

Usage

Props

Usage

Styled Map with an InfoBox

Map with a MarkerClusterer

Map with a MarkerWithLabel

Map with a BicyclingLayer

Map with a DirectionsRenderer

Map with a DrawingManager

Map with a FusionTablesLayer

Map with controlled zoom

Map with Ground Overlay

Click the Marker to show InfoWindow

Map with a KmlLayer

Map with a Marker

Click the Marker to show OverlayView

Map with a SearchBox

Standalone SearchBox

Click the Marker to show OverlayView

Map with a TrafficLayer

React Google Maps Style Guide