Change Log

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

9.4.5 (2018-01-05)

Bug Fixes

types: fix OverlayView type definition (6955d01)

9.4.4 (2018-01-04)

9.4.3 (2017-12-14)

Bug Fixes

places/SearchBox: undefined child at unmount (0c8e943)

9.4.2 (2017-12-06)

Bug Fixes

package.json: move eslint to devDependencies (#715) (bab1481)

9.4.1 (2017-11-26)

Bug Fixes

addons/InfoBox: named require from google-maps-infobox module (6fc7841), closes #711

9.4.0 (2017-11-25)

Bug Fixes

types/index.d.ts: draggable property type (#710) (7a29420)

Features

StandaloneSearchBox: accept wrapped input (#709) (55a2f55)

9.3.0 (2017-11-24)

Bug Fixes

package.json: files including src/ (9b18f8d)

Features

package.json: add TypeScript definitions. (#646) (072b4c7), closes #363

9.2.3 (2017-11-24)

Bug Fixes

addons/MarkerClusterer: add missed cluster class binding (#706) (f008c2c)
InfoWindow: do not remove container element on mount (ed764c6), closes #696

9.2.2 (2017-11-03)

Bug Fixes

InfoWindow: use ReactDOM.createPortal in React@^16 (6a61f2c), closes #691

9.2.1 (2017-10-27)

Bug Fixes

addons/InfoBox: don't open again on update (72cb16f), closes #682
InfoWindow: don't open again on update (98a9c1f), closes #670

9.2.0 (2017-10-26)

Features

places/SearchBox: allow other elements around SearchBox input (238a352)

9.1.0 (2017-10-26)

Features

package.json: support react@^16.0.0 (963716d), closes #677 #640
package.json: upgrade to recompose@^0.26.0 (ebb9be8)
places/SearchBox: support react@^16.0.0 (94931ae), closes #640 #656

9.0.3 (2017-10-26)

Bug Fixes

MarkerClusterer: correct native doc link (f36efa6)

9.0.2 (2017-10-23)

9.0.1 (2017-10-17)

Bug Fixes

GroundOveray: use defaultUrl and defaultBounds instead (349b620)

9.0.0 (2017-10-16)

Bug Fixes

Marker: remove buggy MarkerWithLabel support (b3985f4)

Features

addons/MarkerWithLabel: separate from Marker (3f7670f), closes #595 #604
package.json: add markerwithlabel to dependencies (b4fe224)

BREAKING CHANGES

Marker: MarkerWithLabel comes with its own React Component now

Before:

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

<Marker
  position={{ lat: -34.397, lng: 150.644 }}
  labelAnchor={new google.maps.Point(0, 0)}
  labelContent="<div>Hello There!</div>"
  labelStyle={{/* WON'T WORK */}}
/>

After:

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

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

8.5.0 (2017-10-12)

Features

GoogleMap: Add defaultExtraMapTypes (6ee4734)

8.4.2 (2017-10-11)

Bug Fixes

withGoogleMap: make compatible with recompose@^0.26 (450e1a8), closes #659
withScriptjs: make compatible with recompose@^0.26 (20f91af), closes #659

8.4.1 (2017-10-11)

Bug Fixes

OverlayView: typo of FLOAT_PANE (0eac8c8), closes #658

8.4.0 (2017-10-10)

Features

BicyclingLayer: Add new component for Google Maps BicyclingLayer (26ce879)

8.3.5 (2017-10-06)

8.3.4 (2017-10-03)

8.3.3 (2017-10-02)

8.3.2 (2017-09-30)

Bug Fixes

package.json: include src/ in files (afdfa6d)

8.3.1 (2017-09-29)

8.3.0 (2017-09-21)

Features

GroundOverlay: add GroundOverlay component (d76a455)

8.2.0 (2017-09-16)

Bug Fixes

addons/InfoBox: use setState in lifecycle (fb6658e)
places/SearchBox: use setState in lifecycle (671089b)

Features

places/StandaloneSearchBox: add component (51a1da5), closes #618 #601 #593

8.1.0 (2017-09-15)

Bug Fixes

addons/InfoBox: add default export (f40b496), closes #610 #611
addons/MarkerClusterer: add default export (87bc259), closes #610 #611

Features

withGoogleMap: add named export (8e7e5de)
withScriptjs: add named export (134f90c)

8.0.0 (2017-09-14)

Bug Fixes

package.json: relax peerDependencies (#596) (6f1c88d)

Features

addons/InfoBox: revamp to PureComponent (95269d2)
addons/MarkerClusterer: revamp to PureComponent (13cbef2)
Circle: revamp with jscodeshift (c2c98ab)
DirectionsRenderer: revamp with jscodeshift (7c5532a)
drawing/DrawingManager: revamp with jscodeshift (01bfb80)
FusionTablesLayer: revamp with jscodeshift (a5865a0)
GoogleMap: revamp with jscodeshift (772f363)
index.js: export withScriptjs (4a1c34e)
KmlLayer: revamp with jscodeshift (18b8a9f)
Marker: revamp with jscodeshift (08c5687)
OverlayView: revamp with jscodeshift (8c66c14)
package.json: add recompose to dependencies (f433a50)
package.json: remove create-react-class from dependencies (ea41411)
places/SearchBox: revamp with jscodeshift (bc41752)
Polygon: revamp with jscodeshift (a015b95)
Polyline: revamp with jscodeshift (2ff6313)
Rectangle: revamp with jscodeshift (5096882)
StreetViewPanorama: revamp with jscodeshift (a0e6dd4)
TrafficLayer: revamp with jscodeshift (92159bd)
tx: add MapChild transform with jscodeshift (b63d9ee)
visualization/HeatmapLayer: revamp with jscodeshift (b92a570)
withGoogleMap: revamp with prettier (c3de3b3)
withScriptjs: revamp with prettier (8f3b484)

BREAKING CHANGES

places/SearchBox: input element can now render directly as the only child

Before:

<SearchBox
  inputPlaceholder="Customized your placeholder"
  inputStyle={{ padding: `0 12px`, fontSize: `14px`, outline: `none` }}
/>

After:

<SearchBox>
  <input
    type="text"
    placeholder="Customized your placeholder"
    style={{
      padding: `0 12px`,
      fontSize: `14px`,
      outline: `none`,
    }}
  />
</SearchBox>

7.3.0 (2017-09-06)

Bug Fixes

enhanceElement: handle undefined callbacks gracefully (e463df3)
fusiontable: add query param (b0c637f)
withScriptsJs: Fix comment clarity (74b0ba3)

Features

marker: add custom label support (8e06dd5)

7.2.0 (2017-07-18)

Features

MarkerClusterer: add batchSize option (#544) (ff6b14b)

7.1.0 (2017-07-06)

Features

StreetViewPanorama: add OverlayView to example (7bd8c76)
StreetViewPanorama: add StreetViewPanorama component (e75c936)
StreetViewPanorama: fix deprecation warnings (d80cfe5)
StreetViewPanorama: fix OverlayViewHelper (ab513a5)
StreetViewPanorama: Fix standalone rendering and rename prop (39373d9)
StreetViewPanorama: remove log, cosmetics (4127f7e)
StreetViewPanorama: update context for children (eb86d7e)

7.0.0 (2017-04-21)

Code Refactoring

index.js: remove HeatmapLayer export (a05e5cb)

Features

package.json: add "create-react-class" and "prop-types" to dependencies (cb2cbff)
migrate to "create-react-class" package (d54cc95), closes #463
migrate to "prop-types" package (129b6e2), closes #463
migrate to implicit default import for React (f094f1b)
package.json: upgrade to ^15.5.4 of react / react-dom in peerDependencies (d62059e)

BREAKING CHANGES

index.js: remove top-level HeatmapLayer export

Before:

import { HeatmapLayer } from "react-google-maps"

After:

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

package.json: upgrade to ^15.5.4 of react / react-dom in peerDependencies

For react < 15.5.0, use react-google-maps < 7.0.0 instead.

6.3.0 (2017-04-20)

Bug Fixes

InfoWindow: long content jank issue (54ffccc), closes #449 #444 #408

Features

Marker: prevent Marker from redrawing under clusters (7849f28), closes #397

6.2.0 (2017-04-20)

Features

FusionTablesLayer: add component (1d8e478), closes #370
KmlLayer: add options to props (2968efc), closes #428 #406
TrafficLayer: add component (d419fc9), closes #417

6.1.0 (2017-04-20)

Features

visualization/HeatmapLayer: move to visualization namespace (20ea7c3)

6.0.3 (2017-04-20)

Bug Fixes

HeatmapLayer: HeatmapLayer constructor fix (#376) (24b140d)

6.0.2 (2017-04-20)

Bug Fixes

addons/InfoBox: Unmounting an InfoBox should remove all listeners. (#412) (ad4f0ee)

6.0.1 (2016-10-14)

Bug Fixes

addons/InfoBox: allow children to receive React's context (bed461c), closes #258
addons/InfoBox: allow children to receive React's context (5748a96)
InfoWindow: allow children to receive React's context (ca73c85)
package.json: devDependencies of eslint-config-react-app (e8e3eed)

6.0.0 (2016-10-04)

Code Refactoring

addons/InfoBox: rewrite with enhanceElement and cleaner interfaces (06f2e9b)
addons/MarkerClusterer: rewrite with enhanceElement and cleaner interfaces (f1032f4)
Circle: rewrite with enhanceElement and cleaner interfaces (da0ebc2)
drawing/DrawingManager: rewrite with enhanceElement and cleaner interfaces (1b6a937)
DrawingManager: move to drawing/DrawingManager (3226508)
GoogleMap: rewrite with enhanceElement and cleaner interfaces (4b22e42)
InfoWindow: rewrite with enhanceElement and cleaner interfaces (fc1c25c)
KmlLayer: rewrite with enhanceElement and cleaner interfaces (2479b88)
Marker: rewrite with enhanceElement and cleaner interfaces (c06aff2)
OverlayView: rewrite with enhanceElement and cleaner interfaces (7d28f2f)
places/SearchBox: rewrite with enhanceElement and cleaner interfaces (bc97f61)
Polygon: rewrite with enhanceElement and cleaner interfaces (1e20d70)
Polyline: rewrite with enhanceElement and cleaner interfaces (5603319)
Rectangle: rewrite with enhanceElement and cleaner interfaces (ea39062)
SearchBox: move to places/SearchBox (cf5a1cb)

Features

async/withScriptjs: provide HOC for loading googleMapURL with scriptjs (14d9273)
enhanceElement: utility for generating Google Maps Components (2656569)
package.json: add "react-display-name" to dependencies (2df62c7)
withGoogleMap: provide HOC for initialize google.maps.Map instance (f61724c)

BREAKING CHANGES

addons/InfoBox: Naming convention for event handlers has tweaked to follow React's convention.

Before:

<InfoBox
  onCloseclick={_.noop}
  onDomready={_.noop}
  onZindexChanged={_.noop}
/>

After:

<InfoBox
  onCloseClick={_.noop}
  onDomReady={_.noop}
  onZIndexChanged={_.noop}
/>

withGoogleMap: Wrap all react-google-maps components inside withGoogleMap HOC.

Before:

// v5.0.0
<GoogleMapLoader
  containerElement={
    <div
      {...this.props}
      style={{
        height: "100%",
      }}
    />
  }
  googleMapElement={
    <GoogleMap
      ref={(map) => console.log(map)}
      defaultZoom={3}
      defaultCenter={{lat: -25.363882, lng: 131.044922}}
      onClick={::this.handleMapClick}>
      {this.state.markers.map((marker, index) => {
        return (
          <Marker
            {...marker}
            onRightclick={this.handleMarkerRightclick.bind(this, index)} />
        );
      })}
    </GoogleMap>
  }
/>
// or v4.0.0
<GoogleMap containerProps={{
    ...this.props,
    style: {
      height: "100%",
    },
  }}
  ref="map"
  defaultZoom={3}
  defaultCenter={{lat: -25.363882, lng: 131.044922}}
  onClick={::this.handleMapClick}>
  {this.state.markers.map((marker, index) => {
    return (
      <Marker
        {...marker}
        onRightclick={this.handleMarkerRightclick.bind(this, index)} />
    );
  })}
</GoogleMap>

After:

// Wrap all `react-google-maps` components with `withGoogleMap` HOC
// and name it GettingStartedGoogleMap
const GettingStartedGoogleMap = withGoogleMap(props => (
  <GoogleMap
    ref={props.onMapLoad}
    defaultZoom={3}
    defaultCenter={{ lat: -25.363882, lng: 131.044922 }}
    onClick={props.onMapClick}
  >
    {props.markers.map((marker, index) => (
      <Marker
        {...marker}
        onRightClick={() => props.onMarkerRightClick(index)}
      />
    ))}
  </GoogleMap>
));
// Then, render it:
render(
  <GettingStartedGoogleMap
    containerElement={
      <div style={{ height: `100%` }} />
    }
    mapElement={
      <div style={{ height: `100%` }} />
    }
    onMapLoad={_.noop}
    onMapClick={_.noop}
    markers={markers}
    onMarkerRightClick={_.noop}
  />,
  document.getElementById('root')
);

places/SearchBox: Input props are now under inputProps.

This will get passed in directly into the underlying <input> component. You can also override it with inputStyle, inputClassName and inputPlaceholder.

Before:

<SearchBox
  placeholder="Customized your placeholder"
  style={INPUT_STYLE}
/>

After:

<SearchBox
  inputPlaceholder="Customized your placeholder"
  inputStyle={INPUT_STYLE}
/>

SearchBox: move SearchBox to places/SearchBox
drawing/DrawingManager: Naming convention for event handlers has tweaked to follow React's convention.

Before:

<DrawingManager
  onCirclecomplete={_.noop}
  onOverlaycomplete={_.noop}
/>

After:

<DrawingManager
  onCircleComplete={_.noop}
  onOverlayComplete={_.noop}
/>

DrawingManager: move DrawingManager to drawing/DrawingManager
OverlayView: OverlayView can no longer be rendered under MarkerClusterer
InfoWindow: Naming convention for event handlers has tweaked to follow React's convention.

Before:

<InfoWindow
  onCloseclick={_.noop}
  onDomready={_.noop}
  onZindexChanged={_.noop}
/>

After:

<InfoWindow
  onCloseClick={_.noop}
  onDomReady={_.noop}
  onZIndexChanged={_.noop}
/>

addons/MarkerClusterer: Naming convention for event handlers has tweaked to follow React's convention.

Before:

<MarkerClusterer
  onClusteringbegin={_.noop}
  onMouseout={_.noop}
/>

After:

<MarkerClusterer
  onClusteringBegin={_.noop}
  onMouseOut={_.noop}
/>

Circle: Naming convention for event handlers has tweaked to follow React's convention.

Before:

<Circle
  onClick={_.noop}
  onRightclick={_.noop}
  onDragstart={_.noop}
/>

After:

<Circle
  onClick={_.noop}
  onRightClick={_.noop}
  onDragStart={_.noop}
/>

Polygon: Naming convention for event handlers has tweaked to follow React's convention.

Before:

<Polygon
  onClick={_.noop}
  onRightclick={_.noop}
  onDragstart={_.noop}
/>

After:

<Polygon
  onClick={_.noop}
  onRightClick={_.noop}
  onDragStart={_.noop}
/>

Polyline: Naming convention for event handlers has tweaked to follow React's convention.

Before:

<Polyline
  onClick={_.noop}
  onRightclick={_.noop}
  onDragstart={_.noop}
/>

After:

<Polyline
  onClick={_.noop}
  onRightClick={_.noop}
  onDragStart={_.noop}
/>

Rectangle: Naming convention for event handlers has tweaked to follow React's convention.

Before:

<Rectangle
  onClick={_.noop}
  onRightclick={_.noop}
  onDragstart={_.noop}
/>

After:

<Rectangle
  onClick={_.noop}
  onRightClick={_.noop}
  onDragStart={_.noop}
/>

Marker: Naming convention for event handlers has tweaked to follow React's convention.

Before:

<Marker
  onClick={_.noop}
  onRightclick={_.noop}
  onDragstart={_.noop}
/>

After:

<Marker
  onClick={_.noop}
  onRightClick={_.noop}
  onDragStart={_.noop}
/>

GoogleMap: Naming convention for event handlers has tweaked to follow React's convention.

Before:

<GoogleMap
  onClick={_.noop}
  onRightclick={_.noop}
  onDragstart={_.noop}
/>

After:

<GoogleMap
  onClick={_.noop}
  onRightClick={_.noop}
  onDragStart={_.noop}
/>

async/withScriptjs: Apply withScriptjs HOC before withGoogleMaps HOC.

Before:

<ScriptjsLoader
  hostname={"maps.googleapis.com"}
  pathname={"/maps/api/js"}
  query={{v: `3.${ AsyncGettingStarted.version }`, libraries: "geometry,drawing,places"}}
  loadingElement={
    <div {...this.props} style={{ height: "100%" }}>
      <FaSpinner />
    </div>
  }
  containerElement={
    <div {...this.props} style={{ height: "100%" }} />
  }
  googleMapElement={
    <GoogleMap
      ref={googleMap => {
        googleMap && console.log(`Zoom: ${ googleMap.getZoom() }`);
      }}
      defaultZoom={3}
      defaultCenter={{lat: -25.363882, lng: 131.044922}}
      onClick={::this.handleMapClick}
    >
      <Marker
        {...this.state.marker}
        onRightclick={this.handleMarkerRightclick}
      />
    </GoogleMap>
  }
/>

After:

// Wrap all `react-google-maps` components with `withGoogleMap` HOC
// then wraps it into `withScriptjs` HOC
// It loads Google Maps JavaScript API v3 for you asynchronously.
// Name the component AsyncGettingStartedExampleGoogleMap
const AsyncGettingStartedExampleGoogleMap = withScriptjs(
  withGoogleMap(
    props => (
    <GoogleMap
      ref={props.onMapLoad}
      defaultZoom={3}
      defaultCenter={{ lat: -25.363882, lng: 131.044922 }}
      onClick={props.onMapClick}
    >
      {props.markers.map(marker => (
        <Marker
          {...marker}
          onRightClick={() => props.onMarkerRightClick(marker)}
        />
      ))}
    </GoogleMap>
  )
);
// Then, render it:
render(
  <GettingStartedGoogleMap
    googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp"
    loadingElement={
      <div style={{ height: `100%` }}>
        <FaSpinner
          style={{
            display: `block`,
            width: `80px`,
            height: `80px`,
            margin: `150px auto`,
            animation: `fa-spin 2s infinite linear`,
          }}
        />
      </div>
    }
    containerElement={
      <div style={{ height: `100%` }} />
    }
    mapElement={
      <div style={{ height: `100%` }} />
    }
    onMapLoad={_.noop}
    onMapClick={_.noop}
    markers={markers}
    onMarkerRightClick={_.noop}
  />,
  document.getElementById('root')
);

KmlLayer: Naming convention for event handlers has tweaked to follow React's convention.

Before:

<KmlLayer
  onClick={_.noop}
  onDefaultviewportChanged={_.noop}
  onStatusChanged={_.noop}
/>

After:

<KmlLayer
  onClick={_.noop}
  onDefaultViewportChanged={_.noop}
  onStatusChanged={_.noop}
/>

5.1.1 (2016-10-04)

Bug Fixes

OverlayView: fixed bug in OverlayView when nested in MarkerClusterer (#302) (1c5e933), closes #301
ScriptjsLoader: Fix setState warning (#307) (999fd89)

5.1.0 (2016-09-30)

Features

HeatmapLayer: add HeatmapLayer component (#248) (2863cdd)

5.0.0 (2016-08-04)

Bug Fixes

src: eslint errors (f2b242a)

Features

.babelrc: add transform-runtime and lodash to plugins (5db33f9)
GoogleMap: remove deprecated props and behaviour (cf5b8f1)
GoogleMapLoader: switch to new behaviour (7e40269)
package.json: add babel-runtime and lodash to dependencies (5e37d3c)
package.json: upgrade devDependencies (47a400c)
src: switch to use lodash directly (304f465)

Performance Improvements

src: switch mapHolderRef from props to context (c2d265c), closes #135 #210 #216

BREAKING CHANGES

GoogleMap: You need to use GoogleMapLoader with props.googleMapElement={<GoogleMap />} now.

Before:

<GoogleMap containerProps={{
    ...this.props,
    style: {
      height: "100%",
    },
  }}
  ref="map"
  defaultZoom={3}
  defaultCenter={{lat: -25.363882, lng: 131.044922}}
  onClick={::this.handleMapClick}>
  {this.state.markers.map((marker, index) => {
    return (
      <Marker
        {...marker}
        onRightclick={this.handleMarkerRightclick.bind(this, index)} />
    );
  })}
</GoogleMap>

After:

<GoogleMapLoader
  containerElement={
    <div
      {...this.props}
      style={{
        height: "100%",
      }}
    />
  }
  googleMapElement={
    <GoogleMap
      ref={(map) => console.log(map)}
      defaultZoom={3}
      defaultCenter={{lat: -25.363882, lng: 131.044922}}
      onClick={::this.handleMapClick}>
      {this.state.markers.map((marker, index) => {
        return (
          <Marker
            {...marker}
            onRightclick={this.handleMarkerRightclick.bind(this, index)} />
        );
      })}
    </GoogleMap>
  }
/>

src: If you're just using the library and didn't make custom components before, feel free to ignore this implementation changes.

Now, mapHolderRef for each component are now passed in via context. This doesn't affect all components interface in general. But if you do custom components before and relies on the implementation of react-google-maps, you should be aware of this and make some changes.

4.11.0 (2016-05-29)

Features

OverlayView: allow rendered as children of MarkerCluster (435961a), closes #187

4.10.3 (2016-05-29)

Bug Fixes

GoogleMapLoader: handle unmount ref case (334c5c9)

4.10.2 (2016-05-29)

Features

package.json: upgrade to "marker-clusterer-plus@^2.1.4" (c1d322a)

4.10.1 (2016-04-27)

Bug Fixes

package.json: update to "react-prop-types-element-of-type@^2.1.0" (0f27ed3)

4.10.0 (2016-04-26)

Features

package.json: update to react@^15.0.0 (4a85cf6), closes #243

4.9.1 (2016-02-21)

Bug Fixes

componentLifecycleDecorator: revert to componentWillReceiveProps (105dc6b)

4.9.0 (2016-02-21)

Bug Fixes

componentLifecycleDecorator: change componentDidUpdate to componentWillReceiveProps (b42b58e)

Features

OverlayView: add props.bounds support (dcdfefa), closes #205 #206

4.8.2 (2016-02-21)

Bug Fixes

componentLifecycleDecorator: check _unregisterEvents before calling (cd2667c), closes #117

4.8.1 (2016-02-20)

Bug Fixes

MarkerClusterer: typo method name of getAverageCenter (4f2ad76), closes #203 #204

4.8.0 (2016-02-20)

Features

KmlLayer: add new KmlLayer component (746af8d)

4.7.2 (2016-01-07)

Bug Fixes

OverlayViewCreator: position container after render (f5b0a4c), closes #167

4.7.1 (2015-12-30)

Bug Fixes

utils: should use contentElement (76abbfc)

4.7.0 (2015-12-07)

Features

utils: add triggerEvent api (112a1e6), closes #161

4.6.2 (2015-12-07)

Features

SearchBox: add placeholder props to the underlying input element (e6a6a02), closes #115 #136

4.6.1 (2015-12-03)

Features

GoogleMap: add warning for undefined google object (2e0c60b), closes #142

4.6.0 (2015-11-22)

Features

GoogleMapLoader: introduce loader to manage React elements (532816a), closes #141 #133
ScriptjsLoader: new behavior will render GoogleMapLoader instead (0f100d8)

BREAKING CHANGES

ScriptjsLoader: ScriptjsLoader will delegate to GoogleMapLoader when the script is loaded

Before:

<ScriptjsLoader
  hostname={"maps.googleapis.com"}
  pathname={"/maps/api/js"}
  query={{v: `3.${ AsyncGettingStarted.version }`, libraries: "geometry,drawing,places"}}
  loadingElement={
    <div {...this.props} style={{ height: "100%" }}>
      <FaSpinner />
    </div>
  }
  googleMapElement={
    <GoogleMap
      containerProps={{
        ...this.props,
        style: {
          height: "100%",
        },
      }}
      ref={googleMap => {
        // Wait until GoogleMap is fully loaded. Related to #133
        setTimeout(() => {
          googleMap && console.log(`Zoom: ${ googleMap.getZoom() }`);
        }, 50);
      }}
      defaultZoom={3}
      defaultCenter={{lat: -25.363882, lng: 131.044922}}
      onClick={::this.handleMapClick}
    >
      <Marker
        {...this.state.marker}
        onRightclick={this.handleMarkerRightclick}
      />
    </GoogleMap>
  }
/>

After:

<ScriptjsLoader
  hostname={"maps.googleapis.com"}
  pathname={"/maps/api/js"}
  query={{v: `3.${ AsyncGettingStarted.version }`, libraries: "geometry,drawing,places"}}
  loadingElement={
    <div {...this.props} style={{ height: "100%" }}>
      <FaSpinner />
    </div>
  }
  containerElement={
    <div {...this.props} style={{ height: "100%" }} />
  }
  googleMapElement={
    <GoogleMap
      ref={googleMap => {
        googleMap && console.log(`Zoom: ${ googleMap.getZoom() }`);
      }}
      defaultZoom={3}
      defaultCenter={{lat: -25.363882, lng: 131.044922}}
      onClick={::this.handleMapClick}
    >
      <Marker
        {...this.state.marker}
        onRightclick={this.handleMarkerRightclick}
      />
    </GoogleMap>
  }
/>

GoogleMapLoader: GoogleMap with props.containerProps is now deprecated. Use GoogleMapLoader with props.googleMapElement instead

We also suggest switching to callback based ref so that you'll get the component instance when it is mounted.

Before:

<GoogleMap containerProps={{
    ...this.props,
    style: {
      height: "100%",
    },
  }}
  ref="map"
  defaultZoom={3}
  defaultCenter={{lat: -25.363882, lng: 131.044922}}
  onClick={::this.handleMapClick}>
  {this.state.markers.map((marker, index) => {
    return (
      <Marker
        {...marker}
        onRightclick={this.handleMarkerRightclick.bind(this, index)} />
    );
  })}
</GoogleMap>

After:

<GoogleMapLoader
  containerElement={
    <div
      {...this.props}
      style={{
        height: "100%",
      }}
    />
  }
  googleMapElement={
    <GoogleMap
      ref={(map) => console.log(map)}
      defaultZoom={3}
      defaultCenter={{lat: -25.363882, lng: 131.044922}}
      onClick={::this.handleMapClick}>
      {this.state.markers.map((marker, index) => {
        return (
          <Marker
            {...marker}
            onRightclick={this.handleMarkerRightclick.bind(this, index)} />
        );
      })}
    </GoogleMap>
  }
/>

4.5.1 (2015-11-21)

Features

ScriptjsLoader: check with propTypesElementOfType(GoogleMap) (e8bb97b)

4.5.0 (2015-11-21)

Features

async/ScriptjsLoader: replacement of async/ScriptjsGoogleMap (ccfadd4), closes #145

BREAKING CHANGES

async/ScriptjsLoader: migrate from async/ScriptjsGoogleMap to async/ScriptjsLoader and changed its behavior from implicit inheritance to simple delegation

To migrate the code follow the example below (extracted from examples/gh-pages migration):

Before:

<ScriptjsLoader
  hostname={"maps.googleapis.com"}
  pathname={"/maps/api/js"}
  query={{v: `3.exp`, libraries: "geometry,drawing,places"}}
  //
  // <GoogleMap> props
  defaultZoom={3}
  defaultCenter={{lat: -25.363882, lng: 131.044922}}
  onClick={::this._handle_map_click}
/>

After:

<ScriptjsLoader
  hostname={"maps.googleapis.com"}
  pathname={"/maps/api/js"}
  query={{v: `3.exp`, libraries: "geometry,drawing,places"}}
  //
  googleMapElement={
    <GoogleMap
      defaultZoom={3}
      defaultCenter={{lat: -25.363882, lng: 131.044922}}
      onClick={::this._handle_map_click}
    />
  }
/>

4.4.1 (2015-11-19)

Bug Fixes

Marker: remove from MarkerClusterer (f4e0696), closes #154 #153

4.4.0 (2015-11-19)

Features

MarkerClusterer: Support for MarkerClusterPlus API (d56551c), closes #146

4.3.3 (2015-11-18)

Bug Fixes

OverlayView: redraw only when props.mapPaneName changes (ff4473d), closes #147 #148

4.3.2 (2015-11-17)

Bug Fixes

async/ScriptjsGoogleMap: switch to _.isEqual for key comparasion (0a1df35), closes #143

4.3.1 (2015-11-16)

Bug Fixes

package.json: scriptjs should exist in dependencies (4f3304c)

4.3.0 (2015-11-16)

Features

ScriptjsGoogleMap: add "scriptjs" support (b80b731)

4.2.1 (2015-11-16)

Bug Fixes

OverlayView: switch to ReactDOM (51fe680), closes #140
OverlayView: use ReactDOM for unmountComponentAtNode (735eba0), closes #137

4.2.0 (2015-10-15)

Bug Fixes

src: replace fbjs dependencies with can-use-dom (43250b3), closes #134

4.1.1 (2015-10-14)

Bug Fixes

src: switch to findDOMNode from "react-dom" (593b1c8), closes #132

4.1.0 (2015-10-13)

Features

src: move instance creation in componentWillMount (91d5790)
src: update composeOptions to accept controlledPropTypes for _2 (03aee4d)

4.0.0 (2015-10-08)

Features

package.json: upgrade to React@^0.14 (443a5fd), closes #127 #102

BREAKING CHANGES

- React@^0.14: upgrade React in peerDependencies
  - add react-dom@^0.14 to peerDependencies

3.0.0 (2015-09-30)

Bug Fixes

package.json: remove react from dependencies (bfd37877, closes #109)

2.2.0 (2015-09-30)

Bug Fixes

Marker: allow null and undefined as children (17daa0a2, closes #119)

2.1.1 (2015-09-30)

Bug Fixes

InfoBox: typo when update InfoBox children (a66852c4, closes #120)

2.1.0 (2015-09-08)

Features

SearchBox: Support for Google Places API search box (b06f5d6c, closes #110)

2.0.3 (2015-08-18)

Bug Fixes

OverlayView:
- add invariant for mapPaneName (f102577c)
- add invariant checking for position props (757bda08)
- add position to propTypes (1fc968ad, closes #99)
package.json: remove object-path (ee55b7a5)

2.0.2 (2015-08-08)

Bug Fixes

GoogleMap: remove propTypes validation on children (0e417015)
OverlayView: props.{default}mapPaneName should not be required (702a5710)

2.0.1 (2015-08-08)

Bug Fixes

Rectangle: remove unnecessary underscore (13312273, closes #90)

2.0.0 (2015-08-07)

Features

InfoWindow: add ReactElement child as content support (2c0dc026, closes #69)
Rectangle: add new componet (4511d87d, closes #80)

Breaking Changes

This commit rewrite this module from scratch.
GoogleMaps -> GoogleMap
- (Others Component names are the same)
OverlayView
```
- Now only accepts single child
```
Remove asynchronous loading support
The props are not directly served as options for all google.maps instance.
- Instead, we convert setters to props and also expose getters on component instance.
To set an option directly, you can now pass options object just the same way as using Google Maps JavaScript APIs.
Expose props have two representation: controlled & uncontrolled
- uncontrolled props will have a default${ PropName } name
- controlled props will be ${ propName } as you expected
Uncontrolled props will be used only when the instance first mounted
Controlled props will call its corresponding setters every time rendered

MIGRATION GUIDE:

It introduces controlled property concept into the module. Most of the case, your application would like to have uncontrolled property. So change your component like this:

Before (v1.x.x):

<Marker
      key={this.props.key}
      position={this.props.position}
      animation={this.props.animation}
      onRightclick={this.handleMarkerRightclick} />

After (v2.x.x):

<Marker
      key={this.props.key}
      defaultPosition={this.props.position}
      defaultAnimation={this.props.animation}
      onRightclick={this.handleMarkerRightclick} />

The properties with default- prefix is uncontrolled property. It will only be set ONCE when the component is first-time mounted. Any further changes to your React props/state will NOT affect this marker (So it's uncontrolled from the view of React). Who can change the marker, you may ask. The answer is, only the component from google.maps.

But sometimes, we may want the marker's position changed according to current state. In that case, you have to provide controlled property to the <Marker [position={this.state.position}>. By doing so, the marker's position will change every time the React props/state changes. However, it will not intercept the changes made by the component from google.maps. This is because for the <Marker> itself, it doesn't know what events from google.maps will change its component. So the consumer who uses "react-google-maps" will have to manually handle this in their codebase.

(081d03f1)

1.7.1 (2015-07-01)

Bug Fixes

src: eslint rules (012faada)

1.7.0 (2015-06-19)

Features

GoogleMaps: specify map bounds via declarative props.bounds (b1333c52, closes #64)

1.6.0 (2015-06-19)

Features

OverlayView: add OverlayView component by @petebrowne (f0c56ecb, closes #63)

1.5.1 (2015-06-17)

1.5.0 (2015-06-17)

Bug Fixes

VirtualContainer: propTypes.children should be renderable (a3d73af4)

Features

GoogleMaps: render VirtualContainer as children (c9e19828, closes #61)

1.4.0 (2015-06-17)

Bug Fixes

SimpleChildComponent: Make sure to only animate markers on the first run. (65aec078)
src: eslint issues (adf3764b)

1.3.1 (2015-05-21)

1.3.0 (2015-05-21)

Features

InfoBox: Support for InfoBox (613e5ef5)

1.2.0 (2015-05-15)

Features

DrawingManager: Support for Drawing API (9b3cbeba)
SimpleChildComponent:
- use warning from react/lib/warning (680c194d)
- Add warning text (9652e0c7)

1.1.2 (2015-05-06)

Bug Fixes

GoogleMaps: constructor should use spread operator (d8e30af6)
SimpleChildComponent: prevent removal of child during update (834d399b)

1.1.1 (2015-05-01)

Bug Fixes

VirtualContainer: preserve ref for React.cloneElement (3d3be964)

1.1.0 (2015-04-30)

Features

GoogleMaps:
- get rid of mapProps (7e338c2a)
- render child components inside VirtualContainer (f07eb4b4)

Breaking Changes

mapProps is no longer needed

since map children components are now rendered inside a virtual container, we don't need funky wrapper div anymore.

Before:

After:

(7e338c2a)

1.0.1 (2015-04-30)

Bug Fixes

Marker: dont wrap children inside noscript tag (5d9bbf0a)
package.json: test (7b54b54e)

1.0.0 (2015-04-28)

Bug Fixes

package.json: add peerDependencies (15166996)

Features

src: rewrite with new API (a525d5f2)

0.2.5 (2015-03-11)

Features

Map:
- add support for DirectionsRenderer (0102184a)
- add Circle support (8a8d4d50)

0.2.4 (2014-12-16)

Features

Map: expose fitBounds as public API (c64da722)

0.2.3 (2014-11-27)

0.2.2 (2014-11-20)

Bug Fixes

Map: only pass id, className and style from props (284ab299)

0.2.1 (2014-11-20)

0.2.0 (2014-11-20)

Bug Fixes

ChildMixin: remove invalid_context and duplicated contextTypes (80110a23)
EventBindingMixin: pass instance when binding/unbinding (bb922794)
GoogleMapsMixin: respond to update of googleMapsApi (3b0a0e07)
InfoWindow:
- event names (abb9ad3f)
- check owner props before getting ref (9022d48f)
Map:
- bind event once to component instance (fe2665ae)
- add api loaded state to _initialized (0e0192ba)
Marker: event listeners (f878c002)
Polygon: event listeners (5f98d0e1)
create_child_component: event binding for child components (f4b1b022)
expose_getters_from: should iterate all keys in prototype chain (5a89ed1c)

Features

ChildMixin:
- expose instance getters from prototype (bad5456f)
- add invalid_context to check before operations (5d33c309)
- make Map and Marker use context apis (9514b484)
EventBindingMixin:
- move event names definition to caller (4c5ca5d1)
- hook to correct lifecycle events (4ef9fdea)
- extract event binding part out (c12ddd4a)
GoogleMap:
- hookup event listeners to map instance (ff1a7a8a)
- initialize google map component (80e7fd84)
GoogleMapsMixin:
- move into mixins subfolder (0f10be83)
- create mixin for context usage (526ca9d8)
InfoWindow: component with example (e227edf8)
Map:
- expose panBy, panTo and panToBounds as public interfaces (6ccd1284)
- stateless map component (3d3aa153)
- configureable id, className and style (420e83bb)
- setOptions when componentDidUpdate (8d07bd34)
- extract out Map component (8c5429c7)
Marker: update options when componentDidUpdate (0a7e490f)
Polygon: add component and client example (556b9be9)
Polyline: component with example (d0b802bb)
index: create common child components by factory (43b791d2)

Package detail

readme

react-google-maps

Introduction

Installation

Usage & Configuration

Changelog

Demo App

Getting Help

For contributors

changelog

Change Log

9.4.5 (2018-01-05)

Bug Fixes

9.4.4 (2018-01-04)

9.4.3 (2017-12-14)

Bug Fixes

9.4.2 (2017-12-06)

Bug Fixes

9.4.1 (2017-11-26)

Bug Fixes

9.4.0 (2017-11-25)

Bug Fixes

Features

9.3.0 (2017-11-24)

Bug Fixes

Features

9.2.3 (2017-11-24)

Bug Fixes

9.2.2 (2017-11-03)

Bug Fixes

9.2.1 (2017-10-27)

Bug Fixes

9.2.0 (2017-10-26)

Features

9.1.0 (2017-10-26)

Features

9.0.3 (2017-10-26)

Bug Fixes

9.0.2 (2017-10-23)

9.0.1 (2017-10-17)

Bug Fixes

9.0.0 (2017-10-16)

Bug Fixes

Features

BREAKING CHANGES

8.5.0 (2017-10-12)

Features

8.4.2 (2017-10-11)

Bug Fixes

8.4.1 (2017-10-11)

Bug Fixes

8.4.0 (2017-10-10)

Features

8.3.5 (2017-10-06)

8.3.4 (2017-10-03)

8.3.3 (2017-10-02)

8.3.2 (2017-09-30)

Bug Fixes

8.3.1 (2017-09-29)

8.3.0 (2017-09-21)

Features

8.2.0 (2017-09-16)

Bug Fixes

Features

8.1.0 (2017-09-15)

Bug Fixes

Features

8.0.0 (2017-09-14)

Bug Fixes

Features

BREAKING CHANGES

7.3.0 (2017-09-06)

Bug Fixes

Features

7.2.0 (2017-07-18)

Features

7.1.0 (2017-07-06)

Features

7.0.0 (2017-04-21)