0

I am making a Google Map applications in React with 'react-google-maps', and I have this code:

  • in App.js file I have declaration an image in state:
... state = {
        markers: markers_all,
        pageTitle: "Warsaw Cultural Map",
        listTitle: "List of Places",
        activeKey: "",
        error: "There was an error with making a request from Wikipedia.",
        image: "http://www.serwisstron.pl/icons/",   };

//This is function for onclick marker   onMarkerClick = () => {
    this.setState({image: 'http://www.serwisstron.pl/icons/yellow/'})}
  • and marker definition in map.js file:
...  <Marker
    {...marker}
    key={i}
    position={marker.location}
    title={marker.title}
    icon={props.image + marker.type + '.png'}
    animation={window.google.maps.Animation.DROP}
    onClick={() => {
       props.markerLocationsActive(i)
       resetInfoBox()
       getInfo(marker.title)
       props.onMarkerClick(i)
       geocodeByPlaceId(marker.place_id)
       .then(results => {
          const address = results[0].formatted_address;
          document.getElementById('address').innerHTML = 'Address: ' + address;
        })
       .catch(error => console.error(error))
     }}>

I want to change a marker symbol when marker will be clicked. But this is not working well, because when I clicked on marker then every markers icons changes, not only this one which was clicked.... How can I do this? Maybe some of you know, what is wrong in my code ?

Here is a link to repository on GitHub with this application: https://github.com/hajczek/Neighborhood---Warsaw-Cultural-Map

Thanks for any help!

4

0 回答 0