How to change Google Maps Markers CSS in React? - reactjs

Question

I'm trying to change the CSS of Google Maps Markers in React when one hovers over the marker, but I am really struggling on how to do it.
I have tried messing with the 'event' object extensively to no avail. I have also tried adding an id to the Marker, but this doesn't actually do anything.
position={{
lat: entry.lat,
lng: entry.lng,
}}
animation={window.google.maps.Animation.DROP}
onClick={(event) => window.open(
'https://blah.com/post/' + entry.id, '_blank'
)
}
onMouseOver={(event) => console.log(event)}
/>
I just want the Marker to change in size when the user hovers over it. No page reloading, none of that.

Answer 1

Please take a look at the code below as an example of a marker's mouse over event in React. It's based on this code from this tutorial I've just come across.
Hopefully it helps point you in the right direction and give you ideas on how this feature can be implemented (just one of many different ways). In this case I've achieved the effect you've described by changing the marker's icon's scaledSize.
I also recommend you go through Google's documentation on markers.
map.js
class Map extends Component {
constructor(props) {
super(props);
this.onScriptLoad = this.onScriptLoad.bind(this)
}
onScriptLoad() {
const map = new window.google.maps.Map(
document.getElementById(this.props.id),
this.props.options);
this.props.onMapLoad(map)
}
componentDidMount() {
if (!window.google) {
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = `https://maps.google.com/maps/api/js?key=`;
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
s.addEventListener('load', e => {
this.onScriptLoad()
})
} else {
this.onScriptLoad()
}
}
render() {
return (
<div style={{ width: 500, height: 500 }} id={this.props.id} />
);
}
}
export default Map
index.js
class App extends Component {
constructor() {
super();
}
render() {
return (
<Map
id="myMap"
options={{
center: { lat: 41.0082, lng: 28.9784 },
zoom: 8
}}
onMapLoad={map => {
const marker = new window.google.maps.Marker({
position: { lat: 41.0082, lng: 28.9784 },
map: map,
icon: {
url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png", size: new google.maps.Size(20, 32), scaledSize: new google.maps.Size(20, 32), origin: new google.maps.Point(0, 0)
}
});
marker.addListener('mouseover', e => {
marker.setIcon({ url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png", scaledSize: new google.maps.Size(30, 42) })
})
marker.addListener('mouseout', e => {
marker.setIcon({ url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png", scaledSize: new google.maps.Size(20, 32) })
})
}}
/>
);
}
}
render(<App />, document.getElementById('root'));
Hope this helps!