React Google Mapsを使ってて、PINを打とうとするとなんか微妙にずれる件

visgl.github.io

Pinを使ってラップするとうまい具合に中のピンも寄ってくれるので、GoogleマップのPinの要素は全部透明化してやればOK

            <AdvancedMarker position={{ lat: point.lat, lng: point.lng }} ref={ref} onClick={handleClick}>
                <Pin borderColor="transparent" background="transparent" glyphColor="transparent">
                    <div className="landmark">
                        <div className="icon">
                            <img src="/img/store_logo.png" />
                        </div>
                    </div>
                </Pin>
            </AdvancedMarker >

あとは、CSSでちょいちょいと。自分が使ったのはこんな感じ。

.landmark {
  position: absolute;
  top: -24px;
  left: -7px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.icon {
  position: relative;
  cursor: pointer;
  display:  inline-block;
  width: 40px;
  height: 40px;
  &::after {
    position: absolute;
    content: "";
    display: block;
    background: #000000;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    left: 3.5%;
    height: calc(tan(60deg)* 100% / 2);
    width: 95%;
    top: 66%;
  }
  img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
  }
}