react-google-maps - npm Package Versions

7.2.0 (2017-07-18)

Features

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

<a name="7.1.0"></a>

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)

<a name="7.0.0"></a>

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.

<a name="6.3.0"></a>

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

<a name="6.2.0"></a>

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

<a name="6.1.0"></a>

6.1.0 (2017-04-20)

Features

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

<a name="6.0.3"></a>

6.0.3 (2017-04-20)

Bug Fixes

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

<a name="6.0.2"></a>

6.0.2 (2017-04-20)

Bug Fixes

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

<a name="6.0.1"></a>

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)

<a name="6.0.0"></a>

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

<a name="5.1.1"></a>