React-google-maps: defaultCenter and defaultZoom not working

[fishnugget]

Does anyone know how to access the map object to set the center and the zoom? This will need to happen after the map renders. Adding the values to the defaultZoom and/or defaultCenter in the render doesn't affect the view.

[amangeot]

You have to use controlled props (center, zoom), defaultCenter and defaultZoom are uncontrolled props.

One solution that's working (v4.11.0) for me is passing (center, zoom) controlled props only when they are defined:
<GoogleMap ref='map' {...this.optionalProps} ...
and using shouldComponentUpdate to control map re-renders

[iamgutz]

Does anyone knows how to remove map controls?
For example I don't want to have the streetViewControl, I am setting the property to the map like:
<GoogleMap zoom={zoom} center={center} streetViewControl={false}

but it doesn't work, still shows the man icon for streetview..
any thoughts @tomchentw ?

Thanks!

[amangeot]

Have you tried using defaultOptions props ?

That is where you can pass map styles, an object like:

{
  minZoom: 3,
  fullscreenControl: false,
  // zoomControl: false,
  streetViewControl: false,
  scaleControl: true,
  mapTypeControl: true,
  mapTypeControlOptions,
  styles: [...administrative, ...landscape, ...poi, ...road, ...transit, ...water]
}

where administrative, landscape, etc. are objects with featureType, elementType, stylers properties

You can probably pass a streetViewControl: true

[iamgutz]

@amangeot thanks! it worked for me.

[tomchentw]

Thanks @amangeot for answering!

Also, 6.0.0 is released on npm beta tag now. We also have a new demo page. Feel free to try it:
https://tomchentw.github.io/react-google-maps/

[ducminhn]

@amangeot's solution works. Or you can use the options prop