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>
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);