I want to create a tool-tip on a marker on the map, that when clicked opens a window with some information. I use @react-google-maps/api
this is my code:
import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
import { AppConfig } from '../../../constants/AppConfig';
const containerStyle = {
width: '100%',
height: '100%',
};
export interface MapProps {
isMarkerShown?: boolean;
otherMarkers?: {
lat: number;
lng: number;
}[];
lat: number;
lng: number;
}
export const Map = ({ lat, lng, isMarkerShown = true, otherMarkers }: MapProps) => {
return (
<LoadScript googleMapsApiKey={AppConfig.googleMapsApiKey}>
<GoogleMap
options={{
disableDefaultUI: true,
styles: [
{ featureType: 'poi', elementType: 'labels', stylers: [{ visibility: 'off' }] },
{ featureType: 'transit', elementType: 'labels', stylers: [{ visibility: 'off' }] },
],
}}
mapContainerStyle={containerStyle}
center={{ lat, lng }}
zoom={15}
>
<Marker
position={{ lat, lng }}
visible={isMarkerShown}
options={{}}
icon="/assets/svg/MapMakerIcon.svg"
/>
{/* other markers */}
{otherMarkers &&
otherMarkers.map((marker) => (
<Marker
title="marker"
key={`${marker.lat}-${marker.lng}`}
position={{ lat: marker.lat, lng: marker.lng }}
icon="/assets/svg/MapMarkerRoundedIcon.svg"
/>
))}
</GoogleMap>
</LoadScript>
);
};
I want render the tooltip in other markers.
2
Answers
To create a tooltip-like pop-up on a marker in your Google Map using
@react-google-maps/api
.@react-google-maps/api
has a component called InfoBox that can be used to display informationA state must be created to save information about some data and to verify that it is open.
A function must be defined to manage the clinics in the markers and update the status with the information of the selected marker.
And customize the content of the
InfoBox
to display the desired information.I had to go read the documentation and found out that there were some missing parts. You can consider
That, you only need to add a Child Component that takes ‘lat’ and ‘lng’ Props. And that Component should returns a text, image and your marker.