From 6d142cb10cf06effbe035a77506dfad31e73efd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonathan=20Wei=C3=9F?= <info@jonathanweiss.net>
Date: Fri, 3 Aug 2018 17:49:35 +1000
Subject: [PATCH] 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            |  3 +++
 CHANGELOG.md      |  2 ++
 src/google_map.js | 11 +++++++++--
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/API.md b/API.md
index c5fa6ec..fedde9e 100644
--- a/API.md
+++ b/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)} />
 ```
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8a64dfc..983d73d 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/google_map.js b/src/google_map.js
index 800ee41..1a0bd80 100644
--- a/src/google_map.js
+++ b/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);