Add prop onTilesLoaded (#615)

* Add prop `onTilesLoaded`

* (Adjust package name

* Increase version

* Make linter happy

* Remove scope from package name and reset version number

* Add description for new prop

* Remove "directories" entry

* Correct changelog

* Remove section header

* v2.0.0

* Revert version number

* Only listen to event if prop is used

API.md

@@ -138,6 +138,9 @@ When the user changes the map type (HYBRID, ROADMAP, SATELLITE, TERRAIN) this fi
 #### onGoogleApiLoaded (func)
 Directly access the maps API - *use at your own risk!*
 
+#### onTilesLoaded (func)
+This function is called when the visible tiles have finished loading.
+
 ```javascript
 <GoogleMap  onGoogleApiLoaded={({map, maps}) => console.log(map, maps)} />
 ```

CHANGELOG.md

@@ -1,5 +1,7 @@
 Add [google-map-clustering-example](https://github.com/istarkov/google-map-clustering-example)
 
+Add prop `onTilesLoaded` to react on the `tilesloaded` event
+
 ###0.9v
 
 Add: `bootstrapURLKeys` (object) instead of `apiKey` prop

src/google_map.js

@@ -118,6 +118,7 @@ export default class GoogleMap extends Component {
     onZoomAnimationEnd: PropTypes.func,
     onDrag: PropTypes.func,
     onMapTypeIdChange: PropTypes.func,
+    onTilesLoaded: PropTypes.func,
     options: PropTypes.any,
     distanceToMouse: PropTypes.func,
     hoverDistance: PropTypes.number,
@@ -255,7 +256,6 @@ export default class GoogleMap extends Component {
     }
 
     window.addEventListener('mouseup', this._onChildMouseUp, false);
-
     const bootstrapURLKeys = {
       ...(this.props.apiKey && { key: this.props.apiKey }),
       ...this.props.bootstrapURLKeys,
@@ -601,7 +601,6 @@ export default class GoogleMap extends Component {
               maps,
               overlay.getProjection()
             );
-
             ReactDOM.unstable_renderSubtreeIntoContainer(
               this_,
               <GoogleMapMarkers
@@ -663,6 +662,12 @@ export default class GoogleMap extends Component {
           this.heatmap.setMap(map);
         }
 
+        if (this.props.onTilesLoaded) {
+          maps.event.addListener(map, 'tilesloaded', () => {
+            this_._onTilesLoaded();
+          });
+        }
+
         maps.event.addListener(map, 'zoom_changed', () => {
           // recalc position at zoom start
           if (this_.geoService_.getZoom() !== map.getZoom()) {
@@ -797,6 +802,8 @@ export default class GoogleMap extends Component {
   _onZoomAnimationEnd = (...args) =>
     this.props.onZoomAnimationEnd && this.props.onZoomAnimationEnd(...args);
 
+  _onTilesLoaded = () => this.props.onTilesLoaded && this.props.onTilesLoaded();
+
   _onChildClick = (...args) => {
     if (this.props.onChildClick) {
       return this.props.onChildClick(...args);