Custom Zoom Control UI

Hello, this is the first time I am opening issue in this project. I have a question regarding adding custom control. Here is my environment:

• “react-google-maps”: “^9.4.5”
• “react”: “^16.3.2”
• “react-dom”: “^16.3.2”

Upon some googling and stackoverflow searching. I have found some good references: For example:

• https://jsfiddle.net/maunovaha/jptLfhc8/
• https://developers.google.com/maps/documentation/javascript/examples/control-custom

However, I don’t think the .controls are in the google.maps object.

Following is my code:

class MapComponent extends Component {
constructor(props){
    super(props);
    this.mapComponentRef = React.createRef();
  }

  render(){
      return (
      <GoogleMap
        ref={this.mapComponentRef}
      />);
  }
}

I can confirm that I can access the ref of the map. For example, I use

this.mapComponentRef.current.fitBounds(this.bounds);

to update the bounds of the map and it works.

However, when I try to do this.mapComponentRef.current.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv), it gives me errors that the controls is undefined.

Does anyone has pointer on how to get access the controls so I can push my custom component to control the zoom level of the map?

[rockia]

For anyone who is looking into this issue. I have posted my solution in https://github.com/tomchentw/react-google-maps/issues/82#issuecomment-412579391 .

I will close this PR now. Thanks so much for the help.

[veysiyildiz]

you just need to add current to ref <CustomControl mapHolderRef={this.mapComponentRef.current} controlPosition={window.google.maps.ControlPosition.TOP_LEFT} > <div onClick={() => this.mapComponentRef.current.map.setZoom(8)}>testing component</div> </CustomControl>