I want to know how to apply css to markers in @react-google-map/api

Question

<MarkerF style={{ zIndex: 5 }} position={center} />

I want to know how to apply css to markers in @react-google-map/api.

Answer 1

In Javascript

First create a marker style

const markerStyles = {
  url: 'YOUR_MARKER_PNG_HERE',
  scaledSize: new google.maps.Size(50, 50),
  anchor: new google.maps.Point(25, 25),
  labelOrigin: new google.maps.Point(25, -15),
  label: {
    text: 'My marker text',
    color: 'blue',
    fontSize: '20px',
    fontWeight: 'bold'
  }
};

Then create the actual marker

// Create the marker with the specified CSS styles
const marker = new google.maps.Marker({
  position: { lat: LAT_HERE, lng: LNG_HERE },
  map: map,
  icon: markerStyles
});