Javascript 如何在react js中的Google marker中显示工具提示？

如何在react js中的Google marker中播撒工具提示我正在使用下面的react Google map组件是我的代码------

import{withScriptjs，withGoogleMap，GoogleMap，Marker}来自“react google maps”
const MyMapComponent=withScriptjs（withGoogleMap（（道具）=>
{props.ismarkersown&}
))

从“React”导入React，{useffect，useRef}；
常量GMap=（）=>{
const googleMapRef=useRef（null）；
让googleMap=null；
//标记对象列表以及图标、标题和信息
常量标记列表=[
{
拉脱维亚：59.2967322，
液化天然气：18.0009393，
图标：'https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/256/Map-Marker-Flag--Right-Chartreuse.png',
信息：“info 1Lorem Ipsum只是印刷和排版行业的虚拟文本。
”，
标题：“标题1”
},
{
拉脱维亚：59.2980245，
液化天然气：17.9971503，
图标：'https://cdn2.iconfinder.com/data/icons/IconsLandVistaMapMarkersIconsDemo/256/MapMarker_Marker_Outside_Chartreuse.png',
信息：“info 2Lorem Ipsum只是印刷和排版行业的虚拟文本。”，
标题：“标题2”
},
{
拉脱维亚：59.2981078，
液化天然气：17.9980875，
图标：'https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/256/Map-Marker-Ball-Right-Azure.png',
信息：“info 3Lorem Ipsum只是印刷和排版行业的虚拟文本。
”，
标题：“标题3”
},
{
拉脱维亚：59.2987638，
液化天然气：17.9917639，
图标：'https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/256/Map-Marker-Marker-Outside-Pink.png',
信息：“info 4Lorem Ipsum只是印刷和排版行业的虚拟文本。”，
标题：“标题4”
}
];
useffect（（）=>{
googleMap=initGoogleMap（）；
var bounds=new window.google.maps.LatLngBounds（）；
markerList.map（x=>{
const marker=createMarker（x）；
扩展（标记位置）；
});
googleMap.fitBounds（bounds）；//包含所有标记的地图
}, []);
//初始化谷歌地图
常量initGoogleMap=（）=>{
返回新的window.google.maps.Map（googleMapRef.current{
中心：{纬度：-34.397，液化天然气：150.644}，
缩放：8
});
}
//在谷歌地图上创建标记
常量createMarker=（markerObj）=>{
const marker=new window.google.maps.marker({
位置：{lat:markerObj.lat，lng:markerObj.lng}，
地图：谷歌地图，
图标：{
url:markerObj.icon，
//设置标记宽度和高度
scaledSize:newwindow.google.maps.Size（50,50）
},
标题：markerObj.title
});
const infowindow=new window.google.maps.infowindow（{content:markerObj.info}）；
marker.addListener（“单击“，（）=>infowindow.open（googleMap，marker））；
返回标记；
}
返回
}
导出默认GMap；

import React, { useEffect, useRef } from 'react';

const GMap = () => {
  const googleMapRef = useRef(null);
  let googleMap = null;

  // list of the marker object along with icon, title & info
  const markerList = [
    {
      lat: 59.2967322,
      lng: 18.0009393,
      icon: 'https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/256/Map-Marker-Flag--Right-Chartreuse.png',
      info: '<div><h2>Info 1</h2><p>Lorem Ipsum is simply dummy text<br/> of the printing and typesetting industry.</p></div>',
      title: "Title 1"
    },
    {
      lat: 59.2980245,
      lng: 17.9971503,
      icon: 'https://cdn2.iconfinder.com/data/icons/IconsLandVistaMapMarkersIconsDemo/256/MapMarker_Marker_Outside_Chartreuse.png',
      info: '<div><h2>Info 2</h2><p>Lorem Ipsum is simply dummy text<br/> of the printing and typesetting industry.</p></div>',
      title: "Title 2"
    },
    {
      lat: 59.2981078,
      lng: 17.9980875,
      icon: 'https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/256/Map-Marker-Ball-Right-Azure.png',
      info: '<div><h2>Info 3</h2><p>Lorem Ipsum is simply dummy text<br/> of the printing and typesetting industry.</p></div>',
      title: "Title 3"
    },
    {
      lat: 59.2987638,
      lng: 17.9917639,
      icon: 'https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/256/Map-Marker-Marker-Outside-Pink.png',
      info: '<div><h2>Info 4</h2><p>Lorem Ipsum is simply dummy text<br/> of the printing and typesetting industry.</p></div>',
      title: "Title 4"
    }
  ];

  useEffect(() => {
    googleMap = initGoogleMap();
    var bounds = new window.google.maps.LatLngBounds();
    markerList.map(x => {
      const marker = createMarker(x);
      bounds.extend(marker.position);
    });
    googleMap.fitBounds(bounds); // the map to contain all markers
  }, []);


  // initialize the google map
  const initGoogleMap = () => {
    return new window.google.maps.Map(googleMapRef.current, {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8
    });
  }

// create marker on google map
const createMarker = (markerObj) => {
  const marker = new window.google.maps.Marker({
    position: { lat: markerObj.lat, lng: markerObj.lng },
    map: googleMap,
    icon: {
      url: markerObj.icon,
      // set marker width and height
      scaledSize: new window.google.maps.Size(50, 50)
    },
    title: markerObj.title
  });

  const infowindow = new window.google.maps.InfoWindow({ content: markerObj.info });
  marker.addListener("click", () => infowindow.open(googleMap, marker));

  return marker;
}

  return <div
    ref={googleMapRef}
    style={{ width: 600, height: 500 }}
  />
}

export default GMap;