Масштабирование маркера карты при прокрутке колеса мыши

Я использую react с библиотекой google-map-react. Другую на проекте я использовать не могу. У меня возникла проблема. Я вставил маркер на карту просто как реакт компонент и мне надо чтобы он масштабировался при прокрутке колеса мыши, т.е. при уменьшении масштаба карты. Я это могу сделать с помощью библиотеки react-google-maps, но мне ее использовать нельзя. Может в google-map-react есть маркер по умолчанию или это можно как-то реализовать по-другому. Вот мой код

import React from "react";
import GoogleMapReact from "google-map-react";

const GoogleMap = ()=> {
    const Marker = ({text}) => {
        return (
            <div className="map-marker"><b>{text}</b></div>
    );
}
return(<GoogleMapReact
    bootstrapURLKeys={{ key: "AIzaSyDP86ZtopegmjR3E57CGglSkajFM1Qd8Ug"}}
    defaultCenter= {[25.0415, 55.1162]}
    defaultZoom={15}
>
    <Marker
        lat = {25.0406}
        lng = {55.1166}
        text = {<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.9375 3.75C9.88518 3.54989 9.82859 3.29338 9.75 3.1067C8.80954 0.800022 6.65332 0 4.99411 0C2.77295 0 0.326607 1.52004 0 4.65321V5.29333C0 5.32004 0.00902117 5.56002 0.0218353 5.68005C0.204924 7.17324 1.35939 8.76017 2.2216 10.2534C3.14921 11.8532 4.11174 13.4269 5.06535 15C5.65337 13.9734 6.23927 12.9334 6.81389 11.9334C6.97049 11.6399 7.15229 11.3466 7.30906 11.0665C7.41356 10.88 7.61318 10.6935 7.70439 10.5199C8.63196 8.78671 10.125 7.04009 10.125 5.32001V4.61338C10.125 4.42691 9.95025 3.79021 9.9375 3.75ZM5.03477 6.94677C4.38186 6.94677 3.66721 6.61358 3.31446 5.69341C3.2619 5.54694 3.26614 5.22651 3.26614 5.22651C3.26614 5.22651 3.26614 5.98622 3.26614 4.81318C3.26614 3.64014 4.24207 3.1067 5.09108 3.1067C6.13631 3.1067 6.9447 3.96014 6.9447 5.02689C6.9447 6.0936 6.08 6.94677 5.03477 6.94677Z" fill="#f80000"></path></svg>}
    />
</GoogleMapReact>)
}
export default  GoogleMap;

Ответы (0 шт):