All notable changes to this project will be documented in this file. See standard-version for commit guidelines.
6.0.1 (2016-10-14)
- 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)
- 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)
- async/withScriptjs: provide HOC for loading
googleMapURL
withscriptjs
(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)
- 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 insidewithGoogleMap
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 underMarkerClusterer
- 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 beforewithGoogleMaps
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)
- 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)
5.0.0 (2016-08-04)
- src: eslint errors (f2b242a)
- .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)
- GoogleMap: You need to use GoogleMapLoader with props.googleMapElement={} 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)
4.10.3 (2016-05-29)
- GoogleMapLoader: handle unmount ref case (334c5c9)
4.10.2 (2016-05-29)
- package.json: upgrade to "marker-clusterer-plus@^2.1.4" (c1d322a)
4.10.1 (2016-04-27)
- package.json: update to "react-prop-types-element-of-type@^2.1.0" (0f27ed3)
4.10.0 (2016-04-26)
4.9.1 (2016-02-21)
- componentLifecycleDecorator: revert to componentWillReceiveProps (105dc6b)
4.9.0 (2016-02-21)
- componentLifecycleDecorator: change componentDidUpdate to componentWillReceiveProps (b42b58e)
4.8.2 (2016-02-21)
4.8.1 (2016-02-20)
4.8.0 (2016-02-20)
- KmlLayer: add new KmlLayer component (746af8d)
4.7.2 (2016-01-07)
4.7.1 (2015-12-30)
- utils: should use contentElement (76abbfc)
4.7.0 (2015-12-07)
4.6.2 (2015-12-07)
4.6.1 (2015-12-03)
4.6.0 (2015-11-22)
- GoogleMapLoader: introduce loader to manage React elements (532816a), closes #141 #133
- ScriptjsLoader: new behavior will render GoogleMapLoader instead (0f100d8)
- 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)
- ScriptjsLoader: check with propTypesElementOfType(GoogleMap) (e8bb97b)
4.5.0 (2015-11-21)
- 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)
4.4.0 (2015-11-19)
4.3.3 (2015-11-18)
4.3.2 (2015-11-17)
4.3.1 (2015-11-16)
- package.json: scriptjs should exist in dependencies (4f3304c)
4.3.0 (2015-11-16)
- ScriptjsGoogleMap: add "scriptjs" support (b80b731)
4.2.1 (2015-11-16)
- OverlayView: switch to ReactDOM (51fe680), closes #140
- OverlayView: use ReactDOM for unmountComponentAtNode (735eba0), closes #137
4.2.0 (2015-10-15)
4.1.1 (2015-10-14)
4.1.0 (2015-10-13)
- src: move instance creation in componentWillMount (91d5790)
- src: update composeOptions to accept controlledPropTypes for _2 (03aee4d)
4.0.0 (2015-10-08)
-
- React@^0.14: upgrade React in peerDependencies
- add react-dom@^0.14 to peerDependencies
- React@^0.14: upgrade React in peerDependencies
<a name"3.0.0">
<a name"2.2.0">
<a name"2.1.1">
<a name"2.1.0">
<a name"2.0.3">
- OverlayView:
- package.json: remove object-path (ee55b7a5)
<a name"2.0.2">
- GoogleMap: remove propTypes validation on children (0e417015)
- OverlayView: props.{default}mapPaneName should not be required (702a5710)
<a name"2.0.1">
<a name"2.0.0">
- InfoWindow: add ReactElement child as content support (2c0dc026, closes #69)
- Rectangle: add new componet (4511d87d, closes #80)
-
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 have a
-
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)
<a name"1.7.1">
- src: eslint rules (012faada)
- VirtualContainer: propTypes.children should be renderable (a3d73af4)
- SimpleChildComponent: Make sure to only animate markers on the first run. (65aec078)
- src: eslint issues (adf3764b)
- InfoBox: Support for InfoBox (613e5ef5)
- DrawingManager: Support for Drawing API (9b3cbeba)
- SimpleChildComponent:
- GoogleMaps: constructor should use spread operator (d8e30af6)
- SimpleChildComponent: prevent removal of child during update (834d399b)
- VirtualContainer: preserve ref for React.cloneElement (3d3be964)
- GoogleMaps:
-
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)
- package.json: add peerDependencies (15166996)
- src: rewrite with new API (a525d5f2)
- Map: expose fitBounds as public API (c64da722)
- Map: only pass id, className and style from props (284ab299)
- ChildMixin: remove invalid_context and duplicated contextTypes (80110a23)
- EventBindingMixin: pass instance when binding/unbinding (bb922794)
- GoogleMapsMixin: respond to update of googleMapsApi (3b0a0e07)
- InfoWindow:
- Map:
- 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)
- ChildMixin:
- EventBindingMixin:
- GoogleMap:
- GoogleMapsMixin:
- InfoWindow: component with example (e227edf8)
- Map:
- 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)