@mint-ui/map 0.1.1-beta → 0.1.2-beta

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { __awaiter, __generator, __extends, __rest, __assign, __spreadArray } from 'tslib';
+import { __awaiter, __generator, __extends, __spreadArray, __assign, __rest } from 'tslib';
 import React, { createContext, useContext, useRef, useState, useEffect } from 'react';
 import classNames from 'classnames/bind';
 import styleInject from 'style-inject';
@@ -16,7 +16,7 @@ function MintMapProvider(_a) {
     value: controller
   }, children);
 }
-function MintMapProvider.useMintMapController() {
+function useMintMapController() {
   var controller = useContext(MintMapControllerContext);
 
   if (controller === null) {
@@ -38,7 +38,7 @@ function MintMapCore(_a) {
       _b = _a.visible,
       visible = _b === void 0 ? true : _b,
       children = _a.children;
-  var controller = MintMapProvider.useMintMapController();
+  var controller = useMintMapController();
   var elementRef = useRef(null);
 
   var _c = useState(false),
@@ -123,7 +123,7 @@ var PolygonCalculator = function () {
     }
 
     if (maxX && minX && maxY && minY) {
-      return new MintMap.Position(minX + (maxX - minX) / 2, minY + (maxY - minY) / 2);
+      return new Position(minX + (maxX - minX) / 2, minY + (maxY - minY) / 2);
     }
 
     throw new Error('Calculate Center Error!!!');
@@ -172,7 +172,7 @@ var PolygonCalculator = function () {
   return PolygonCalculator;
 }();
 
-var calculate.GeoCalulator = function () {
+var GeoCalulator = function () {
   function GeoCalulator() {}
 
   GeoCalulator.computeDistanceKiloMeter = function (pos1, pos2) {
@@ -228,7 +228,7 @@ var calculate.GeoCalulator = function () {
     var ratio = nextDistance / totalDistance;
     var latCalib = pos2.lat > pos1.lat ? 1 : -1;
     var lngCalib = pos2.lng > pos1.lng ? 1 : -1;
-    var newPos = new MintMap.Position(pos1.lat + (pos2.lat - pos1.lat) * ratio, pos1.lng + (pos2.lng - pos1.lng) * ratio);
+    var newPos = new Position(pos1.lat + (pos2.lat - pos1.lat) * ratio, pos1.lng + (pos2.lng - pos1.lng) * ratio);
 
     if ((latCalib === 1 && pos2.lat <= newPos.lat || latCalib === -1 && pos2.lat >= newPos.lat) && (lngCalib === 1 && pos2.lng <= newPos.lng || lngCalib === -1 && pos2.lng >= newPos.lng)) {
       newPos = pos2;
@@ -244,7 +244,922 @@ var calculate.GeoCalulator = function () {
   return GeoCalulator;
 }();
 
-var MintMap.Position = function () {
+var MintMapController = function () {
+  function MintMapController(props) {
+    this.mapApiLoaded = false;
+    this.mapInitialized = false;
+    this.mapProps = props;
+  }
+
+  MintMapController.prototype.getMap = function () {
+    return this.map;
+  };
+
+  MintMapController.prototype.getMapType = function () {
+    return this.type;
+  };
+
+  MintMapController.prototype.loadScript = function (url, id) {
+    return __awaiter(this, void 0, void 0, function () {
+      return __generator(this, function (_a) {
+        return [2, new Promise(function (resolve) {
+          if (id && document.getElementById(id)) {
+            console.log("already loaded script => ".concat(id));
+            resolve();
+            return;
+          }
+
+          var script = document.createElement('script');
+          script.src = url;
+          script.async = true;
+          script.defer = true;
+          script.addEventListener('load', function () {
+            resolve();
+          });
+          document.body.appendChild(script);
+        })];
+      });
+    });
+  };
+
+  MintMapController.prototype.buildUrl = function (baseUrl, param) {
+    var params = Object.entries(param).map(function (_a) {
+      var key = _a[0],
+          value = _a[1];
+      var temp = encodeURIComponent(Array.isArray(value) ? value.join(',') : value);
+      return "".concat(key, "=").concat(temp);
+    }).join('&');
+    return "".concat(baseUrl, "?").concat(params);
+  };
+
+  return MintMapController;
+}();
+
+function waiting(evaluation, timeoutSeconds) {
+  return __awaiter(this, void 0, void 0, function () {
+    var max;
+    return __generator(this, function (_a) {
+      max = (timeoutSeconds || 5) * 1000;
+      return [2, new Promise(function (resolve) {
+        var start = new Date().getTime();
+        var inter = setInterval(function () {
+          var time = new Date().getTime();
+
+          if (time - start > max) {
+            clearInterval(inter);
+            resolve(false);
+            return;
+          }
+
+          if (evaluation()) {
+            clearInterval(inter);
+            resolve(true);
+          }
+        }, 100);
+      })];
+    });
+  });
+}
+
+var NaverMintMapController = function (_super) {
+  __extends(NaverMintMapController, _super);
+
+  function NaverMintMapController(props) {
+    var _this = _super.call(this, props) || this;
+
+    _this.type = 'naver';
+    _this.map = null;
+    _this.scriptUrl = 'https://openapi.map.naver.com/openapi/v3/maps.js';
+    _this.scriptModules = ['drawing'];
+    _this.polylineEvents = ['mouseover', 'mouseout'];
+    _this.polygonEvents = ['mouseover', 'mouseout'];
+    _this.markerEvents = ['click', 'mouseover', 'mouseout'];
+    _this.dragStartPoint = [0, 0];
+    _this.dragged = false;
+    console.log("".concat(_this.type, " controller loadded"));
+    return _this;
+  }
+
+  NaverMintMapController.prototype.createPolyline = function (polyline) {
+    var _this = this;
+
+    var _a = polyline.options,
+        position = _a.position,
+        _b = _a.lineColor,
+        lineColor = _b === void 0 ? 'blue' : _b,
+        _c = _a.lineSize,
+        lineSize = _c === void 0 ? 1 : _c,
+        _d = _a.lineOpacity,
+        lineOpacity = _d === void 0 ? 1 : _d,
+        _e = _a.visible,
+        visible = _e === void 0 ? true : _e,
+        _f = _a.editable,
+        editable = _f === void 0 ? false : _f,
+        event = _a.event;
+
+    if (this.map && Array.isArray(position)) {
+      var path = position.map(function (elem) {
+        return Array.isArray(elem) ? new Position(elem[1], elem[0]) : elem;
+      });
+      var pol_1 = new naver.maps.Polyline({
+        map: this.map,
+        path: path,
+        strokeColor: lineColor,
+        strokeWeight: lineSize,
+        strokeOpacity: lineOpacity,
+        clickable: true,
+        visible: visible
+      });
+      editable && pol_1.setEditable(editable);
+      polyline.native = pol_1;
+      event && event.forEach(function (handler, key) {
+        if (_this.polylineEvents.includes(key)) {
+          naver.maps.Event.addListener(pol_1, key, handler);
+        }
+      });
+    }
+  };
+
+  NaverMintMapController.prototype.updatePolyline = function (polyline, options) {
+    if (polyline && polyline.native && polyline.native instanceof naver.maps.Polyline) {
+      var path = void 0;
+
+      if (Array.isArray(options.position)) {
+        path = options.position.map(function (elem) {
+          return Array.isArray(elem) ? new Position(elem[1], elem[0]) : elem;
+        });
+      }
+
+      polyline.native.setOptions({
+        path: path || polyline.native.getPath(),
+        visible: options.visible === undefined || options.visible,
+        strokeColor: options.lineColor,
+        strokeWeight: options.lineSize,
+        strokeOpacity: options.lineOpacity
+      });
+      options.editable !== undefined && polyline.native.setEditable(options.editable);
+    }
+  };
+
+  NaverMintMapController.prototype.createPolygon = function (polygon) {
+    var _this = this;
+
+    var _a = polygon.options,
+        position = _a.position,
+        innerPositions = _a.innerPositions,
+        _b = _a.lineColor,
+        lineColor = _b === void 0 ? 'green' : _b,
+        _c = _a.lineSize,
+        lineSize = _c === void 0 ? 1 : _c,
+        _d = _a.lineOpacity,
+        lineOpacity = _d === void 0 ? 1 : _d,
+        _e = _a.fillColor,
+        fillColor = _e === void 0 ? 'lightgreen' : _e,
+        _f = _a.fillOpacity,
+        fillOpacity = _f === void 0 ? 0.5 : _f,
+        _g = _a.visible,
+        visible = _g === void 0 ? true : _g;
+        _a.editable;
+        var event = _a.event;
+
+    if (this.map && Array.isArray(position)) {
+      var outLine = position.map(function (elem) {
+        return Array.isArray(elem) ? new Position(elem[1], elem[0]) : elem;
+      });
+      var paths = innerPositions ? __spreadArray([outLine], innerPositions, true) : [outLine];
+      var pol_2 = new naver.maps.Polygon({
+        map: this.map,
+        paths: paths,
+        strokeColor: lineColor,
+        strokeWeight: lineSize,
+        strokeOpacity: lineOpacity,
+        fillColor: fillColor,
+        fillOpacity: fillOpacity,
+        clickable: true,
+        visible: visible
+      });
+      polygon.native = pol_2;
+      event && event.forEach(function (handler, key) {
+        if (_this.polygonEvents.includes(key)) {
+          naver.maps.Event.addListener(pol_2, key, handler);
+        }
+      });
+    }
+  };
+
+  NaverMintMapController.prototype.updatePolygon = function (polygon, options) {
+    if (polygon && polygon.native && polygon.native instanceof naver.maps.Polygon) {
+      polygon.native.setOptions({
+        paths: polygon.native.getPaths(),
+        visible: options.visible === undefined || options.visible,
+        strokeColor: options.lineColor,
+        strokeWeight: options.lineSize,
+        strokeOpacity: options.lineOpacity,
+        fillColor: options.fillColor,
+        fillOpacity: options.fillOpacity
+      });
+      options.editable !== undefined && polygon.native.setEditable(options.editable);
+    }
+  };
+
+  NaverMintMapController.prototype.createMarker = function (marker) {
+    var _this = this;
+
+    var _a;
+
+    if (this.map) {
+      var options = {
+        map: this.map,
+        position: marker.options.position,
+        visible: marker.options.visible === undefined || marker.options.visible
+      };
+      marker.element && (options.icon = {
+        content: marker.element,
+        anchor: marker.options.anchor
+      });
+      var naverMarker_1 = new naver.maps.Marker(options);
+      marker.native = naverMarker_1;
+      ((_a = marker.options) === null || _a === void 0 ? void 0 : _a.event) && marker.options.event.forEach(function (handler, key) {
+        if (_this.markerEvents.includes(key)) {
+          naver.maps.Event.addListener(naverMarker_1, key, handler);
+        }
+      });
+    }
+  };
+
+  NaverMintMapController.prototype.updateMarker = function (marker, options) {
+    if (marker && marker.native && marker.native instanceof naver.maps.Marker) {
+      var map = marker.native.getMap();
+
+      if (map) {
+        var newOption = {
+          map: map,
+          position: options.position instanceof Position ? options.position : marker.native.getPosition(),
+          visible: options.visible === undefined || options.visible
+        };
+
+        if (options.anchor) {
+          newOption.icon = __assign(__assign({}, marker.native.getIcon()), {
+            anchor: options.anchor
+          });
+        }
+
+        marker.native.setOptions({
+          map: map,
+          position: options.position instanceof Position ? options.position : marker.native.getPosition(),
+          visible: options.visible === undefined || options.visible,
+          icon: __assign(__assign({}, marker.native.getIcon()), {
+            anchor: options.anchor
+          })
+        });
+      }
+    }
+  };
+
+  NaverMintMapController.prototype.getMaxZIndex = function (increment) {
+    if (increment === void 0) {
+      increment = 0;
+    }
+
+    if (this.map) {
+      var targetPane = this.map.getPanes().overlayImage;
+      var max = 0;
+
+      for (var i = 0; i < targetPane.childElementCount; i++) {
+        var elem = targetPane.children[i];
+
+        if (elem instanceof HTMLElement) {
+          var index = Number(elem.style.zIndex);
+
+          if (!isNaN(index) && index > max) {
+            max = index;
+          }
+        }
+      }
+
+      this.markerMaxZIndex = max + increment;
+      return this.markerMaxZIndex;
+    } else {
+      return this.markerMaxZIndex || 1;
+    }
+  };
+
+  NaverMintMapController.prototype.markerToTheTop = function (marker) {
+    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));
+      }
+    }
+  };
+
+  NaverMintMapController.prototype.clearDrawable = function (drawable) {
+    if (drawable && drawable.native && drawable.native instanceof naver.maps.OverlayView) {
+      drawable.native.setMap(null);
+      return true;
+    }
+
+    return false;
+  };
+
+  NaverMintMapController.prototype.isMapDragged = function () {
+    return this.dragged;
+  };
+
+  NaverMintMapController.prototype.setMapDragged = function (value) {
+    this.dragged = false;
+  };
+
+  NaverMintMapController.prototype.loadMapApi = function () {
+    return __awaiter(this, void 0, void 0, function () {
+      var _this = this;
+
+      return __generator(this, function (_a) {
+        return [2, new Promise(function (resolve) {
+          return __awaiter(_this, void 0, void 0, function () {
+            var callbackName, loaded, params, ok;
+            return __generator(this, function (_a) {
+              switch (_a.label) {
+                case 0:
+                  callbackName = "load".concat(new Date().getTime());
+                  loaded = false;
+
+                  window[callbackName] = function () {
+                    console.log('naver api loaded');
+                    loaded = true;
+                    delete window[callbackName];
+                  };
+
+                  params = {
+                    ncpClientId: this.mapProps.mapKey,
+                    submodules: this.scriptModules.join(','),
+                    callback: callbackName
+                  };
+                  return [4, this.loadScript(this.buildUrl(this.scriptUrl, params), 'naverscript')];
+
+                case 1:
+                  _a.sent();
+
+                  return [4, waiting(function () {
+                    return loaded;
+                  })];
+
+                case 2:
+                  ok = _a.sent();
+
+                  if (!ok) {
+                    throw new Error('naver script api load failed!!');
+                  }
+
+                  this.mapApiLoaded = true;
+                  resolve(true);
+                  console.log("".concat(this.type, " map script loaded"));
+                  return [2];
+              }
+            });
+          });
+        })];
+      });
+    });
+  };
+
+  NaverMintMapController.prototype.initializingMap = function (divElement) {
+    return __awaiter(this, void 0, void 0, function () {
+      var _this = this;
+
+      return __generator(this, function (_a) {
+        return [2, new Promise(function (resolve) {
+          return __awaiter(_this, void 0, void 0, function () {
+            var map;
+
+            var _this = this;
+
+            var _a, _b;
+
+            return __generator(this, function (_c) {
+              switch (_c.label) {
+                case 0:
+                  if (this.mapInitialized && this.map) {
+                    if (this.map.getElement() === divElement) {
+                      resolve(this.map);
+                      return [2];
+                    } else {
+                      this.map.destroy();
+                    }
+                  }
+
+                  if (!!this.mapApiLoaded) return [3, 2];
+                  return [4, this.loadMapApi()];
+
+                case 1:
+                  _c.sent();
+
+                  _c.label = 2;
+
+                case 2:
+                  map = new naver.maps.Map(divElement, {
+                    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,
+                    logoControl: false,
+                    mapDataControl: false,
+                    mapTypeControl: false,
+                    scaleControl: false
+                  });
+                  map.addListener('dragstart', function (e) {
+                    _this.dragStartPoint[0] = e.domEvent.clientX;
+                    _this.dragStartPoint[1] = e.domEvent.clientY;
+                  });
+                  map.addListener('dragend', function (e) {
+                    if (_this.dragStartPoint[0] === e.domEvent.clientX && _this.dragStartPoint[1] === e.domEvent.clientY) {
+                      _this.dragged = false;
+                    } else {
+                      _this.dragged = true;
+                    }
+
+                    _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());
+                  });
+                  map.addListener('zoom_changed', function () {
+                    _this.map && _this.mapProps.onZoomChanged && _this.mapProps.onZoomChanged(_this.map.getZoom());
+                    _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());
+                  });
+                  map.addListener('click', function (e) {
+                    console.log('map click', e);
+                    var pos = new Position(e.coord.y, e.coord.x);
+                    pos.offset = new Offset(e.offset.x, e.offset.y);
+                    _this.mapProps.onClick && _this.mapProps.onClick(pos);
+                  });
+                  this.map = map;
+                  this.mapInitialized = true;
+                  console.log("".concat(this.type, " map script initialized"), divElement);
+                  resolve(map);
+                  return [2];
+              }
+            });
+          });
+        })];
+      });
+    });
+  };
+
+  NaverMintMapController.prototype.destroyMap = function () {
+    console.log("".concat(this.type, " map destroyed"));
+
+    try {
+      this.map && this.map.destroy();
+    } catch (e) {
+      console.log('naver map destroy error', e);
+    }
+  };
+
+  NaverMintMapController.prototype.getCurrBounds = function () {
+    if (!this.map) {
+      throw new Error('Map is not initialized!!');
+    }
+
+    var bounds = this.map.getBounds();
+    return new Bounds(new Position(bounds.getMin().y, bounds.getMin().x), new Position(bounds.getMax().y, bounds.getMax().x));
+  };
+
+  NaverMintMapController.prototype.panningTo = function (targetCenter) {
+    var _a;
+
+    (_a = this.map) === null || _a === void 0 ? void 0 : _a.panTo(targetCenter, {
+      duration: 1000
+    });
+  };
+
+  NaverMintMapController.prototype.getZoomLevel = function () {
+    var _a;
+
+    return ((_a = this.map) === null || _a === void 0 ? void 0 : _a.getZoom()) || 13;
+  };
+
+  return NaverMintMapController;
+}(MintMapController);
+
+var GoogleMintMapController = function (_super) {
+  __extends(GoogleMintMapController, _super);
+
+  function GoogleMintMapController(props) {
+    var _this = _super.call(this, props) || this;
+
+    _this.type = 'google';
+    _this.map = null;
+    _this.scriptUrl = 'https://maps.googleapis.com/maps/api/js';
+    _this.scriptModules = ['marker'];
+    _this.polylineEvents = ['mouseover', 'mouseout'];
+    _this.polygonEvents = ['mouseover', 'mouseout'];
+    _this.markerEvents = ['click', 'mouseover', 'mouseout'];
+    _this.dragged = false;
+
+    _this.destroyMap = function () {
+      console.log("".concat(_this.type, " map destroy feature is not supported"));
+    };
+
+    console.log("".concat(_this.type, " controller loadded"));
+    return _this;
+  }
+
+  GoogleMintMapController.prototype.createPolyline = function (polyline) {
+    var _this = this;
+
+    var _a = polyline.options,
+        position = _a.position,
+        _b = _a.lineColor,
+        lineColor = _b === void 0 ? 'blue' : _b,
+        _c = _a.lineSize,
+        lineSize = _c === void 0 ? 1 : _c,
+        _d = _a.lineOpacity,
+        lineOpacity = _d === void 0 ? 1 : _d,
+        _e = _a.visible,
+        visible = _e === void 0 ? true : _e,
+        _f = _a.editable,
+        editable = _f === void 0 ? false : _f,
+        event = _a.event;
+
+    if (this.map && Array.isArray(position)) {
+      var path = position.map(function (elem) {
+        return Array.isArray(elem) ? new Position(elem[1], elem[0]) : elem;
+      });
+      var pol_1 = new google.maps.Polyline({
+        map: this.map,
+        path: path,
+        strokeColor: lineColor,
+        strokeWeight: lineSize,
+        strokeOpacity: lineOpacity,
+        clickable: true,
+        visible: visible,
+        editable: editable
+      });
+      polyline.native = pol_1;
+      event && event.forEach(function (handler, key) {
+        if (_this.polylineEvents.includes(key)) {
+          pol_1.addListener(key, handler);
+        }
+      });
+    }
+  };
+
+  GoogleMintMapController.prototype.updatePolyline = function (polyline, options) {
+    if (polyline && polyline.native && polyline.native instanceof google.maps.Polyline) {
+      var polylineOption = this.getValidOptions(options);
+
+      if (this.map && Array.isArray(options.position)) {
+        var path = options.position.map(function (elem) {
+          return Array.isArray(elem) ? new Position(elem[1], elem[0]) : elem;
+        });
+        polylineOption.path = path;
+      }
+
+      polyline.native.setOptions(polylineOption);
+    }
+  };
+
+  GoogleMintMapController.prototype.createPolygon = function (polygon) {
+    var _this = this;
+
+    var _a = polygon.options,
+        position = _a.position,
+        innerPositions = _a.innerPositions,
+        _b = _a.lineColor,
+        lineColor = _b === void 0 ? 'green' : _b,
+        _c = _a.lineSize,
+        lineSize = _c === void 0 ? 1 : _c,
+        _d = _a.lineOpacity,
+        lineOpacity = _d === void 0 ? 1 : _d,
+        _e = _a.fillColor,
+        fillColor = _e === void 0 ? 'lightgreen' : _e,
+        _f = _a.fillOpacity,
+        fillOpacity = _f === void 0 ? 0.5 : _f,
+        _g = _a.visible,
+        visible = _g === void 0 ? true : _g,
+        _h = _a.editable,
+        editable = _h === void 0 ? false : _h,
+        event = _a.event;
+
+    if (this.map && Array.isArray(position)) {
+      var outLine = position.map(function (elem) {
+        return Array.isArray(elem) ? new Position(elem[1], elem[0]) : elem;
+      });
+      var paths = innerPositions ? __spreadArray([outLine], innerPositions, true) : [outLine];
+      var pol_2 = new google.maps.Polygon({
+        map: this.map,
+        paths: paths,
+        strokeColor: lineColor,
+        strokeWeight: lineSize,
+        strokeOpacity: lineOpacity,
+        fillColor: fillColor,
+        fillOpacity: fillOpacity,
+        clickable: true,
+        visible: visible,
+        editable: editable
+      });
+      polygon.native = pol_2;
+      event && event.forEach(function (handler, key) {
+        if (_this.polygonEvents.includes(key)) {
+          pol_2.addListener(key, handler);
+        }
+      });
+    }
+  };
+
+  GoogleMintMapController.prototype.updatePolygon = function (polygon, options) {
+    if (polygon && polygon.native && polygon.native instanceof google.maps.Polygon) {
+      var polygonOption = this.getValidOptions(options);
+      polygon.native.setOptions(polygonOption);
+    }
+  };
+
+  GoogleMintMapController.prototype.getValidOptions = function (options) {
+    var target = {};
+
+    for (var _i = 0, _a = Object.getOwnPropertyNames(options); _i < _a.length; _i++) {
+      var name_1 = _a[_i];
+
+      if (options[name_1] !== undefined) {
+        target[name_1] = options[name_1];
+      }
+    }
+
+    return target;
+  };
+
+  GoogleMintMapController.prototype.createMarker = function (marker) {
+    var _this = this;
+
+    var _a;
+
+    if (this.map) {
+      var googleMarker_1;
+
+      if (marker.element) {
+        var options = {
+          map: this.map,
+          position: marker.options.position
+        };
+        options.content = marker.element;
+        googleMarker_1 = new google.maps.marker.AdvancedMarkerView(options);
+      } else {
+        var options = {
+          map: this.map,
+          position: marker.options.position,
+          visible: marker.options.visible === undefined || marker.options.visible,
+          anchorPoint: marker.options.anchor
+        };
+        googleMarker_1 = new google.maps.Marker(options);
+      }
+
+      marker.native = googleMarker_1;
+      ((_a = marker.options) === null || _a === void 0 ? void 0 : _a.event) && marker.options.event.forEach(function (handler, key) {
+        if (_this.markerEvents.includes(key)) {
+          googleMarker_1.addListener(key, handler);
+        }
+      });
+    }
+  };
+
+  GoogleMintMapController.prototype.updateMarker = function (marker, options) {
+    var _a, _b;
+
+    if (marker && marker.native) {
+      if (marker.native instanceof google.maps.Marker) {
+        var map = marker.native.getMap();
+
+        if (map) {
+          marker.native.setOptions({
+            map: map,
+            position: options.position instanceof Position ? options.position : marker.native.getPosition(),
+            visible: options.visible === undefined || options.visible
+          });
+        }
+      } else if (marker.native instanceof google.maps.marker.AdvancedMarkerView) {
+        if (options.visible !== undefined && marker.native.element) {
+          marker.native.element.style.visibility = options.visible ? 'visible' : 'hidden';
+        }
+
+        if (options.position instanceof 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;
+        }
+      }
+    }
+  };
+
+  GoogleMintMapController.prototype.getMaxZIndex = function (increment, parent) {
+    if (increment === void 0) {
+      increment = 0;
+    }
+
+    if (this.map) {
+      var targetPane = parent;
+      var max = 0;
+
+      for (var i = 0; i < targetPane.childElementCount; i++) {
+        var elem = targetPane.children[i];
+
+        if (elem instanceof HTMLElement) {
+          var index = Number(elem.style.zIndex);
+
+          if (!isNaN(index) && index > max) {
+            max = index;
+          }
+        }
+      }
+
+      this.markerMaxZIndex = max + increment;
+      return this.markerMaxZIndex;
+    } else {
+      return this.markerMaxZIndex || 1;
+    }
+  };
+
+  GoogleMintMapController.prototype.markerToTheTop = function (marker) {
+    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));
+      }
+    }
+  };
+
+  GoogleMintMapController.prototype.clearDrawable = function (drawable) {
+    if (drawable && drawable.native) {
+      if (drawable.native instanceof google.maps.Marker || drawable.native instanceof google.maps.Polygon || drawable.native instanceof google.maps.Polyline) {
+        drawable.native.setMap(null);
+        return true;
+      } else if (drawable.native instanceof google.maps.marker.AdvancedMarkerView) {
+        drawable.native.map = null;
+        return true;
+      }
+    }
+
+    return false;
+  };
+
+  GoogleMintMapController.prototype.isMapDragged = function () {
+    return this.dragged;
+  };
+
+  GoogleMintMapController.prototype.setMapDragged = function (value) {
+    this.dragged = false;
+  };
+
+  GoogleMintMapController.prototype.loadMapApi = function () {
+    return __awaiter(this, void 0, void 0, function () {
+      var _this = this;
+
+      return __generator(this, function (_a) {
+        return [2, new Promise(function (resolve) {
+          return __awaiter(_this, void 0, void 0, function () {
+            var callbackName, loaded, params, ok;
+            return __generator(this, function (_a) {
+              switch (_a.label) {
+                case 0:
+                  callbackName = "load".concat(new Date().getTime());
+                  loaded = false;
+
+                  window[callbackName] = function () {
+                    console.log('google api loaded');
+                    loaded = true;
+                    delete window[callbackName];
+                  };
+
+                  params = {
+                    key: this.mapProps.mapKey,
+                    libraries: this.scriptModules.join(','),
+                    v: 'beta',
+                    callback: callbackName
+                  };
+                  return [4, this.loadScript(this.buildUrl(this.scriptUrl, params), 'googlescript')];
+
+                case 1:
+                  _a.sent();
+
+                  return [4, waiting(function () {
+                    return loaded;
+                  })];
+
+                case 2:
+                  ok = _a.sent();
+
+                  if (!ok) {
+                    throw new Error('google script api load failed!!');
+                  }
+
+                  this.mapApiLoaded = true;
+                  resolve(true);
+                  console.log("".concat(this.type, " map script api loaded"));
+                  return [2];
+              }
+            });
+          });
+        })];
+      });
+    });
+  };
+
+  GoogleMintMapController.prototype.initializingMap = function (divElement) {
+    return __awaiter(this, void 0, void 0, function () {
+      var _this = this;
+
+      return __generator(this, function (_a) {
+        return [2, new Promise(function (resolve) {
+          return __awaiter(_this, void 0, void 0, function () {
+            var map;
+
+            var _this = this;
+
+            var _a, _b;
+
+            return __generator(this, function (_c) {
+              switch (_c.label) {
+                case 0:
+                  if (this.mapInitialized && this.map) {
+                    if (this.map.getDiv() === divElement) {
+                      resolve(this.map);
+                      return [2];
+                    }
+                  }
+
+                  if (!!this.mapApiLoaded) return [3, 2];
+                  return [4, this.loadMapApi()];
+
+                case 1:
+                  _c.sent();
+
+                  _c.label = 2;
+
+                case 2:
+                  map = new google.maps.Map(divElement, {
+                    mapId: this.mapProps.mapId,
+                    center: (_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center,
+                    maxZoom: 21,
+                    minZoom: 1,
+                    zoom: (_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel
+                  });
+                  map.addListener('dragend', function () {
+                    console.log('map dragend');
+                    _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());
+                  });
+                  map.addListener('zoom_changed', function () {
+                    console.log('zoom_changed');
+                    _this.map && _this.mapProps.onZoomChanged && _this.mapProps.onZoomChanged(_this.map.getZoom());
+                    _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());
+                  });
+                  map.addListener('click', function (e) {
+                    console.log('map click', e);
+                    var pos = new Position(e.latLng.lat(), e.latLng.lng());
+                    pos.offset = new Offset(e.pixel.x, e.pixel.y);
+                    _this.mapProps.onClick && _this.mapProps.onClick(pos);
+                  });
+                  this.map = map;
+                  this.mapInitialized = true;
+                  console.log("".concat(this.type, " map script initialized"), divElement);
+                  resolve(map);
+                  return [2];
+              }
+            });
+          });
+        })];
+      });
+    });
+  };
+
+  GoogleMintMapController.prototype.fromGoogleBounds = function (bounds) {
+    return new Bounds(new Position(bounds.getSouthWest().lat(), bounds.getSouthWest().lng()), new Position(bounds.getNorthEast().lat(), bounds.getNorthEast().lng()));
+  };
+
+  GoogleMintMapController.prototype.getCurrBounds = function () {
+    if (!this.map) {
+      throw new Error('Map is not initialized!!');
+    }
+
+    var bounds = this.map.getBounds();
+
+    if (bounds) {
+      return this.fromGoogleBounds(bounds);
+    } else {
+      throw new Error('bounds is not found!!!');
+    }
+  };
+
+  GoogleMintMapController.prototype.panningTo = function (targetCenter) {
+    var _a;
+
+    (_a = this.map) === null || _a === void 0 ? void 0 : _a.panTo(targetCenter);
+  };
+
+  GoogleMintMapController.prototype.getZoomLevel = function () {
+    var _a;
+
+    return ((_a = this.map) === null || _a === void 0 ? void 0 : _a.getZoom()) || 13;
+  };
+
+  return GoogleMintMapController;
+}(MintMapController);
+
+var Position = function () {
   function Position(lat, lng) {
     this.lat = 0;
     this.lng = 0;
@@ -252,7 +1167,57 @@ var MintMap.Position = function () {
     this.lng = lng;
   }
 
-  return Position;
+  return Position;
+}();
+
+var Bounds = function () {
+  function Bounds(nw, se) {
+    this.nw = nw;
+    this.se = se;
+  }
+
+  Bounds.prototype.getCenter = function () {
+    return new Position(this.nw.lat + (this.se.lat - this.nw.lat) / 2, this.nw.lng + (this.se.lng - this.nw.lng) / 2);
+  };
+
+  Bounds.prototype.includes = function (positions) {
+    for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
+      var pos = positions_1[_i];
+
+      if (this.nw.lat > pos.lat || this.se.lat < pos.lat || this.nw.lng > pos.lng || this.se.lng < pos.lng) {
+        return false;
+      }
+    }
+
+    return true;
+  };
+
+  Bounds.prototype.includesOnlyOnePoint = function (positions) {
+    for (var _i = 0, positions_2 = positions; _i < positions_2.length; _i++) {
+      var pos = positions_2[_i];
+
+      if (!(this.nw.lat > pos.lat || this.se.lat < pos.lat || this.nw.lng > pos.lng || this.se.lng < pos.lng)) {
+        return true;
+      }
+    }
+
+    return false;
+  };
+
+  Bounds.prototype.intersects = function (positions) {
+    return PolygonCalculator.intersects([this.nw, this.se], positions);
+  };
+
+  return Bounds;
+}();
+
+var Offset = function () {
+  function Offset(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+
+  return Offset;
 }();
 
 var Drawable = function () {
@@ -261,7 +1226,7 @@ var Drawable = function () {
   return Drawable;
 }();
 
-var MintMap.Marker = function (_super) {
+var Marker = function (_super) {
   __extends(Marker, _super);
 
   function Marker(options) {
@@ -274,7 +1239,7 @@ var MintMap.Marker = function (_super) {
   return Marker;
 }(Drawable);
 
-var MintMap.Polyline = function (_super) {
+var Polyline = function (_super) {
   __extends(Polyline, _super);
 
   function Polyline(options) {
@@ -287,7 +1252,7 @@ var MintMap.Polyline = function (_super) {
   return Polyline;
 }(Drawable);
 
-var MintMap.Polygon = function (_super) {
+var Polygon = function (_super) {
   __extends(Polygon, _super);
 
   function Polygon(options) {
@@ -300,7 +1265,7 @@ var MintMap.Polygon = function (_super) {
   Polygon.prototype.getCenter = function () {
     if (Array.isArray(this.options.position) && this.options.position.length > 0) {
       var paths = this.options.position.map(function (elem) {
-        return elem instanceof MintMap.Position ? elem : new MintMap.Position(elem[0], elem[1]);
+        return elem instanceof Position ? elem : new Position(elem[0], elem[1]);
       });
       return PolygonCalculator.getCenter(paths);
     }
@@ -312,8 +1277,6 @@ var MintMap.Polygon = function (_super) {
 }(Drawable);
 var cn$1 = classNames.bind(styles$2);
 function MintMap(_a) {
-  var _this = this;
-
   var mapType = _a.mapType,
       children = _a.children,
       props = __rest(_a, ["mapType", "children"]);
@@ -325,29 +1288,19 @@ function MintMap(_a) {
   useEffect(function () {
     if (mapType && mapType.length > 0) {
       setController(undefined);
-
-      (function () {
-        return __awaiter(_this, void 0, void 0, function () {
-          var moduleName, controllerModule, newController;
-          return __generator(this, function (_a) {
-            switch (_a.label) {
-              case 0:
-                moduleName = getMapModulePrefix(mapType);
-                return [4, import("./".concat(mapType, "/").concat(moduleName, "MintMapController"))];
-
-              case 1:
-                controllerModule = _a.sent();
-                newController = new controllerModule.default(__assign({
-                  mapType: mapType
-                }, props));
-                newController.loadMapApi().then(function () {
-                  setController(newController);
-                });
-                return [2];
-            }
-          });
+      var newController_1 = mapType === 'naver' ? new NaverMintMapController(__assign({
+        mapType: mapType
+      }, props)) : mapType === 'google' ? new GoogleMintMapController(__assign({
+        mapType: mapType
+      }, props)) : null;
+
+      if (newController_1) {
+        newController_1.loadMapApi().then(function () {
+          setController(newController_1);
         });
-      })();
+      } else {
+        throw new Error("Not Supported Map type ".concat(mapType));
+      }
     } else {
       setController(undefined);
     }
@@ -405,130 +1358,6 @@ function PointLoading(_a) {
   }, "".concat(text, " ").concat(pointString)));
 }
 
-var getMapModulePrefix = function (mapType) {
-  return mapType.substring(0, 1).toUpperCase() + mapType.substring(1).toLowerCase();
-};
-
-var MintMapController = function () {
-  function MintMapController(props) {
-    this.mapApiLoaded = false;
-    this.mapInitialized = false;
-    this.mapProps = props;
-  }
-
-  MintMapController.prototype.getMap = function () {
-    return this.map;
-  };
-
-  MintMapController.prototype.getMapType = function () {
-    return this.type;
-  };
-
-  MintMapController.prototype.loadScript = function (url, id) {
-    return __awaiter(this, void 0, void 0, function () {
-      return __generator(this, function (_a) {
-        return [2, new Promise(function (resolve) {
-          if (id && document.getElementById(id)) {
-            console.log("already loaded script => ".concat(id));
-            resolve();
-            return;
-          }
-
-          var script = document.createElement('script');
-          script.src = url;
-          script.async = true;
-          script.defer = true;
-          script.addEventListener('load', function () {
-            resolve();
-          });
-          document.body.appendChild(script);
-        })];
-      });
-    });
-  };
-
-  MintMapController.prototype.buildUrl = function (baseUrl, param) {
-    var params = Object.entries(param).map(function (_a) {
-      var key = _a[0],
-          value = _a[1];
-      var temp = encodeURIComponent(Array.isArray(value) ? value.join(',') : value);
-      return "".concat(key, "=").concat(temp);
-    }).join('&');
-    return "".concat(baseUrl, "?").concat(params);
-  };
-
-  return MintMapController;
-}();
-
-var css_248z = ".MintMapWrapper-module_mint-map-control-wrapper__DDb4y {\n  position: absolute;\n  z-index: 101;\n}\n\n.MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV {\n  position: absolute;\n  z-index: 1;\n}";
-var styles = {"mint-map-control-wrapper":"MintMapWrapper-module_mint-map-control-wrapper__DDb4y","mint-map-overlay-wrapper":"MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV"};
-styleInject(css_248z);
-
-var cn = classNames.bind(styles);
-
-var getSizeString = function (size) {
-  return typeof size === 'string' ? size.replace(/ /g, '') : "".concat(size, "px");
-};
-
-var getAlignPosition = function (value, align) {
-  if (typeof value === 'string') {
-    var trimmed = value.replace(/ /g, '');
-    console.log('trimmed:', trimmed);
-    var isPercent = trimmed.endsWith('%');
-
-    if (!isPercent && !trimmed.endsWith('px')) {
-      throw new Error("Size [".concat(value, "] is not valid string value."));
-    }
-
-    var numberPart = isPercent ? trimmed.substring(0, trimmed.length - 2) : trimmed.substring(0, trimmed.length - 3);
-    var unit = isPercent ? '%' : 'px';
-    var numberValue = Number(numberPart);
-
-    if (isNaN(numberValue)) {
-      throw new Error("Size [".concat(value, "] is not valid % or pixel number value."));
-    }
-
-    if (align === 'center') {
-      return "calc(50% - ".concat(numberValue / 2).concat(unit, ")");
-    } else if (align === 'right' || align === 'bottom') {
-      return "calc(100% - ".concat(numberValue).concat(unit, ")");
-    } else {
-      return '0px';
-    }
-  } else if (typeof value === 'number') {
-    if (align === 'center') {
-      return "calc(50% - ".concat(value / 2, "px)");
-    } else if (align === 'right' || align === 'bottom') {
-      return "calc(100% - ".concat(value, "px)");
-    } else {
-      return '0px';
-    }
-  }
-
-  throw new Error("Size [".concat(value, "] is not valid. (Should be % or pixel number)"));
-};
-
-function MapControlWrapper(_a) {
-  var _b = _a.width,
-      width = _b === void 0 ? 100 : _b,
-      _c = _a.height,
-      height = _c === void 0 ? 40 : _c,
-      _d = _a.positionHorizontal,
-      positionHorizontal = _d === void 0 ? 'left' : _d,
-      _e = _a.positionVertical,
-      positionVertical = _e === void 0 ? 'top' : _e,
-      children = _a.children;
-  return React.createElement("div", {
-    className: cn('mint-map-control-wrapper'),
-    style: {
-      width: getSizeString(width),
-      height: getSizeString(height),
-      left: getAlignPosition(width, positionHorizontal),
-      top: getAlignPosition(height, positionVertical)
-    }
-  }, children);
-}
-
 var AnimationPlayer = function () {
   function AnimationPlayer(drawFunction, fps) {
     this.prevtime = 0;
@@ -621,7 +1450,7 @@ function useMarkerMoving(_a) {
       velocity = _h === void 0 ? 10 : _h,
       onMovingStart = _a.onMovingStart,
       onMovingEnd = _a.onMovingEnd;
-  var controller = MintMapProvider.useMintMapController();
+  var controller = useMintMapController();
   useEffect(function () {
     contextRef.current && (contextRef.current.velocityKmh = velocity);
   }, [velocity]);
@@ -650,7 +1479,7 @@ function useMarkerMoving(_a) {
         context_1.elapsedTimeMs = frameGapTime;
 
         while (true) {
-          calculate.GeoCalulator.computeNextPositionAndDistances(context_1);
+          GeoCalulator.computeNextPositionAndDistances(context_1);
 
           if (context_1.nextPos === context_1.pos2) {
             if (currTargetIndex_1 === startPositionIndex) {
@@ -746,7 +1575,7 @@ function MapMarkerWrapper(_a) {
       children = _a.children,
       options = __rest(_a, ["startAnimationClassName", "endAnimationClassName", "topOnClick", "topOnHover", "movingAnimation", "children"]);
 
-  var controller = MintMapProvider.useMintMapController();
+  var controller = useMintMapController();
   var divRef = useRef(document.createElement('div'));
   var divElement = divRef.current;
   var divCloneRef = useRef();
@@ -842,7 +1671,7 @@ function MapMarkerWrapper(_a) {
         controller.updateMarker(markerRef.current, options);
         offsetCalibration(controller.getMapType(), divElement, options);
       } else {
-        markerRef.current = new MintMap.Marker(options);
+        markerRef.current = new Marker(options);
         markerRef.current.element = divElement;
         controller.createMarker(markerRef.current);
         offsetCalibration(controller.getMapType(), divElement, options);
@@ -886,7 +1715,7 @@ function MapPolygonWrapper(_a) {
   var children = _a.children,
       options = __rest(_a, ["children"]);
 
-  var controller = MintMapProvider.useMintMapController();
+  var controller = useMintMapController();
   useEffect(function () {
     return function () {
       if (polygonRef.current) {
@@ -900,7 +1729,7 @@ function MapPolygonWrapper(_a) {
       if (polygonRef.current) {
         controller.updatePolygon(polygonRef.current, options);
       } else {
-        var polygon = new MintMap.Polygon(options);
+        var polygon = new Polygon(options);
         polygonRef.current = polygon;
         controller.createPolygon(polygon);
       }
@@ -909,33 +1738,6 @@ function MapPolygonWrapper(_a) {
   return React.createElement(React.Fragment, null, options && children);
 }
 
-function MapPolylineWrapper(_a) {
-  var children = _a.children,
-      options = __rest(_a, ["children"]);
-
-  var controller = MintMapProvider.useMintMapController();
-  useEffect(function () {
-    return function () {
-      if (polylineRef.current) {
-        console.log('polyline cleared', controller.clearDrawable(polylineRef.current));
-      }
-    };
-  }, []);
-  var polylineRef = useRef();
-  useEffect(function () {
-    if (options) {
-      if (polylineRef.current) {
-        controller.updatePolyline(polylineRef.current, options);
-      } else {
-        var polyline = new MintMap.Polyline(options);
-        polylineRef.current = polyline;
-        controller.createPolyline(polyline);
-      }
-    }
-  }, [options]);
-  return React.createElement(React.Fragment, null, options && children);
-}
-
 function getMaxLat(items) {
   var max;
 
@@ -1004,12 +1806,12 @@ function MapBuildingProjection(props) {
       position: basePolygonPath
     };
     var height = numberOfFloor * heightOfFloor;
-    var projectionHeight = calculate.GeoCalulator.convertMeterToLatitudeValue(height);
+    var projectionHeight = GeoCalulator.convertMeterToLatitudeValue(height);
     var roofPaths = [];
 
     for (var _i = 0, basePolygonPath_1 = basePolygonPath; _i < basePolygonPath_1.length; _i++) {
       var pos = basePolygonPath_1[_i];
-      roofPaths.push(new MintMap.Position(pos.lat + projectionHeight, pos.lng));
+      roofPaths.push(new Position(pos.lat + projectionHeight, pos.lng));
     }
 
     roofPolygon.current = {
@@ -1041,7 +1843,7 @@ function MapBuildingProjection(props) {
       var minLng = getLngMinMax(minLngPos.position, false);
       var mid = minLng.lng + (maxLng.lng - minLng.lng) / 2;
       titlePosition.current = {
-        position: new MintMap.Position(maxPos.lat, mid)
+        position: new Position(maxPos.lat, mid)
       };
     } else {
       titlePosition.current = undefined;
@@ -1093,4 +1895,100 @@ function MapBuildingProjection(props) {
   }, "".concat(title, " (").concat(numberOfFloor, "\uCE35)")))));
 }
 
-export { MapBuildingProjection, MapControlWrapper, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, MintMap, MintMapController, MintMapProvider };
+var css_248z = ".MintMapWrapper-module_mint-map-control-wrapper__DDb4y {\n  position: absolute;\n  z-index: 101;\n}\n\n.MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV {\n  position: absolute;\n  z-index: 1;\n}";
+var styles = {"mint-map-control-wrapper":"MintMapWrapper-module_mint-map-control-wrapper__DDb4y","mint-map-overlay-wrapper":"MintMapWrapper-module_mint-map-overlay-wrapper__Jn4wV"};
+styleInject(css_248z);
+
+var cn = classNames.bind(styles);
+
+var getSizeString = function (size) {
+  return typeof size === 'string' ? size.replace(/ /g, '') : "".concat(size, "px");
+};
+
+var getAlignPosition = function (value, align) {
+  if (typeof value === 'string') {
+    var trimmed = value.replace(/ /g, '');
+    console.log('trimmed:', trimmed);
+    var isPercent = trimmed.endsWith('%');
+
+    if (!isPercent && !trimmed.endsWith('px')) {
+      throw new Error("Size [".concat(value, "] is not valid string value."));
+    }
+
+    var numberPart = isPercent ? trimmed.substring(0, trimmed.length - 2) : trimmed.substring(0, trimmed.length - 3);
+    var unit = isPercent ? '%' : 'px';
+    var numberValue = Number(numberPart);
+
+    if (isNaN(numberValue)) {
+      throw new Error("Size [".concat(value, "] is not valid % or pixel number value."));
+    }
+
+    if (align === 'center') {
+      return "calc(50% - ".concat(numberValue / 2).concat(unit, ")");
+    } else if (align === 'right' || align === 'bottom') {
+      return "calc(100% - ".concat(numberValue).concat(unit, ")");
+    } else {
+      return '0px';
+    }
+  } else if (typeof value === 'number') {
+    if (align === 'center') {
+      return "calc(50% - ".concat(value / 2, "px)");
+    } else if (align === 'right' || align === 'bottom') {
+      return "calc(100% - ".concat(value, "px)");
+    } else {
+      return '0px';
+    }
+  }
+
+  throw new Error("Size [".concat(value, "] is not valid. (Should be % or pixel number)"));
+};
+
+function MapControlWrapper(_a) {
+  var _b = _a.width,
+      width = _b === void 0 ? 100 : _b,
+      _c = _a.height,
+      height = _c === void 0 ? 40 : _c,
+      _d = _a.positionHorizontal,
+      positionHorizontal = _d === void 0 ? 'left' : _d,
+      _e = _a.positionVertical,
+      positionVertical = _e === void 0 ? 'top' : _e,
+      children = _a.children;
+  return React.createElement("div", {
+    className: cn('mint-map-control-wrapper'),
+    style: {
+      width: getSizeString(width),
+      height: getSizeString(height),
+      left: getAlignPosition(width, positionHorizontal),
+      top: getAlignPosition(height, positionVertical)
+    }
+  }, children);
+}
+
+function MapPolylineWrapper(_a) {
+  var children = _a.children,
+      options = __rest(_a, ["children"]);
+
+  var controller = useMintMapController();
+  useEffect(function () {
+    return function () {
+      if (polylineRef.current) {
+        console.log('polyline cleared', controller.clearDrawable(polylineRef.current));
+      }
+    };
+  }, []);
+  var polylineRef = useRef();
+  useEffect(function () {
+    if (options) {
+      if (polylineRef.current) {
+        controller.updatePolyline(polylineRef.current, options);
+      } else {
+        var polyline = new Polyline(options);
+        polylineRef.current = polyline;
+        controller.createPolyline(polyline);
+      }
+    }
+  }, [options]);
+  return React.createElement(React.Fragment, null, options && children);
+}
+
+export { AnimationPlayer, Bounds, Drawable, GeoCalulator, GoogleMintMapController, MapBuildingProjection, MapControlWrapper, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, Marker, MintMap, MintMapController, MintMapCore, MintMapProvider, NaverMintMapController, Offset, Polygon, PolygonCalculator, Polyline, Position, useMarkerMoving, useMintMapController, waiting };