@mint-ui/map 0.4.5-beta → 0.5.0-beta

package/dist/components/mint-map/core/wrapper/MapPolylineWrapper.d.ts

@@ -1,5 +1,12 @@
-import { PropsWithChildren } from "react";
-import { PolylineOptions } from "../../MintMap";
-export interface MapPolylineWrapperProps extends PolylineOptions {
-}
-export declare function MapPolylineWrapper({ children, ...options }: PropsWithChildren<MapPolylineWrapperProps>): JSX.Element;
+import { PropsWithChildren } from "react";
+import { PolylineOptions } from "../../types/MapDrawables";
+export interface MapPolylineWrapperProps extends PolylineOptions {
+}
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
+ */
+export declare function MapPolylineWrapper({ children, ...options }: PropsWithChildren<MapPolylineWrapperProps>): JSX.Element;

package/dist/components/mint-map/core/wrapper/MapPolylineWrapper.js

@@ -5,32 +5,46 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var MintMapProvider = require('../provider/MintMapProvider.js');
-var MintMap = require('../../MintMap.js');
+var MapDrawables = require('../../types/MapDrawables.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
+ */
+
 function MapPolylineWrapper(_a) {
   var children = _a.children,
-      options = tslib.__rest(_a, ["children"]);
+      options = tslib.__rest(_a, ["children"]); //controller
+
+
+  var controller = MintMapProvider.useMintMapController(); //lifecycle
 
-  var controller = MintMapProvider.useMintMapController();
   React.useEffect(function () {
     return function () {
       if (polylineRef.current) {
-        controller.clearDrawable(polylineRef.current);
+        controller.clearDrawable(polylineRef.current); // console.log('polyline cleared')
       }
     };
-  }, []);
+  }, []); //create/update object
+
   var polylineRef = React.useRef();
   React.useEffect(function () {
+    //console.log('Polyline useEffect')
     if (options) {
       if (polylineRef.current) {
+        //console.log('update Polyline', options)
         controller.updatePolyline(polylineRef.current, options);
       } else {
-        var polyline = new MintMap.Polyline(options);
-        polylineRef.current = polyline;
+        var polyline = new MapDrawables.Polyline(options);
+        polylineRef.current = polyline; //console.log('create Polyline', options)
+
         controller.createPolyline(polyline);
       }
     }

package/dist/components/mint-map/core/wrapper/index.d.ts

@@ -1,6 +1,6 @@
-export * from './MapControlWrapper';
-export * from './MapMarkerWrapper';
-export * from './MapPolygonWrapper';
-export * from './MapPolylineWrapper';
-export * from './MapCanvasWrapper';
-export * from './MapCanvasMarkerWrapper';
+export * from './MapControlWrapper';
+export * from './MapMarkerWrapper';
+export * from './MapPolygonWrapper';
+export * from './MapPolylineWrapper';
+export * from './MapCanvasWrapper';
+export * from './MapCanvasMarkerWrapper';

package/dist/components/mint-map/google/GoogleMintMapController.d.ts

@@ -1,39 +1,51 @@
-/// <reference types="google.maps" />
-import { MintMapController } from "../core/MintMapController";
-import { Bounds, Drawable, MapType, MapVendorType, Marker, MarkerOptions, MintMapProps, Polygon, PolygonOptions, Polyline, PolylineOptions, Position } from "../MintMap";
-export declare class GoogleMintMapController extends MintMapController {
-    type: MapType;
-    map: google.maps.Map | null;
-    scriptUrl: string;
-    scriptModules: string[];
-    constructor(props: MintMapProps);
-    polylineEvents: string[];
-    createPolyline(polyline: Polyline): void;
-    updatePolyline(polyline: Polyline, options: PolylineOptions): void;
-    polygonEvents: string[];
-    createPolygon(polygon: Polygon): void;
-    updatePolygon(polygon: Polygon, options: PolygonOptions): void;
-    private getValidOptions;
-    markerEvents: string[];
-    createMarker(marker: Marker): void;
-    updateMarker(marker: Marker, options: MarkerOptions): void;
-    private markerMaxZIndex;
-    private getMaxZIndex;
-    setMarkerZIndex(marker: Marker, zIndex: number): void;
-    markerToTheTop(marker: Marker): void;
-    clearDrawable(drawable: Drawable): boolean;
-    private dragged;
-    isMapDragged(): boolean;
-    setMapDragged(value: boolean): void;
-    private checkLoaded;
-    loadMapApi(): Promise<boolean>;
-    initializingMap(divElement: HTMLDivElement): Promise<MapVendorType>;
-    destroyMap: () => void;
-    private fromGoogleBounds;
-    getCurrBounds(): Bounds;
-    panningTo(targetCenter: Position): void;
-    getZoomLevel(): number;
-    setZoomLevel(zoom: number): void;
-    getCenter(): Position;
-    setCenter(position: Position): void;
-}
+/// <reference types="google.maps" />
+import { MintMapController } from "../core/MintMapController";
+import { MapType, MapVendorType } from "../types/CommonTypes";
+import { Drawable, Marker, MarkerOptions, Polygon, PolygonOptions, Polyline, PolylineOptions } from "../types/MapDrawables";
+import { EventCallback, EventParamType, MapEvent, MapEventName, MapUIEvent } from "../types/MapEventTypes";
+import { Bounds, Position } from "../types/MapTypes";
+import { MintMapProps } from "../types/MintMapProps";
+export declare class GoogleMintMapController extends MintMapController {
+    type: MapType;
+    map: google.maps.Map | null;
+    scriptUrl: string;
+    scriptModules: string[];
+    protected mapEvent: MapEvent;
+    protected mapUIEvent: MapUIEvent;
+    constructor(props: MintMapProps);
+    polylineEvents: string[];
+    createPolyline(polyline: Polyline): void;
+    updatePolyline(polyline: Polyline, options: PolylineOptions): void;
+    polygonEvents: string[];
+    createPolygon(polygon: Polygon): void;
+    updatePolygon(polygon: Polygon, options: PolygonOptions): void;
+    private getValidOptions;
+    markerEvents: string[];
+    createMarker(marker: Marker): void;
+    updateMarker(marker: Marker, options: MarkerOptions): void;
+    private markerMaxZIndex;
+    private getMaxZIndex;
+    setMarkerZIndex(marker: Marker, zIndex: number): void;
+    markerToTheTop(marker: Marker): void;
+    clearDrawable(drawable: Drawable): boolean;
+    private dragged;
+    isMapDragged(): boolean;
+    setMapDragged(value: boolean): void;
+    private checkLoaded;
+    loadMapApi(): Promise<boolean>;
+    lastMousePosition: Position | null;
+    initializingMap(divElement: HTMLDivElement): Promise<MapVendorType>;
+    destroyMap: () => void;
+    private fromGoogleBounds;
+    getCurrBounds(): Bounds;
+    panningTo(targetCenter: Position): void;
+    getZoomLevel(): number;
+    setZoomLevel(zoom: number): void;
+    getCenter(): Position;
+    setCenter(position: Position): void;
+    private eventMap;
+    addEventListener(eventName: MapEventName, callback: EventCallback<EventParamType>): void;
+    removeEventListener(eventName: MapEventName, callback: EventCallback<EventParamType>): void;
+    removeAllEventListener(eventName?: MapEventName | undefined): void;
+    private clearEventListener;
+}

package/dist/components/mint-map/google/GoogleMintMapController.js

@@ -5,9 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var MintMapController = require('../core/MintMapController.js');
 var waiting = require('../core/util/waiting.js');
-var MintMap = require('../MintMap.js');
+var MapEventTypes = require('../types/MapEventTypes.js');
+var MapTypes = require('../types/MapTypes.js');
 
-var GoogleMintMapController = function (_super) {
+var GoogleMintMapController =
+/** @class */
+function (_super) {
   tslib.__extends(GoogleMintMapController, _super);
 
   function GoogleMintMapController(props) {
@@ -16,21 +19,34 @@ var GoogleMintMapController = function (_super) {
     _this.type = 'google';
     _this.map = null;
     _this.scriptUrl = 'https://maps.googleapis.com/maps/api/js';
-    _this.scriptModules = ['marker'];
+    _this.scriptModules = ['marker']; //'drawing' , 'geometry' , 'journeySharing' , 'localContext' , 'places' , 'visualization']
+
+    _this.mapEvent = new MapEventTypes.MapEvent();
+    _this.mapUIEvent = new MapEventTypes.MapUIEvent();
     _this.polylineEvents = ['mouseover', 'mouseout'];
     _this.polygonEvents = ['mouseover', 'mouseout'];
     _this.markerEvents = ['click', 'mouseover', 'mouseout'];
     _this.dragged = false;
+    _this.lastMousePosition = null;
 
     _this.destroyMap = function () {
       try {
+        _this.removeAllEventListener();
+
         _this.map && google.maps.event.clearInstanceListeners(_this.map);
       } catch (e) {
         console.log('google map destroy error', e);
-      }
+      } // console.log(`${this.type} map destroyed`);
+
     };
 
-    return _this;
+    _this.eventMap = new Map(); //google 은 zoomstart 가 없으므로 zoom_changed 로 대체 (하지만 zooming 되는 내내 여러번 호출됨)
+    //나중에 naver 와 마찬가지로 zoomstart 1번 zoom_changed 1번 호출되도록 바꾸는것 고려중
+
+    _this.mapEvent.ZOOMSTART = 'zoom_changed';
+    Object.freeze(_this.mapEvent);
+    Object.freeze(_this.mapUIEvent);
+    return _this; // console.log(`${this.type} controller loadded`);
   }
 
   GoogleMintMapController.prototype.createPolyline = function (polyline) {
@@ -48,12 +64,13 @@ var GoogleMintMapController = function (_super) {
         visible = _e === void 0 ? true : _e,
         _f = _a.editable,
         editable = _f === void 0 ? false : _f,
-        event = _a.event;
+        event = _a.event; //console.log('polyline', polyline);
 
     if (this.map && Array.isArray(position)) {
       var path = position.map(function (elem) {
-        return Array.isArray(elem) ? new MintMap.Position(elem[1], elem[0]) : elem;
-      });
+        return Array.isArray(elem) ? new MapTypes.Position(elem[1], elem[0]) : elem;
+      }); //console.log('polyline path',path);
+
       var pol_1 = new google.maps.Polyline({
         map: this.map,
         path: path,
@@ -63,7 +80,8 @@ var GoogleMintMapController = function (_super) {
         clickable: true,
         visible: visible,
         editable: editable
-      });
+      }); //console.log('google polyline created', polyline);
+
       polyline.native = pol_1;
       event && event.forEach(function (handler, key) {
         if (_this.polylineEvents.includes(key)) {
@@ -74,12 +92,13 @@ var GoogleMintMapController = function (_super) {
   };
 
   GoogleMintMapController.prototype.updatePolyline = function (polyline, options) {
+    //console.log('controller updatePolyline', options);
     if (polyline && polyline.native && polyline.native instanceof google.maps.Polyline) {
-      var polylineOption = this.getValidOptions(options);
+      var polylineOption = this.getValidOptions(options); //console.log('controller updatePolyline start', polylineOption);
 
       if (this.map && Array.isArray(options.position)) {
         var path = options.position.map(function (elem) {
-          return Array.isArray(elem) ? new MintMap.Position(elem[1], elem[0]) : elem;
+          return Array.isArray(elem) ? new MapTypes.Position(elem[1], elem[0]) : elem;
         });
         polylineOption.path = path;
       }
@@ -108,11 +127,11 @@ var GoogleMintMapController = function (_super) {
         visible = _g === void 0 ? true : _g,
         _h = _a.editable,
         editable = _h === void 0 ? false : _h,
-        event = _a.event;
+        event = _a.event; //console.log('polygon', polygon);
 
     if (this.map && Array.isArray(position)) {
       var outLine = position.map(function (elem) {
-        return Array.isArray(elem) ? new MintMap.Position(elem[1], elem[0]) : elem;
+        return Array.isArray(elem) ? new MapTypes.Position(elem[1], elem[0]) : elem;
       });
       var paths = [outLine];
       innerPositions && paths.push.apply(paths, innerPositions);
@@ -127,7 +146,8 @@ var GoogleMintMapController = function (_super) {
         clickable: true,
         visible: visible,
         editable: editable
-      });
+      }); //console.log('google polygon created', polygon);
+
       polygon.native = pol_2;
       event && event.forEach(function (handler, key) {
         if (_this.polygonEvents.includes(key)) {
@@ -138,12 +158,13 @@ var GoogleMintMapController = function (_super) {
   };
 
   GoogleMintMapController.prototype.updatePolygon = function (polygon, options) {
+    //console.log('controller updatePolygon', options);
     if (polygon && polygon.native && polygon.native instanceof google.maps.Polygon) {
-      var polygonOption = this.getValidOptions(options);
+      var polygonOption = this.getValidOptions(options); //console.log('controller updatePolygon start', polygonOption);
 
       if (this.map && Array.isArray(options.position)) {
         var outLine = options.position.map(function (elem) {
-          return Array.isArray(elem) ? new MintMap.Position(elem[1], elem[0]) : elem;
+          return Array.isArray(elem) ? new MapTypes.Position(elem[1], elem[0]) : elem;
         });
         var paths = [outLine];
         options.innerPositions && paths.push.apply(paths, options.innerPositions);
@@ -155,12 +176,14 @@ var GoogleMintMapController = function (_super) {
   };
 
   GoogleMintMapController.prototype.getValidOptions = function (options) {
+    //console.log('getValidOptions DrawableOptions',options)
     var target = {};
 
     for (var _i = 0, _a = Object.getOwnPropertyNames(options); _i < _a.length; _i++) {
-      var name_1 = _a[_i];
+      var name_1 = _a[_i]; //@ts-ignore
 
       if (options[name_1] !== undefined) {
+        //@ts-ignore
         target[name_1] = options[name_1];
       }
     }
@@ -176,7 +199,7 @@ var GoogleMintMapController = function (_super) {
     if (this.map) {
       var googleMarker_1;
 
-      if (marker.element) {
+      if (marker.element && marker.element instanceof Element) {
         var options = {
           map: this.map,
           position: marker.options.position
@@ -207,6 +230,7 @@ var GoogleMintMapController = function (_super) {
   };
 
   GoogleMintMapController.prototype.updateMarker = function (marker, options) {
+    //console.log('controller updateMarker', options);
     var _a, _b;
 
     if (marker && marker.native) {
@@ -216,8 +240,9 @@ var GoogleMintMapController = function (_super) {
         if (map) {
           marker.native.setOptions({
             map: map,
-            position: options.position instanceof MintMap.Position ? options.position : marker.native.getPosition(),
-            visible: options.visible === undefined || options.visible
+            position: options.position instanceof MapTypes.Position ? options.position : marker.native.getPosition(),
+            visible: options.visible === undefined || options.visible // icon:{...marker.native.getIcon(), anchor:options.anchor}
+
           });
         }
       } else if (marker.native instanceof google.maps.marker.AdvancedMarkerView) {
@@ -225,7 +250,7 @@ var GoogleMintMapController = function (_super) {
           marker.native.element.style.visibility = options.visible ? 'visible' : 'hidden';
         }
 
-        if (options.position instanceof MintMap.Position && (((_a = marker.native.position) === null || _a === void 0 ? void 0 : _a.lat) != options.position.lat || ((_b = marker.native.position) === null || _b === void 0 ? void 0 : _b.lng) != options.position.lng)) {
+        if (options.position instanceof MapTypes.Position && (((_a = marker.native.position) === null || _a === void 0 ? void 0 : _a.lat) != options.position.lat || ((_b = marker.native.position) === null || _b === void 0 ? void 0 : _b.lng) != options.position.lng)) {
           marker.native.position = options.position;
         }
       }
@@ -313,7 +338,7 @@ var GoogleMintMapController = function (_super) {
   GoogleMintMapController.prototype.checkLoaded = function () {
     var _a, _b, _c;
 
-    return (_c = (_b = (_a = window.google) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.marker) === null || _c === void 0 ? void 0 : _c.AdvancedMarkerView;
+    return ((_c = (_b = (_a = window.google) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.marker) === null || _c === void 0 ? void 0 : _c.AdvancedMarkerView) ? true : false;
   };
 
   GoogleMintMapController.prototype.loadMapApi = function () {
@@ -321,17 +346,21 @@ var GoogleMintMapController = function (_super) {
       var _this = this;
 
       return tslib.__generator(this, function (_a) {
-        return [2, new Promise(function (resolve) {
+        return [2
+        /*return*/
+        , new Promise(function (resolve) {
           return tslib.__awaiter(_this, void 0, void 0, function () {
             var callbackName, loaded, params, callbackExecFlag, ok;
             return tslib.__generator(this, function (_a) {
               switch (_a.label) {
                 case 0:
                   callbackName = this.getRandomFunctionName('load_google');
-                  loaded = false;
+                  loaded = false; //@ts-ignore
 
                   window[callbackName] = function () {
-                    loaded = true;
+                    // console.log('google api loaded');
+                    loaded = true; //@ts-ignore
+
                     delete window[callbackName];
                   };
 
@@ -341,17 +370,23 @@ var GoogleMintMapController = function (_super) {
                     v: 'beta',
                     callback: callbackName
                   };
-                  return [4, this.loadScript(this.buildUrl(this.scriptUrl, params), 'google_map_script', this.checkLoaded)];
+                  return [4
+                  /*yield*/
+                  , this.loadScript(this.buildUrl(this.scriptUrl, params), 'google_map_script', this.checkLoaded)];
 
                 case 1:
                   callbackExecFlag = _a.sent();
 
                   if (!callbackExecFlag) {
-                    loaded = true;
+                    // console.log('google api loaded 222222');
+                    loaded = true; //@ts-ignore
+
                     delete window[callbackName];
                   }
 
-                  return [4, waiting.waiting(function () {
+                  return [4
+                  /*yield*/
+                  , waiting.waiting(function () {
                     return loaded;
                   })];
 
@@ -364,7 +399,9 @@ var GoogleMintMapController = function (_super) {
 
                   this.mapApiLoaded = true;
                   resolve(true);
-                  return [2];
+                  return [2
+                  /*return*/
+                  ];
               }
             });
           });
@@ -378,8 +415,11 @@ var GoogleMintMapController = function (_super) {
       var _this = this;
 
       return tslib.__generator(this, function (_a) {
+        //div element
         this.mapDivElement = divElement;
-        return [2, new Promise(function (resolve) {
+        return [2
+        /*return*/
+        , new Promise(function (resolve) {
           return tslib.__awaiter(_this, void 0, void 0, function () {
             var map;
 
@@ -390,15 +430,24 @@ var GoogleMintMapController = function (_super) {
             return tslib.__generator(this, function (_e) {
               switch (_e.label) {
                 case 0:
+                  //이미 생성했으면 
+                  //1. divElement 가 그대로인 경우 기존 map 객체 리턴
+                  //2. divElement 가 바뀐경우 기존 map 객체 destroy 하고 새로 생성
                   if (this.mapInitialized && this.map) {
                     if (this.map.getDiv() === divElement) {
                       resolve(this.map);
-                      return [2];
+                      return [2
+                      /*return*/
+                      ];
                     }
                   }
 
-                  if (!!this.mapApiLoaded) return [3, 2];
-                  return [4, this.loadMapApi()];
+                  if (!!this.mapApiLoaded) return [3
+                  /*break*/
+                  , 2];
+                  return [4
+                  /*yield*/
+                  , this.loadMapApi()];
 
                 case 1:
                   _e.sent();
@@ -417,30 +466,53 @@ var GoogleMintMapController = function (_super) {
                     keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true,
                     clickableIcons: false
                   });
-                  this.map = map;
+                  this.map = map; //@ts-ignore
+
                   map.addListener('idle', function () {
+                    //onBoundsChanged event
                     _this.checkBoundsChangeThrottleTime() && _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());
                   });
                   map.addListener('zoom_changed', function () {
-                    _this.map && _this.mapProps.onZoomChanged && _this.mapProps.onZoomChanged(_this.map.getZoom());
-                  });
+                    //onZoomChanged event
+                    // console.log('zoom_changed');
+                    _this.map && _this.mapProps.onZoomChanged && _this.mapProps.onZoomChanged(_this.map.getZoom() || 10);
+                  }); //@ts-ignore
+
                   map.addListener('click', function (e) {
+                    // console.log('map click', e)
                     if (!_this.mapProps.onClick) return;
-                    var pos = new MintMap.Position(e.latLng.lat(), e.latLng.lng());
-                    pos.offset = new MintMap.Offset(e.pixel.x, e.pixel.y);
+                    var pos = new MapTypes.Position(e.latLng.lat(), e.latLng.lng());
+                    pos.offset = new MapTypes.Offset(e.pixel.x, e.pixel.y);
 
                     _this.mapProps.onClick(pos);
+                  }); //@ts-ignore
+
+                  map.addListener('mousedown', function (e) {
+                    // console.log('map click', e)
+                    var pos = new MapTypes.Position(e.latLng.lat(), e.latLng.lng());
+                    pos.offset = new MapTypes.Offset(e.pixel.x, e.pixel.y);
+                    _this.lastMousePosition = pos;
+                  }); //@ts-ignore
+
+                  map.addListener('mouseup', function (e) {
+                    // console.log('map click', e)
+                    var pos = new MapTypes.Position(e.latLng.lat(), e.latLng.lng());
+                    pos.offset = new MapTypes.Offset(e.pixel.x, e.pixel.y);
+                    _this.lastMousePosition = pos;
                   });
                   map.addListener('mousemove', function (e) {
                     if (!_this.mapProps.onMouseMove) return;
-                    var pos = new MintMap.Position(e.latLng.lat(), e.latLng.lng());
-                    pos.offset = new MintMap.Offset(e.pixel.x, e.pixel.y);
+                    var pos = new MapTypes.Position(e.latLng.lat(), e.latLng.lng());
+                    pos.offset = new MapTypes.Offset(e.pixel.x, e.pixel.y); // console.log('mousemove', pos)
 
                     _this.mapProps.onMouseMove(pos);
                   });
-                  this.mapInitialized = true;
+                  this.mapInitialized = true; // console.log(`${this.type} map script initialized`, divElement);
+
                   resolve(map);
-                  return [2];
+                  return [2
+                  /*return*/
+                  ];
               }
             });
           });
@@ -450,7 +522,7 @@ var GoogleMintMapController = function (_super) {
   };
 
   GoogleMintMapController.prototype.fromGoogleBounds = function (bounds) {
-    return MintMap.Bounds.fromNESW(new MintMap.Position(bounds.getNorthEast().lat(), bounds.getNorthEast().lng()), new MintMap.Position(bounds.getSouthWest().lat(), bounds.getSouthWest().lng()));
+    return MapTypes.Bounds.fromNESW(new MapTypes.Position(bounds.getNorthEast().lat(), bounds.getNorthEast().lng()), new MapTypes.Position(bounds.getSouthWest().lat(), bounds.getSouthWest().lng()));
   };
 
   GoogleMintMapController.prototype.getCurrBounds = function () {
@@ -463,7 +535,7 @@ var GoogleMintMapController = function (_super) {
     if (bounds) {
       return this.fromGoogleBounds(bounds);
     } else {
-      throw new Error('bounds is not found!!!');
+      throw new Error('bounds is not found!!!'); //return new Bounds(new Position(0,0), new Position(0,0))
     }
   };
 
@@ -495,6 +567,114 @@ var GoogleMintMapController = function (_super) {
     (_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
   };
 
+  GoogleMintMapController.prototype.addEventListener = function (eventName, callback) {
+    var _this = this;
+
+    if (!this.map) {
+      return;
+    }
+
+    var googleEventName = this.mapEvent.get(eventName) || this.mapUIEvent.get(eventName);
+
+    if (!googleEventName) {
+      console.warn("MapEventName ".concat(eventName, " is not supported"));
+      return;
+    } // console.log(`${eventName} add`);
+
+
+    var map = this.eventMap.get(eventName);
+
+    if (!map) {
+      map = new Map();
+      this.eventMap.set(eventName, map);
+    }
+
+    var wrappingCallback = function (e) {
+      if (eventName in _this.mapEvent) {
+        var bounds = _this.getCurrBounds();
+
+        var param = {
+          name: eventName,
+          mapType: 'google',
+          vendorEventName: googleEventName,
+          param: {
+            bounds: bounds,
+            center: bounds.getCenter(),
+            zoomLevel: _this.getZoomLevel()
+          }
+        };
+        callback(param);
+      } else if (eventName in _this.mapUIEvent) {
+        if (eventName.startsWith('DRAG')) console.log(eventName, e);
+        var position = null;
+
+        if (e) {
+          position = new MapTypes.Position(e.latLng.lat(), e.latLng.lng());
+          position.offset = new MapTypes.Offset(e.pixel.x, e.pixel.y);
+        } else {
+          position = _this.lastMousePosition;
+        }
+
+        var param = {
+          name: eventName,
+          mapType: 'google',
+          vendorEventName: googleEventName,
+          param: {
+            position: position,
+            offset: position === null || position === void 0 ? void 0 : position.offset
+          }
+        };
+        callback(param);
+      }
+    };
+
+    var googleEventListener = this.map.addListener(googleEventName, wrappingCallback);
+    map.set(callback, googleEventListener);
+  };
+
+  GoogleMintMapController.prototype.removeEventListener = function (eventName, callback) {
+    var map = this.eventMap.get(eventName);
+
+    if (map) {
+      var listenerMap = this.eventMap.get(eventName);
+
+      if (listenerMap) {
+        var googleEventListener = listenerMap.get(callback);
+
+        if (googleEventListener) {
+          // console.log(`${eventName} remove`);
+          google.maps.event.removeListener(googleEventListener);
+          listenerMap.delete(callback);
+        }
+      }
+    }
+  };
+
+  GoogleMintMapController.prototype.removeAllEventListener = function (eventName) {
+    var _this = this;
+
+    if (eventName) {
+      this.clearEventListener(eventName);
+    } else {
+      this.eventMap.forEach(function (_map, eventName) {
+        _this.clearEventListener(eventName);
+      });
+      this.eventMap.clear();
+    }
+  };
+
+  GoogleMintMapController.prototype.clearEventListener = function (eventName) {
+    var map = this.eventMap.get(eventName);
+
+    if (map) {
+      map.forEach(function (googleEventListener) {
+        // console.log(`${eventName} remove`);
+        google.maps.event.removeListener(googleEventListener);
+      });
+      this.eventMap.delete(eventName);
+    }
+  };
+
   return GoogleMintMapController;
 }(MintMapController.MintMapController);