title: ReactJS - JavaScript: How to zoom on customized marker after click on it
body: <p>Usig <code>google-map-react</code>, how do I zoom on a customized marker after I click on it?
  I am able to click on the marker but it is not zooming after the click.</p>
  
  <p>Below a snippet of code for the most important parts:</p>
  
  <p><strong>GoogleMap.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import GoogleMapReact from 'google-map-react';
  
  const markerStyle = {
      position: 'absolute'
  };
  
  function CustomMarker({ lat, lng, onMarkerClick }) {
      return (
          &lt;div onClick={onMarkerClick} lat={lat} lng={lng}&gt;
              &lt;img style={markerStyle} src={icon} alt="icon" /&gt;
          &lt;/div&gt;
      );
  }
  function MapClick({ center, zoom, data }) {
      function handleMarkerClick() {
          console.log('Click');
      }
  }
  
  
  class BoatMap extends Component {
      constructor(props) {
          super(props);
          this.state = {
              buttonEnabled: true,
              buttonClickedAt: null,
              progress: 0,
              ships: [],
              type: 'All'
          };
      }
  
  // Operations.......
  
  render() {
      return (
          &lt;div className="google-map"&gt;
              &lt;GoogleMapReact
                  bootstrapURLKeys={{ key: 'My_KEY' }}
                  center={{
                      lat: 42.4,
                      lng: -71.1
                  }}
                  zoom={8}
                  defaultZoom={zoom}
                  defaultCenter={center}
              &gt;
                  {/* Rendering all the markers here */}
                  {this.state.ships.map((ship) =&gt; (
                      &lt;Ship ship={ship} key={ship.CALLSIGN} lat={ship.LATITUDE} lng={ship.LONGITUDE} /&gt;
                  ))}
  
                  {/* Trying to focus on the marker after clicking on it */}
                  {data.map((item, idx) =&gt; {
                  return &lt;CustomMarker  onMarkerClick={handleMarkerClick} key={idx} lat={item.lat} lng={item.lng} /&gt;
                  })}
  
              &lt;/GoogleMapReact&gt;
          &lt;/div&gt;
      );
  }
  }
  </code></pre>
  
  <p><strong>ShipTracker.js</strong> is where I detect the correct click event:</p>
  
  <pre><code>const Ship = ({ ship }) =&gt; {
      const shipName = ship.NAME;
      const company = shipCompanyMap[shipName];
  
      function handleMarkerClick() {
          console.log('marker clicked');
      }
  
      const shipImage = companyImageMap[company];
      return (
          &lt;div onClick={handleMarkerClick}&gt;
              {/* Render shipImage image */}
              &lt;img src={shipImage} alt="Logo" /&gt;
          &lt;/div&gt;
      );
  };
  export { Ship };
  </code></pre>
  
  <p><strong>What I have done so far:</strong></p>
  
  <p>what I tried so far:</p>
  
  <p>1) I came across <a href="https://stackoverflow.com/questions/53693145/how-to-focus-on-the-marker-position-with-zoom-in-react-using-react-google-maps-p">this</a> source and that was useful to understand how to create a marker but unfortunately I was not able to solve the problem.</p>
  
  <p>2) In my case I use <a href="https://github.com/google-map-react/google-map-react" rel="nofollow noreferrer">google-map-react</a> instead of google-map. I know that the procedure is similar, but for some reasons I might be missing something.</p>
  
  <p>3) After digging more into the problem I came across <a href="https://stackoverflow.com/questions/16265134/how-to-show-a-map-focused-on-a-marker-using-a-click-event-on-google-maps-javascr">this</a> source and it was very useful but still I could not fix the problem.</p>