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!

Iwona Hajczewska
  • 91
  • 1
  • 12
  • For keeping the icon state for multiple markers, one prop for the collection of markers is not enough. maybe you could add the image/icon to the "marker" data struct (the items in `markers_all`)? – lipp Jun 04 '18 at 11:31
  • Hmm I'm not sure if it's possible to change only 1marker icon. But if it is possible you probably have to keep an array of all markers. Retrieve the one marker that you want to change out of the array and then replace the icon. – mrdeadsven Jun 04 '18 at 11:31
  • Hi mrdeadsven! Thanks for your hint - I try do this that way ... – Iwona Hajczewska Jun 04 '18 at 12:36
  • Thanks for your help. I put this code in map.js file: `let markerImage='path-to-image' if (i === props.activeKey) markerImage='path-to-another-image'` And then put markerImage in icon: `icon={markerImage + marker.type + '.png'}` And this is working well :) – Iwona Hajczewska Jun 04 '18 at 18:11

0 Answers0