Estoy tratando de agregar una superposición sobre el mapa y colocar el marcador sobre la superposición. pero no soy capaz de hacerlo. ¿Cómo puedo hacerlo? y estoy usando la biblioteca google-maps-react como dependencia.
<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>Puede hacerlo utilizando el objeto GroundOverlay de la API de JavaScript de Google Maps. Pero necesita obtener el objeto de mapa actual utilizado en su código de reacción de google-maps y lo usará para configurar el mapa de superposición en esta referencia de mapa.
Vea el código de muestra y el fragmento de código a continuación:
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);