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