title: Can you display different components on different zoom levels with react-google-maps and have smooth transitions when zooming?
body: <p>I am using React and react-google-maps, and I want to display different components at different zoom levels. These components are like different layers of data.
  I was thinking of making the code something like this:</p>
  <pre><code>&lt;GoogleMap
      ref={this.ref}
      onZoomChanged={this.zoomHandler}
  &gt;
     { this.state.showComponent1 &amp;&amp; &lt;Component1 /&gt; }
     { this.state.showComponent2 &amp;&amp; &lt;Component2 /&gt; }
  &lt;/GoogleMap&gt;
  </code></pre>
  <p>The way I did this was that my zoomHandler function will check the map's zoom level, then once it passes a certain point, I want to switch which component is being viewed.</p>
  <pre><code>zoomHandler() {
      ...
      // If zoom level is &gt;= 13, then change component view
      const zoom = this.ref.current.getZoom();
      const bool1 = zoom &gt;= 13;
      if (this.state.showComponent1 !== bool1) {
          this.setState({ showComponent1: bool1, showComponent2: !bool1 });
      }
  
      ...
  }
  </code></pre>
  <p>The problem is that I have to call setState, which will rerender the entire map. Is there a way for me to have a smooth transition where the old component will fade out and the new component will come in? These components are fairly static, so not a lot of updates. Or is there a different map library that would make this easy?
  This is the library: <a href="https://www.npmjs.com/package/react-google-maps" rel="nofollow noreferrer">https://www.npmjs.com/package/react-google-maps</a></p>