CODEWITHSUNDEEP
javascriptreactjsgoogle-mapsrender
Grzegorz Celek
Grzegorz Celek

Reputation: 23

Markers in react-google-map doesnt render after change in props

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)

Upvotes: 0

Views: 1042

Answers (1)

Justin Poehnelt
Justin Poehnelt

Reputation: 3469

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 //...;
}

Upvotes: 1

Related Questions