Is there any way to add markers above overlay in google maps react?

Question

I am trying to add overlay above the map and place the marker above the overlay. but I am not able to do so. how I can do it? and I am using the google-maps-react library as a dependency.

<div>
    <Map
      key={active}
      google={google}
      containerStyle={containerStyle}
      zoom={5}
      disableDefaultUI
      initialCenter={{
        lat: markers[0].position.lat,
        lng: markers[0].position.lng,
      }}
    >
      <div className="absolute top-0 bottom-0 right-0 left-0 bg-gray-400 pointer-events-none" />
      <Marker
        title="The marker`s title will appear as a tooltip."
        name="SOMA"
        position={{ lat: 37.778519, lng: -122.40564 }}
      />
    </Map>
  </div>

the view right now

Answer 1

You can do this by using the GroundOverlay object of Google Maps JavaScript API. But you need to get the current map object used in your google-maps-react code and you will use this to setMap the overlay into this map ref.

See the sample code and code snippet below:

import React, { Component } from 'react';
import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';

const mapStyles = {
  width: '100%',
  height: '100%',
};

const imageBounds = {
  north: 40.773941,
  south: 40.712216,
  east: -74.12544,
  west: -74.22655,
};

class MapWithOverlay extends Component {
  mapRef = (ref) => {
    let historicalOverlay = new google.maps.GroundOverlay(
      'https://storage.googleapis.com/geo-devrel-public-buckets/newark_nj_1922-661x516.jpeg',
      imageBounds
    );
    historicalOverlay.setMap(ref.map);
  };

  render() {
    return (
      <>
        <div>
          <Map
            ref={(ref) => {
              this.mapRef(ref);
            }}
            google={this.props.google}
            zoom={12}
            style={mapStyles}
            initialCenter={{ lat: 40.74, lng: -74.18 }}
          >
            <Marker position={{ lat: 40.74, lng: -74.18 }} />
          </Map>
        </div>
      </>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: 'YOUR_KEY',
})(MapWithOverlay);