@mint-ui/map 0.3.4-beta → 0.3.6-beta

package/dist/components/mint-map/MintMap.d.ts

@@ -10,9 +10,14 @@ export interface MintMapProps extends MintMapEvents {
     mapId?: string;
     base?: BaseProps;
     visible?: boolean;
+    center?: Position;
+    zoomLevel?: number;
+    draggable?: boolean;
+    keyboardShortcuts?: boolean;
     markerCache?: boolean;
     markerCachePoolSize?: number;
     boundsChangeThrottlingTime?: number;
+    mapLoadingComponent?: () => JSX.Element;
 }
 export interface MintMapEvents {
     onBoundsChanged?: (bounds: Bounds) => void;
@@ -26,6 +31,7 @@ export declare class Position {
     lng: number;
     offset?: Offset;
     constructor(lat: number, lng: number);
+    static equals(pos1: Position, pos2: Position): boolean;
 }
 export declare class Bounds {
     nw: Position;
@@ -66,6 +72,7 @@ export declare abstract class Drawable {
 }
 export interface MarkerOptions extends DrawableOptions {
     anchor?: Offset;
+    zIndex?: number;
 }
 export declare class Marker extends Drawable {
     options: MarkerOptions;
@@ -92,4 +99,4 @@ export declare class Polygon extends Drawable {
     constructor(options: PolygonOptions);
     getCenter(): Position;
 }
-export declare function MintMap({ mapType, children, base, ...props }: PropsWithChildren<MintMapProps>): JSX.Element;
+export declare function MintMap({ mapLoadingComponent, mapType, children, base, ...props }: PropsWithChildren<MintMapProps>): JSX.Element;

package/dist/components/mint-map/MintMap.js

@@ -25,6 +25,10 @@ var Position = function () {
     this.lng = lng;
   }
 
+  Position.equals = function (pos1, pos2) {
+    return pos1.lat === pos2.lat && pos1.lng === pos2.lng;
+  };
+
   return Position;
 }();
 
@@ -189,19 +193,25 @@ var DEFAULT_CENTER = {
   lng: 127.0448698
 };
 function MintMap(_a) {
-  var mapType = _a.mapType,
+  var mapLoadingComponent = _a.mapLoadingComponent,
+      mapType = _a.mapType,
       children = _a.children,
       _b = _a.base,
       base = _b === void 0 ? {
     center: DEFAULT_CENTER,
     zoomLevel: 12
   } : _b,
-      props = tslib.__rest(_a, ["mapType", "children", "base"]);
+      props = tslib.__rest(_a, ["mapLoadingComponent", "mapType", "children", "base"]);
 
   var _c = React.useState(),
       controller = _c[0],
       setController = _c[1];
 
+  var loading = React.useMemo(function () {
+    return mapLoadingComponent ? mapLoadingComponent() : React__default["default"].createElement(PointLoading, {
+      text: "Loading"
+    });
+  }, [mapLoadingComponent]);
   React.useEffect(function () {
     if (mapType && mapType.length > 0) {
       setController(undefined);
@@ -232,9 +242,7 @@ function MintMap(_a) {
     mapType: mapType
   }, props, {
     base: base
-  }), children)) : React__default["default"].createElement(PointLoading, {
-    text: "Loading"
-  }));
+  }), children)) : React__default["default"].createElement(React__default["default"].Fragment, null, loading));
 }
 
 function PointLoading(_a) {

package/dist/components/mint-map/core/MintMapController.d.ts

@@ -10,12 +10,15 @@ export declare abstract class MintMapController {
     abstract panningTo(targetCenter: Position): void;
     abstract getZoomLevel(): number;
     abstract setZoomLevel(zoom: number): void;
+    abstract getCenter(): Position;
+    abstract setCenter(position: Position): void;
     abstract createMarker(marker: Marker): void;
     abstract updateMarker(marker: Marker, options: MarkerOptions): void;
     abstract clearDrawable(drawable: Drawable): boolean;
     abstract markerToTheTop(marker: Marker): void;
     abstract isMapDragged(): boolean;
     abstract setMapDragged(value: boolean): void;
+    abstract setMarkerZIndex(marker: Marker, zIndex: number): void;
     abstract createPolyline(polyline: Polyline): void;
     abstract updatePolyline(polyline: Polyline, options: PolylineOptions): void;
     abstract createPolygon(polygon: Polygon): void;

package/dist/components/mint-map/core/MintMapCore.d.ts

@@ -1,3 +1,3 @@
 import { PropsWithChildren } from "react";
 import { MintMapProps } from "../MintMap";
-export declare function MintMapCore({ onLoad, visible, base, children }: PropsWithChildren<MintMapProps>): JSX.Element;
+export declare function MintMapCore({ onLoad, visible, zoomLevel, center, children }: PropsWithChildren<MintMapProps>): JSX.Element;

package/dist/components/mint-map/core/MintMapCore.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var classNames = require('classnames/bind');
 var React = require('react');
+var MintMap = require('../MintMap.js');
 var MintMapProvider = require('./provider/MintMapProvider.js');
 var MintMapCore_module = require('./MintMapCore.module.scss.js');
 
@@ -20,7 +21,8 @@ function MintMapCore(_a) {
   var onLoad = _a.onLoad,
       _b = _a.visible,
       visible = _b === void 0 ? true : _b,
-      base = _a.base,
+      zoomLevel = _a.zoomLevel,
+      center = _a.center,
       children = _a.children;
   var controller = MintMapProvider.useMintMapController();
   var elementRef = React.useRef(null);
@@ -59,21 +61,30 @@ function MintMapCore(_a) {
     };
   }, [controller, elementRef]);
   React.useEffect(function () {
-    if ((base === null || base === void 0 ? void 0 : base.zoomLevel) && controller && mapInitialized) {
+    if (zoomLevel && controller && mapInitialized) {
       var prevZoomLevel = controller === null || controller === void 0 ? void 0 : controller.getZoomLevel();
 
-      if (prevZoomLevel !== base.zoomLevel) {
-        controller === null || controller === void 0 ? void 0 : controller.setZoomLevel(base.zoomLevel);
+      if (prevZoomLevel !== zoomLevel) {
+        controller === null || controller === void 0 ? void 0 : controller.setZoomLevel(zoomLevel);
       }
     }
-  }, [base]);
-  return React__default["default"].createElement("div", {
-    className: cn('mint-map-root'),
-    style: {
-      visibility: visible ? 'inherit' : 'hidden'
+  }, [zoomLevel]);
+  React.useEffect(function () {
+    if (center && controller && mapInitialized) {
+      var prevCenter = controller.getCenter();
+
+      if (!MintMap.Position.equals(prevCenter, center)) {
+        controller === null || controller === void 0 ? void 0 : controller.setCenter(center);
+      }
     }
+  }, [center]);
+  return React__default["default"].createElement("div", {
+    className: cn('mint-map-root')
   }, mapInitialized && children, React__default["default"].createElement("div", {
     className: cn('mint-map-container'),
+    style: {
+      visibility: visible ? 'inherit' : 'hidden'
+    },
     ref: elementRef
   }));
 }

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

@@ -123,12 +123,20 @@ function MapMarkerWrapper(_a) {
       if (markerRef.current) {
         controller.updateMarker(markerRef.current, options);
         offsetCalibration(controller.getMapType(), divElement, options);
+
+        if (markerRef.current.options.zIndex !== undefined) {
+          controller.setMarkerZIndex(markerRef.current, markerRef.current.options.zIndex);
+        }
       } else {
         markerRef.current = new MintMap.Marker(options);
         markerRef.current.element = divElement;
         controller.createMarker(markerRef.current);
         offsetCalibration(controller.getMapType(), divElement, options);
 
+        if (markerRef.current.options.zIndex !== undefined) {
+          controller.setMarkerZIndex(markerRef.current, markerRef.current.options.zIndex);
+        }
+
         if (movingAnimation) {
           setMovingState(tslib.__assign(tslib.__assign({}, movingAnimation), {
             marker: markerRef.current

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

@@ -19,6 +19,7 @@ export declare class GoogleMintMapController extends MintMapController {
     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;
@@ -32,4 +33,6 @@ export declare class GoogleMintMapController extends MintMapController {
     panningTo(targetCenter: Position): void;
     getZoomLevel(): number;
     setZoomLevel(zoom: number): void;
+    getCenter(): Position;
+    setCenter(position: Position): void;
 }

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

@@ -259,12 +259,22 @@ var GoogleMintMapController = function (_super) {
     }
   };
 
-  GoogleMintMapController.prototype.markerToTheTop = function (marker) {
+  GoogleMintMapController.prototype.setMarkerZIndex = function (marker, zIndex) {
     if (this.map && marker.element && marker.element instanceof HTMLElement) {
       var parent_1 = marker.element.parentElement;
 
       if (parent_1) {
-        parent_1.style.zIndex = String(this.getMaxZIndex(1, parent_1));
+        parent_1.style.zIndex = String(zIndex);
+      }
+    }
+  };
+
+  GoogleMintMapController.prototype.markerToTheTop = function (marker) {
+    if (this.map && marker.element && marker.element instanceof HTMLElement) {
+      var parent_2 = marker.element.parentElement;
+
+      if (parent_2) {
+        this.setMarkerZIndex(marker, this.getMaxZIndex(1, parent_2));
       }
     }
   };
@@ -386,7 +396,8 @@ var GoogleMintMapController = function (_super) {
                     minZoom: (_c = this.mapProps.base) === null || _c === void 0 ? void 0 : _c.minZoomLevel,
                     zoom: (_d = this.mapProps.base) === null || _d === void 0 ? void 0 : _d.zoomLevel,
                     disableDefaultUI: true,
-                    gestureHandling: 'greedy',
+                    gestureHandling: this.mapProps.draggable === false ? 'none' : 'greedy',
+                    keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true,
                     clickableIcons: false
                   });
                   this.map = map;
@@ -458,6 +469,16 @@ var GoogleMintMapController = function (_super) {
     (_a = this.map) === null || _a === void 0 ? void 0 : _a.setZoom(zoom);
   };
 
+  GoogleMintMapController.prototype.getCenter = function () {
+    return this.getCurrBounds().getCenter();
+  };
+
+  GoogleMintMapController.prototype.setCenter = function (position) {
+    var _a;
+
+    (_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
+  };
+
   return GoogleMintMapController;
 }(MintMapController.MintMapController);
 

package/dist/components/mint-map/naver/NaverMintMapController.d.ts

@@ -21,6 +21,7 @@ export declare class NaverMintMapController extends MintMapController {
     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 dragStartPoint;
@@ -35,4 +36,6 @@ export declare class NaverMintMapController extends MintMapController {
     panningTo(targetCenter: Position): void;
     getZoomLevel(): number;
     setZoomLevel(zoom: number): void;
+    getCenter(): Position;
+    setCenter(position: Position): void;
 }

package/dist/components/mint-map/naver/NaverMintMapController.js

@@ -260,16 +260,20 @@ var NaverMintMapController = function (_super) {
     }
   };
 
-  NaverMintMapController.prototype.markerToTheTop = function (marker) {
+  NaverMintMapController.prototype.setMarkerZIndex = function (marker, zIndex) {
     if (this.map && marker.element && marker.element instanceof HTMLElement) {
       var parent_1 = marker.element.parentElement;
 
       if (parent_1) {
-        parent_1.style.zIndex = String(this.getMaxZIndex(1));
+        parent_1.style.zIndex = String(zIndex);
       }
     }
   };
 
+  NaverMintMapController.prototype.markerToTheTop = function (marker) {
+    this.setMarkerZIndex(marker, this.getMaxZIndex(1));
+  };
+
   NaverMintMapController.prototype.clearDrawable = function (drawable) {
     var _a;
 
@@ -390,6 +394,9 @@ var NaverMintMapController = function (_super) {
                   options = {
                     center: (_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center,
                     zoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel,
+                    draggable: this.mapProps.draggable === false ? false : true,
+                    scrollWheel: this.mapProps.draggable === false ? false : true,
+                    keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true,
                     logoControl: false,
                     mapDataControl: false,
                     mapTypeControl: false,
@@ -511,6 +518,16 @@ var NaverMintMapController = function (_super) {
     (_a = this.map) === null || _a === void 0 ? void 0 : _a.setZoom(zoom, true);
   };
 
+  NaverMintMapController.prototype.getCenter = function () {
+    return this.getCurrBounds().getCenter();
+  };
+
+  NaverMintMapController.prototype.setCenter = function (position) {
+    var _a;
+
+    (_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
+  };
+
   return NaverMintMapController;
 }(MintMapController.MintMapController);
 

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import { __awaiter, __generator, __extends, __assign, __rest, __spreadArray } from 'tslib';
-import React, { createContext, useContext, useRef, useState, useEffect } from 'react';
+import React, { createContext, useContext, useRef, useState, useEffect, useMemo } from 'react';
 import classNames from 'classnames/bind';
 import styleInject from 'style-inject';
 import { ObjectPool } from '@mint-ui/tools';
@@ -38,7 +38,8 @@ function MintMapCore(_a) {
   var onLoad = _a.onLoad,
       _b = _a.visible,
       visible = _b === void 0 ? true : _b,
-      base = _a.base,
+      zoomLevel = _a.zoomLevel,
+      center = _a.center,
       children = _a.children;
   var controller = useMintMapController();
   var elementRef = useRef(null);
@@ -77,21 +78,30 @@ function MintMapCore(_a) {
     };
   }, [controller, elementRef]);
   useEffect(function () {
-    if ((base === null || base === void 0 ? void 0 : base.zoomLevel) && controller && mapInitialized) {
+    if (zoomLevel && controller && mapInitialized) {
       var prevZoomLevel = controller === null || controller === void 0 ? void 0 : controller.getZoomLevel();
 
-      if (prevZoomLevel !== base.zoomLevel) {
-        controller === null || controller === void 0 ? void 0 : controller.setZoomLevel(base.zoomLevel);
+      if (prevZoomLevel !== zoomLevel) {
+        controller === null || controller === void 0 ? void 0 : controller.setZoomLevel(zoomLevel);
       }
     }
-  }, [base]);
-  return React.createElement("div", {
-    className: cn$2('mint-map-root'),
-    style: {
-      visibility: visible ? 'inherit' : 'hidden'
+  }, [zoomLevel]);
+  useEffect(function () {
+    if (center && controller && mapInitialized) {
+      var prevCenter = controller.getCenter();
+
+      if (!Position.equals(prevCenter, center)) {
+        controller === null || controller === void 0 ? void 0 : controller.setCenter(center);
+      }
     }
+  }, [center]);
+  return React.createElement("div", {
+    className: cn$2('mint-map-root')
   }, mapInitialized && children, React.createElement("div", {
     className: cn$2('mint-map-container'),
+    style: {
+      visibility: visible ? 'inherit' : 'hidden'
+    },
     ref: elementRef
   }));
 }
@@ -657,16 +667,20 @@ var NaverMintMapController = function (_super) {
     }
   };
 
-  NaverMintMapController.prototype.markerToTheTop = function (marker) {
+  NaverMintMapController.prototype.setMarkerZIndex = function (marker, zIndex) {
     if (this.map && marker.element && marker.element instanceof HTMLElement) {
       var parent_1 = marker.element.parentElement;
 
       if (parent_1) {
-        parent_1.style.zIndex = String(this.getMaxZIndex(1));
+        parent_1.style.zIndex = String(zIndex);
       }
     }
   };
 
+  NaverMintMapController.prototype.markerToTheTop = function (marker) {
+    this.setMarkerZIndex(marker, this.getMaxZIndex(1));
+  };
+
   NaverMintMapController.prototype.clearDrawable = function (drawable) {
     var _a;
 
@@ -787,6 +801,9 @@ var NaverMintMapController = function (_super) {
                   options = {
                     center: (_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center,
                     zoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel,
+                    draggable: this.mapProps.draggable === false ? false : true,
+                    scrollWheel: this.mapProps.draggable === false ? false : true,
+                    keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true,
                     logoControl: false,
                     mapDataControl: false,
                     mapTypeControl: false,
@@ -908,6 +925,16 @@ var NaverMintMapController = function (_super) {
     (_a = this.map) === null || _a === void 0 ? void 0 : _a.setZoom(zoom, true);
   };
 
+  NaverMintMapController.prototype.getCenter = function () {
+    return this.getCurrBounds().getCenter();
+  };
+
+  NaverMintMapController.prototype.setCenter = function (position) {
+    var _a;
+
+    (_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
+  };
+
   return NaverMintMapController;
 }(MintMapController);
 
@@ -1163,12 +1190,22 @@ var GoogleMintMapController = function (_super) {
     }
   };
 
-  GoogleMintMapController.prototype.markerToTheTop = function (marker) {
+  GoogleMintMapController.prototype.setMarkerZIndex = function (marker, zIndex) {
     if (this.map && marker.element && marker.element instanceof HTMLElement) {
       var parent_1 = marker.element.parentElement;
 
       if (parent_1) {
-        parent_1.style.zIndex = String(this.getMaxZIndex(1, parent_1));
+        parent_1.style.zIndex = String(zIndex);
+      }
+    }
+  };
+
+  GoogleMintMapController.prototype.markerToTheTop = function (marker) {
+    if (this.map && marker.element && marker.element instanceof HTMLElement) {
+      var parent_2 = marker.element.parentElement;
+
+      if (parent_2) {
+        this.setMarkerZIndex(marker, this.getMaxZIndex(1, parent_2));
       }
     }
   };
@@ -1290,7 +1327,8 @@ var GoogleMintMapController = function (_super) {
                     minZoom: (_c = this.mapProps.base) === null || _c === void 0 ? void 0 : _c.minZoomLevel,
                     zoom: (_d = this.mapProps.base) === null || _d === void 0 ? void 0 : _d.zoomLevel,
                     disableDefaultUI: true,
-                    gestureHandling: 'greedy',
+                    gestureHandling: this.mapProps.draggable === false ? 'none' : 'greedy',
+                    keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true,
                     clickableIcons: false
                   });
                   this.map = map;
@@ -1362,6 +1400,16 @@ var GoogleMintMapController = function (_super) {
     (_a = this.map) === null || _a === void 0 ? void 0 : _a.setZoom(zoom);
   };
 
+  GoogleMintMapController.prototype.getCenter = function () {
+    return this.getCurrBounds().getCenter();
+  };
+
+  GoogleMintMapController.prototype.setCenter = function (position) {
+    var _a;
+
+    (_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
+  };
+
   return GoogleMintMapController;
 }(MintMapController);
 
@@ -1373,6 +1421,10 @@ var Position = function () {
     this.lng = lng;
   }
 
+  Position.equals = function (pos1, pos2) {
+    return pos1.lat === pos2.lat && pos1.lng === pos2.lng;
+  };
+
   return Position;
 }();
 
@@ -1537,19 +1589,25 @@ var DEFAULT_CENTER = {
   lng: 127.0448698
 };
 function MintMap(_a) {
-  var mapType = _a.mapType,
+  var mapLoadingComponent = _a.mapLoadingComponent,
+      mapType = _a.mapType,
       children = _a.children,
       _b = _a.base,
       base = _b === void 0 ? {
     center: DEFAULT_CENTER,
     zoomLevel: 12
   } : _b,
-      props = __rest(_a, ["mapType", "children", "base"]);
+      props = __rest(_a, ["mapLoadingComponent", "mapType", "children", "base"]);
 
   var _c = useState(),
       controller = _c[0],
       setController = _c[1];
 
+  var loading = useMemo(function () {
+    return mapLoadingComponent ? mapLoadingComponent() : React.createElement(PointLoading, {
+      text: "Loading"
+    });
+  }, [mapLoadingComponent]);
   useEffect(function () {
     if (mapType && mapType.length > 0) {
       setController(undefined);
@@ -1580,9 +1638,7 @@ function MintMap(_a) {
     mapType: mapType
   }, props, {
     base: base
-  }), children)) : React.createElement(PointLoading, {
-    text: "Loading"
-  }));
+  }), children)) : React.createElement(React.Fragment, null, loading));
 }
 
 function PointLoading(_a) {
@@ -1943,12 +1999,20 @@ function MapMarkerWrapper(_a) {
       if (markerRef.current) {
         controller.updateMarker(markerRef.current, options);
         offsetCalibration(controller.getMapType(), divElement, options);
+
+        if (markerRef.current.options.zIndex !== undefined) {
+          controller.setMarkerZIndex(markerRef.current, markerRef.current.options.zIndex);
+        }
       } else {
         markerRef.current = new Marker(options);
         markerRef.current.element = divElement;
         controller.createMarker(markerRef.current);
         offsetCalibration(controller.getMapType(), divElement, options);
 
+        if (markerRef.current.options.zIndex !== undefined) {
+          controller.setMarkerZIndex(markerRef.current, markerRef.current.options.zIndex);
+        }
+
         if (movingAnimation) {
           setMovingState(__assign(__assign({}, movingAnimation), {
             marker: markerRef.current

package/dist/index.umd.js

@@ -43,7 +43,8 @@
     var onLoad = _a.onLoad,
         _b = _a.visible,
         visible = _b === void 0 ? true : _b,
-        base = _a.base,
+        zoomLevel = _a.zoomLevel,
+        center = _a.center,
         children = _a.children;
     var controller = useMintMapController();
     var elementRef = React.useRef(null);
@@ -82,21 +83,30 @@
       };
     }, [controller, elementRef]);
     React.useEffect(function () {
-      if ((base === null || base === void 0 ? void 0 : base.zoomLevel) && controller && mapInitialized) {
+      if (zoomLevel && controller && mapInitialized) {
         var prevZoomLevel = controller === null || controller === void 0 ? void 0 : controller.getZoomLevel();
 
-        if (prevZoomLevel !== base.zoomLevel) {
-          controller === null || controller === void 0 ? void 0 : controller.setZoomLevel(base.zoomLevel);
+        if (prevZoomLevel !== zoomLevel) {
+          controller === null || controller === void 0 ? void 0 : controller.setZoomLevel(zoomLevel);
         }
       }
-    }, [base]);
-    return React__default["default"].createElement("div", {
-      className: cn$2('mint-map-root'),
-      style: {
-        visibility: visible ? 'inherit' : 'hidden'
+    }, [zoomLevel]);
+    React.useEffect(function () {
+      if (center && controller && mapInitialized) {
+        var prevCenter = controller.getCenter();
+
+        if (!Position.equals(prevCenter, center)) {
+          controller === null || controller === void 0 ? void 0 : controller.setCenter(center);
+        }
       }
+    }, [center]);
+    return React__default["default"].createElement("div", {
+      className: cn$2('mint-map-root')
     }, mapInitialized && children, React__default["default"].createElement("div", {
       className: cn$2('mint-map-container'),
+      style: {
+        visibility: visible ? 'inherit' : 'hidden'
+      },
       ref: elementRef
     }));
   }
@@ -662,16 +672,20 @@
       }
     };
 
-    NaverMintMapController.prototype.markerToTheTop = function (marker) {
+    NaverMintMapController.prototype.setMarkerZIndex = function (marker, zIndex) {
       if (this.map && marker.element && marker.element instanceof HTMLElement) {
         var parent_1 = marker.element.parentElement;
 
         if (parent_1) {
-          parent_1.style.zIndex = String(this.getMaxZIndex(1));
+          parent_1.style.zIndex = String(zIndex);
         }
       }
     };
 
+    NaverMintMapController.prototype.markerToTheTop = function (marker) {
+      this.setMarkerZIndex(marker, this.getMaxZIndex(1));
+    };
+
     NaverMintMapController.prototype.clearDrawable = function (drawable) {
       var _a;
 
@@ -792,6 +806,9 @@
                     options = {
                       center: (_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center,
                       zoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel,
+                      draggable: this.mapProps.draggable === false ? false : true,
+                      scrollWheel: this.mapProps.draggable === false ? false : true,
+                      keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true,
                       logoControl: false,
                       mapDataControl: false,
                       mapTypeControl: false,
@@ -913,6 +930,16 @@
       (_a = this.map) === null || _a === void 0 ? void 0 : _a.setZoom(zoom, true);
     };
 
+    NaverMintMapController.prototype.getCenter = function () {
+      return this.getCurrBounds().getCenter();
+    };
+
+    NaverMintMapController.prototype.setCenter = function (position) {
+      var _a;
+
+      (_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
+    };
+
     return NaverMintMapController;
   }(MintMapController);
 
@@ -1168,12 +1195,22 @@
       }
     };
 
-    GoogleMintMapController.prototype.markerToTheTop = function (marker) {
+    GoogleMintMapController.prototype.setMarkerZIndex = function (marker, zIndex) {
       if (this.map && marker.element && marker.element instanceof HTMLElement) {
         var parent_1 = marker.element.parentElement;
 
         if (parent_1) {
-          parent_1.style.zIndex = String(this.getMaxZIndex(1, parent_1));
+          parent_1.style.zIndex = String(zIndex);
+        }
+      }
+    };
+
+    GoogleMintMapController.prototype.markerToTheTop = function (marker) {
+      if (this.map && marker.element && marker.element instanceof HTMLElement) {
+        var parent_2 = marker.element.parentElement;
+
+        if (parent_2) {
+          this.setMarkerZIndex(marker, this.getMaxZIndex(1, parent_2));
         }
       }
     };
@@ -1295,7 +1332,8 @@
                       minZoom: (_c = this.mapProps.base) === null || _c === void 0 ? void 0 : _c.minZoomLevel,
                       zoom: (_d = this.mapProps.base) === null || _d === void 0 ? void 0 : _d.zoomLevel,
                       disableDefaultUI: true,
-                      gestureHandling: 'greedy',
+                      gestureHandling: this.mapProps.draggable === false ? 'none' : 'greedy',
+                      keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true,
                       clickableIcons: false
                     });
                     this.map = map;
@@ -1367,6 +1405,16 @@
       (_a = this.map) === null || _a === void 0 ? void 0 : _a.setZoom(zoom);
     };
 
+    GoogleMintMapController.prototype.getCenter = function () {
+      return this.getCurrBounds().getCenter();
+    };
+
+    GoogleMintMapController.prototype.setCenter = function (position) {
+      var _a;
+
+      (_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
+    };
+
     return GoogleMintMapController;
   }(MintMapController);
 
@@ -1378,6 +1426,10 @@
       this.lng = lng;
     }
 
+    Position.equals = function (pos1, pos2) {
+      return pos1.lat === pos2.lat && pos1.lng === pos2.lng;
+    };
+
     return Position;
   }();
 
@@ -1542,19 +1594,25 @@
     lng: 127.0448698
   };
   function MintMap(_a) {
-    var mapType = _a.mapType,
+    var mapLoadingComponent = _a.mapLoadingComponent,
+        mapType = _a.mapType,
         children = _a.children,
         _b = _a.base,
         base = _b === void 0 ? {
       center: DEFAULT_CENTER,
       zoomLevel: 12
     } : _b,
-        props = tslib.__rest(_a, ["mapType", "children", "base"]);
+        props = tslib.__rest(_a, ["mapLoadingComponent", "mapType", "children", "base"]);
 
     var _c = React.useState(),
         controller = _c[0],
         setController = _c[1];
 
+    var loading = React.useMemo(function () {
+      return mapLoadingComponent ? mapLoadingComponent() : React__default["default"].createElement(PointLoading, {
+        text: "Loading"
+      });
+    }, [mapLoadingComponent]);
     React.useEffect(function () {
       if (mapType && mapType.length > 0) {
         setController(undefined);
@@ -1585,9 +1643,7 @@
       mapType: mapType
     }, props, {
       base: base
-    }), children)) : React__default["default"].createElement(PointLoading, {
-      text: "Loading"
-    }));
+    }), children)) : React__default["default"].createElement(React__default["default"].Fragment, null, loading));
   }
 
   function PointLoading(_a) {
@@ -1948,12 +2004,20 @@
         if (markerRef.current) {
           controller.updateMarker(markerRef.current, options);
           offsetCalibration(controller.getMapType(), divElement, options);
+
+          if (markerRef.current.options.zIndex !== undefined) {
+            controller.setMarkerZIndex(markerRef.current, markerRef.current.options.zIndex);
+          }
         } else {
           markerRef.current = new Marker(options);
           markerRef.current.element = divElement;
           controller.createMarker(markerRef.current);
           offsetCalibration(controller.getMapType(), divElement, options);
 
+          if (markerRef.current.options.zIndex !== undefined) {
+            controller.setMarkerZIndex(markerRef.current, markerRef.current.options.zIndex);
+          }
+
           if (movingAnimation) {
             setMovingState(tslib.__assign(tslib.__assign({}, movingAnimation), {
               marker: markerRef.current

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mint-ui/map",
-  "version": "0.3.4-beta",
+  "version": "0.3.6-beta",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",
   "browser": "./dist/index.umd.js",