reactjsgoogle-mapsreact-google-maps-api

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


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 ??


Solution

  • 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.