Why `options` is render every time using react-google-maps/api

Question

Hello i have a google map in react and i think that the options parameter in GoogleMap is render every time.

I have this code

      <GoogleMap
        ref={this.myRef}
        mapContainerStyle={{width:'100%', height:'100%' }}
        center={center}
        options={{
          zoomControl: false,
          streetViewControl: false,
          fullscreenControl: false,
          mapTypeId:'satellite',
          mapTypeControl: true,
          mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.TOP_CENTER,
          },
        }}
        onLoad={(map) => {this.onMapLoad(map)}}
        zoom={3}
        onZoomChanged={() => this.onZoomChanged()}
        onClick={() => {this.props.handleMouseClickOnMap()}}
      >

Inside the options i add some parameters, but when i am doing with this way seems that the mapType is rendering continuously and when i choose labels after some sec. labels disappear. When i am deleting the options and i have the mapTypeId:'satellite' outside as a lone parameters works fine, but i want to center the mapType option. When i have only mapTypeControlOptions inside the options and erase the mapTypeId render every time again but the labels are not erased. I want to have default mapTypeId:'satellite' and center the mapTypeControl without erasing the labels when i choose them and without render continuously. Does anyone has any ideas ??

score 0 · Accepted Answer · answered Jul 13 '23 at 13:57

I solved my question. I define a variable here, that called: mapOptions

constructor(props) {
    super(props)

    this.state = {
      ....
    }
    this.myRef = React.createRef();

    this.mapOptions = undefined
}

Inside my GoogleMap component i did this

<GoogleMap
    ref={this.myRef}
    mapContainerStyle={{ width: '100%', height: '100%' }}
    center={center}
    options={this.mapOptions}
    onLoad={(map) => { this.onMapLoad(map) }}
    zoom={3}
    onZoomChanged={() => this.onZoomChanged()}
    onClick={() => { this.props.handleMouseClickOnMap() }}
>

And inside the prop onLoad that belongs to GoogleMap component i did this:

onMapLoad = (map) => {
  map.setMapTypeId('hybrid')

  this.mapOptions = {
   zoomControl: true,
   streetViewControl: false,
   fullscreenControl: false,
   mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
    position: google.maps.ControlPosition.TOP_CENTER,
   },
   mapTypeControl: true,
   zoomControlOptions: {
    style: google.maps.ZoomControlStyle.SMALL,
    position: google.maps.ControlPosition.LEFT_CENTER,
   },
   labels:true
  }

 this.setState({
   theMap: map
 })
}

With this way when you move the map or something that force a re render to the map, onLoad function does not affect.

Why `options` is render every time using react-google-maps/api

1 Answers1