React-google-maps: setZoom & getZoom

[hurano]

How can I use zoom function? I am adding custom zoom buttons and I would like to call map.setZoom function when users click my custom zoom button.

var map = new google.maps.Map(document.getElementById('google-container'), map_options);
map.setZoom(map.getZoom()+1)

Thanks.

[MathieuCh]

  zoom: function zoom(map, _zoom) {
    map.setZoom(_zoom);
  }

setZoom is called when you pass a number to zoom props.

` ref={props.onMapLoad}
zoom={props.zoom}

`

To get the zoom. You need to load the map, after use 'this._mapComponent' (example)

handleMapLoad(map) { this._mapComponent = map; if (map) { console.log(map.getZoom()); } }

[tomchentw]

Please refer to Getting Help section in the README.

[shanimal]

Setting the zoom property in GoogleMap component (as suggested by @MathieuCh) does not seem to change the zoom at all. I can see it calling render with the correct new zoom value, but the map doesn't change.

"react-google-maps": "^9.4.5",

[paul-at]

@shanimal #630 seems to have an answer

[JustFly1984]

@paul-at
The repo of this project is unmaintained more than a year, and we had build new version https://www.npmjs.com/package/@react-google-maps/api

We had rewrite it to TypeScript, and updating it frequently: https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api
You can enjoy autocomplete.

You can see our docs: https://react-google-maps-api-docs.netlify.com/

Also a lot of examples: https://react-google-maps-api-gatsby-demo.netlify.com/ https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api-gatsby-example/src/examples

The bundle size is much smaller: https://bundlephobia.com/result?p=@react-google-maps/api@1.6.0

Enjoy!