I cant deal with that problem. I got object locations. there are objects with info about position, function and icon color. I send it to Map. At start it shows ok but then when i filter the array and send new ones to show it doesnt render new ones. I add state to class and setState it- after check i see in console that everything is ok with changes- but markers are still the same. Please help
locations is also a state in parent stateless component.
Map Component
import React, {Component} from 'react'
import GoogleMapReact from 'google-map-react'
import MarkerClusterer from '@google/markerclusterer'
export default class GoogleMapContainer extends Component {
state = {
locationsToShow: null
}
componentDidMount () {
const script = document.createElement('script')
script.src = 'https://developers.google.com/maps/documentation/javascript/examples /markerclusterer/markerclusterer.js'
script.async = true
document.body.appendChild(script)
}
componentDidUpdate(prevProps) {
if (this.props.locations !== prevProps.locations) {
this.setState({locationsToShow: this.props.locations})
}
}
static defaultProps = {
center: {
lat: 59.95,
lng: 30.33
},
zoom: 11
}
render () {
const setGoogleMapRef = (map, maps) => {
this.googleMapRef = map
this.googleRef = maps
let locations = this.props.locations
console.log('locations w propsie')
let markers = this.state.locationsToShow && this.state.locationsToShow.map((location) => {
let item = new this.googleRef.Marker({position: location.position, icon: location.icon })
google.maps.event.addListener(item, 'click', location.fn)
return item
})
console.log('markerow jest')
let markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
gridSize: 60,
minimumClusterSize: 2
})
}
return (
<GoogleMapReact
bootstrapURLKeys={{key: `apiKey`}}
yesIWantToUseGoogleMapApiInternals
onGoogleApiLoaded={({map, maps}) => setGoogleMapRef(map, maps)}
defaultCenter={{lat: 52.193275, lng: 20.930372}}
defaultZoom={7}
options={{streetViewControl: true}}
/>
)
}
}
parent comp element
let locationsList = filteredData.map((el) => {
const lati = Number(el.location.latitude).toFixed(6)
const longi = Number(el.location.longitude).toFixed(6)
return {position: { lat: Number(lati), lng: Number(longi) }, icon: typeOfIcon(el.status), fn: ()=>{
setIsOpen(true)
setData(el)
} }
})
setLocations(locationsList)
setGoogleMapRef is only called when the map component is instantiated I am guessing (you want this). so you need to access the map and update your locations in your render function outside of the setGoogleMapRef callback.
something like the following:
render () {
const setGoogleMapRef = (map, maps) => {
this.googleMapRef = map
this.googleRef = maps
this.markerCluster = //...
};
if (this.googleMapRef) {
let locations = this.props.locations
console.log('locations w propsie')
let markers = this.state.locationsToShow &&
this.state.locationsToShow.map((location) => {
let item = new this.googleRef.Marker({position: location.position, icon: location.icon })
google.maps.event.addListener(item, 'click', location.fn)
return item
})
console.log('markerow jest')
// update marker cluster
}
return //...;
}