@slorber/react-google-maps/dist/reactgooglemapsapi.esm.js

React.js Google Maps API integration

import React__default, { useContext, createContext, createElement, Fragment, PureComponent, createRef, useCallback, useState, useEffect, useRef, memo, Children, Component } from 'react';
import invariant from 'invariant';
import { Clusterer } from '@react-google-maps/marker-clusterer';
import { createPortal } from 'react-dom';

function _extends() {
  _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  return _extends.apply(this, arguments);
}

function _inheritsLoose(subClass, superClass) {
  subClass.prototype = Object.create(superClass.prototype);
  subClass.prototype.constructor = subClass;
  subClass.__proto__ = superClass;
}

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

var MapContext =
/*#__PURE__*/
createContext(null);
function useGoogleMap() {
  !!!useContext ? process.env.NODE_ENV !== "production" ? invariant(false, "useGoogleMap is React hook and requires React version 16.8+") : invariant(false) : void 0;
  var map = useContext(MapContext);
  !!!map ? process.env.NODE_ENV !== "production" ? invariant(false, "useGoogleMap needs a GoogleMap available up in the tree") : invariant(false) : void 0;
  return map;
}

var reduce = function reduce(obj, fn, acc) {
  return Object.keys(obj).reduce(function reducer(newAcc, key) {
    return fn(newAcc, obj[key], key);
  }, acc);
};

function forEach(obj, fn) {
  Object.keys(obj).forEach(function iterator(key) {
    return fn(obj[key], key);
  });
}

/* eslint-disable filenames/match-regex */
var applyUpdaterToNextProps = function applyUpdaterToNextProps(updaterMap, prevProps, nextProps, // eslint-disable-next-line @getify/proper-arrows/params
instance) {
  var map = {};

  var iter = function iter(fn, key) {
    var nextValue = nextProps[key];

    if (nextValue !== prevProps[key]) {
      map[key] = nextValue;
      fn(instance, nextValue);
    }
  };

  forEach(updaterMap, iter);
  return map;
};
function registerEvents(props, instance, eventMap) {
  var registeredList = reduce(eventMap, function reducer(acc, googleEventName, onEventName) {
    if (typeof props[onEventName] === "function") {
      acc.push(google.maps.event.addListener(instance, googleEventName, props[onEventName]));
    }

    return acc;
  }, []);
  return registeredList;
}

function unregisterEvent(registered) {
  google.maps.event.removeListener(registered);
}

function unregisterEvents(events) {
  if (events === void 0) {
    events = [];
  }

  events.map(unregisterEvent);
}
function applyUpdatersToPropsAndRegisterEvents(_ref) {
  var updaterMap = _ref.updaterMap,
      eventMap = _ref.eventMap,
      prevProps = _ref.prevProps,
      nextProps = _ref.nextProps,
      instance = _ref.instance;
  var registeredEvents = registerEvents(nextProps, instance, eventMap);
  applyUpdaterToNextProps(updaterMap, prevProps, nextProps, instance);
  return registeredEvents;
}

var eventMap = {
  onDblClick: "dblclick",
  onDragEnd: "dragend",
  onDragStart: "dragstart",
  onMapTypeIdChanged: "maptypeid_changed",
  onMouseMove: "mousemove",
  onMouseOut: "mouseout",
  onMouseOver: "mouseover",
  onMouseDown: "mousedown",
  onMouseUp: "mouseup",
  onRightClick: "rightclick",
  onTilesLoaded: "tilesloaded",
  onBoundsChanged: "bounds_changed",
  onCenterChanged: "center_changed",
  onClick: "click",
  onDrag: "drag",
  onHeadingChanged: "heading_changed",
  onIdle: "idle",
  onProjectionChanged: "projection_changed",
  onResize: "resize",
  onTiltChanged: "tilt_changed",
  onZoomChanged: "zoom_changed"
};
var updaterMap = {
  extraMapTypes: function extraMapTypes(map, extra) {
    extra.forEach(function forEachExtra(it, i) {
      map.mapTypes.set(String(i), it);
    });
  },
  center: function center(map, _center) {
    map.setCenter(_center);
  },
  clickableIcons: function clickableIcons(map, clickable) {
    map.setClickableIcons(clickable);
  },
  heading: function heading(map, _heading) {
    map.setHeading(_heading);
  },
  mapTypeId: function mapTypeId(map, _mapTypeId) {
    map.setMapTypeId(_mapTypeId);
  },
  options: function options(map, _options) {
    map.setOptions(_options);
  },
  streetView: function streetView(map, _streetView) {
    map.setStreetView(_streetView);
  },
  tilt: function tilt(map, _tilt) {
    map.setTilt(_tilt);
  },
  zoom: function zoom(map, _zoom) {
    map.setZoom(_zoom);
  }
};
var GoogleMap =
/*#__PURE__*/
function (_React$PureComponent) {
  _inheritsLoose(GoogleMap, _React$PureComponent);

  function GoogleMap() {
    var _this;

    _this = _React$PureComponent.apply(this, arguments) || this;
    _this.state = {
      map: null
    };
    _this.registeredEvents = [];
    _this.mapRef = null; // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name

    _this.getInstance = function () {
      return new google.maps.Map(_this.mapRef, _this.props.options);
    }; // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name


    _this.setMapCallback = function () {
      if (_this.state.map !== null) {
        if (_this.props.onLoad) {
          _this.props.onLoad(_this.state.map);
        }
      }
    };
    /* eslint-disable @getify/proper-arrows/name */

    /* eslint-disable @getify/proper-arrows/this */


    _this.getRef = function (ref) {
      _this.mapRef = ref;
    };

    return _this;
  }

  var _proto = GoogleMap.prototype;

  _proto.componentDidMount = function componentDidMount() {
    var map = this.getInstance();
    this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
      updaterMap: updaterMap,
      eventMap: eventMap,
      prevProps: {},
      nextProps: this.props,
      instance: map
    });

    function setMap() {
      return {
        map: map
      };
    }

    this.setState(setMap, this.setMapCallback);
  };

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    if (this.state.map !== null) {
      unregisterEvents(this.registeredEvents);
      this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
        updaterMap: updaterMap,
        eventMap: eventMap,
        prevProps: prevProps,
        nextProps: this.props,
        instance: this.state.map
      });
    }
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    if (this.state.map !== null) {
      if (this.props.onUnmount) {
        this.props.onUnmount(this.state.map);
      }

      unregisterEvents(this.registeredEvents);
    }
  };

  _proto.render = function render() {
    return createElement("div", {
      id: this.props.id,
      ref: this.getRef,
      style: this.props.mapContainerStyle,
      className: this.props.mapContainerClassName
    }, createElement(MapContext.Provider, {
      value: this.state.map
    }, this.state.map !== null ? this.props.children : createElement(Fragment, null)));
  };

  return GoogleMap;
}(PureComponent);

var isBrowser = typeof document !== "undefined";

var injectScript = function injectScript(_ref) {
  var url = _ref.url,
      id = _ref.id;

  if (!isBrowser) {
    return Promise.reject(new Error("document is undefined"));
  }

  return new Promise(function injectScriptCallback(resolve, reject) {
    if (document.getElementById(id)) {
      return resolve(id);
    }

    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url;
    script.id = id;
    script.async = true;

    script.onload = function onload() {
      resolve(id);
    };

    script.onerror = reject;
    document.head.appendChild(script);
  }) // eslint-disable-next-line @getify/proper-arrows/name
  ["catch"](function (err) {
    console.error('injectScript error: ', err);
  });
};

var isRobotoStyle = function isRobotoStyle(element) {
  // roboto font download
  if (element.href && element.href.indexOf("https://fonts.googleapis.com/css?family=Roboto") === 0) {
    return true;
  } // roboto style elements


  if (element.tagName.toLowerCase() === "style" && // @ts-ignore
  element.styleSheet && // @ts-ignore
  element.styleSheet.cssText && // @ts-ignore
  element.styleSheet.cssText.replace("\r\n", "").indexOf(".gm-style") === 0) {
    // @ts-ignore
    element.styleSheet.cssText = "";
    return true;
  } // roboto style elements for other browsers


  if (element.tagName.toLowerCase() === "style" && element.innerHTML && element.innerHTML.replace("\r\n", "").indexOf(".gm-style") === 0) {
    element.innerHTML = "";
    return true;
  } // when google tries to add empty style


  if (element.tagName.toLowerCase() === "style" && // @ts-ignore
  !element.styleSheet && !element.innerHTML) {
    return true;
  }

  return false;
}; // Preventing the Google Maps libary from downloading an extra font


var preventGoogleFonts = function preventGoogleFonts() {
  // we override these methods only for one particular head element
  // default methods for other elements are not affected
  var head = document.getElementsByTagName("head")[0];
  var trueInsertBefore = head.insertBefore.bind(head); // TODO: adding return before reflect solves the TS issue
  //@ts-ignore

  head.insertBefore = function insertBefore(newElement, referenceElement) {
    if (!isRobotoStyle(newElement)) {
      Reflect.apply(trueInsertBefore, head, [newElement, referenceElement]);
    }
  };

  var trueAppend = head.appendChild.bind(head); // TODO: adding return before reflect solves the TS issue
  //@ts-ignore

  head.appendChild = function appendChild(textNode) {
    if (!isRobotoStyle(textNode)) {
      Reflect.apply(trueAppend, head, [textNode]);
    }
  };
};

function makeLoadScriptUrl(_ref) {
  var googleMapsApiKey = _ref.googleMapsApiKey,
      googleMapsClientId = _ref.googleMapsClientId,
      _ref$version = _ref.version,
      version = _ref$version === void 0 ? 'weekly' : _ref$version,
      language = _ref.language,
      region = _ref.region,
      libraries = _ref.libraries;
  var params = [];
  !(googleMapsApiKey && googleMapsClientId || !(googleMapsApiKey && googleMapsClientId)) ? process.env.NODE_ENV !== "production" ? invariant(false, "You need to specify either googleMapsApiKey or googleMapsClientId for @react-google-maps/api load script to work. You cannot use both at the same time.") : invariant(false) : void 0;

  if (googleMapsApiKey) {
    params.push("key=" + googleMapsApiKey);
  } else if (googleMapsClientId) {
    params.push("client=" + googleMapsClientId);
  }

  if (version) {
    params.push("v=" + version);
  }

  if (language) {
    params.push("language=" + language);
  }

  if (region) {
    params.push("region=" + region);
  }

  if (libraries && libraries.length) {
    params.push("libraries=" + libraries.join(","));
  }

  return "https://maps.googleapis.com/maps/api/js?" + params.join('&');
}

var cleaningUp = false;
function DefaultLoadingElement() {
  return createElement("div", null, "Loading...");
}
var defaultLoadScriptProps = {
  id: 'script-loader',
  version: 'weekly'
};

var LoadScript =
/*#__PURE__*/
function (_React$PureComponent) {
  _inheritsLoose(LoadScript, _React$PureComponent);

  function LoadScript() {
    var _this;

    _this = _React$PureComponent.apply(this, arguments) || this;
    _this.check = createRef();
    _this.state = {
      loaded: false
    }; // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name

    _this.cleanupCallback = function () {
      //@ts-ignore
      delete window.google;

      _this.injectScript();
    }; // eslint-disable-next-line @getify/proper-arrows/name


    _this.isCleaningUp = function () {
      try {
        var promiseCallback = function promiseCallback(resolve) {
          if (!cleaningUp) {
            resolve();
          } else {
            if (isBrowser) {
              var timer = window.setInterval(function interval() {
                if (!cleaningUp) {
                  window.clearInterval(timer);
                  resolve();
                }
              }, 1);
            }
          }
        };

        return Promise.resolve(new Promise(promiseCallback));
      } catch (e) {
        return Promise.reject(e);
      }
    };

    _this.cleanup = function () {
      cleaningUp = true;
      var script = document.getElementById(_this.props.id);

      if (script && script.parentNode) {
        script.parentNode.removeChild(script);
      }

      Array.prototype.slice.call(document.getElementsByTagName("script")).filter(function filter(script) {
        return script.src.includes("maps.googleapis");
      }).forEach(function forEach(script) {
        if (script.parentNode) {
          script.parentNode.removeChild(script);
        }
      });
      Array.prototype.slice.call(document.getElementsByTagName("link")).filter(function filter(link) {
        return link.href === "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Google+Sans";
      }).forEach(function forEach(link) {
        if (link.parentNode) {
          link.parentNode.removeChild(link);
        }
      });
      Array.prototype.slice.call(document.getElementsByTagName("style")).filter(function filter(style) {
        return style.innerText !== undefined && style.innerText.length > 0 && style.innerText.includes(".gm-");
      }).forEach(function forEach(style) {
        if (style.parentNode) {
          style.parentNode.removeChild(style);
        }
      });
    }; // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name


    _this.injectScript = function () {
      if (_this.props.preventGoogleFontsLoading) {
        preventGoogleFonts();
      }

      !!!_this.props.id ? process.env.NODE_ENV !== "production" ? invariant(false, 'LoadScript requires "id" prop to be a string: %s', _this.props.id) : invariant(false) : void 0;
      var injectScriptOptions = {
        id: _this.props.id,
        url: makeLoadScriptUrl(_this.props)
      };
      injectScript(injectScriptOptions) // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name
      .then(function () {
        if (_this.props.onLoad) {
          _this.props.onLoad();
        }

        _this.setState(function setLoaded() {
          return {
            loaded: true
          };
        });
      }) // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name
      ["catch"](function (err) {
        if (_this.props.onError) {
          _this.props.onError(err);
        }

        console.error("\n          There has been an Error with loading Google Maps API script, please check that you provided correct google API key (" + (_this.props.googleMapsApiKey || '-') + ") or Client ID (" + (_this.props.googleMapsClientId || '-') + ") to <LoadScript />\n          Otherwise it is a Network issue.\n        ");
      });
    };

    return _this;
  }

  var _proto = LoadScript.prototype;

  _proto.componentDidMount = function componentDidMount() {
    if (isBrowser) {
      // @ts-ignore
      if (window.google && !cleaningUp) {
        console.error("google api is already presented");
        return;
      }

      this.isCleaningUp().then(this.injectScript)["catch"](function err(err) {
        console.error("Error at injecting script after cleaning up: ", err);
      });
    }
  };

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    if (this.props.libraries !== prevProps.libraries) {
      console.warn('Performance warning! Loadscript has been reloaded unintentionally! You should not pass `libraries` prop as new array. Please keep an array of libraries as static class property for Components and PureComponents, or just a const variable ounside of component, or somwhere in config files or ENV variables');
    }

    if (isBrowser && prevProps.language !== this.props.language) {
      this.cleanup(); // TODO: refactor to use gDSFP maybe... wait for hooks refactoring.
      // eslint-disable-next-line react/no-did-update-set-state

      this.setState(function setLoaded() {
        return {
          loaded: false
        };
      }, this.cleanupCallback);
    }
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    var _this2 = this;

    if (isBrowser) {
      this.cleanup(); // eslint-disable-next-line @getify/proper-arrows/this

      var timeoutCallback = function timeoutCallback() {
        if (!_this2.check.current) {
          //@ts-ignore
          delete window.google;
          cleaningUp = false;
        }
      };

      window.setTimeout(timeoutCallback, 1);

      if (this.props.onUnmount) {
        this.props.onUnmount();
      }
    }
  };

  _proto.render = function render() {
    return createElement(Fragment, null, createElement("div", {
      ref: this.check
    }), this.state.loaded ? this.props.children : this.props.loadingElement || createElement(DefaultLoadingElement, null));
  };

  return LoadScript;
}(PureComponent);

LoadScript.defaultProps = defaultLoadScriptProps;

/* eslint-disable filenames/match-regex */
var previouslyLoadedUrl;

var useIsMounted = function useIsMounted() {
  var isMountedRef = useRef(false);
  useEffect(function trackMountedState() {
    isMountedRef.current = true;
    return function () {
      isMountedRef.current = false;
    };
  }, []);
  return useCallback(function () {
    return isMountedRef.current;
  }, []);
};

function useLoadScript(_ref) {
  var _ref$id = _ref.id,
      id = _ref$id === void 0 ? defaultLoadScriptProps.id : _ref$id,
      _ref$version = _ref.version,
      version = _ref$version === void 0 ? defaultLoadScriptProps.version : _ref$version,
      googleMapsApiKey = _ref.googleMapsApiKey,
      googleMapsClientId = _ref.googleMapsClientId,
      language = _ref.language,
      region = _ref.region,
      libraries = _ref.libraries,
      preventGoogleFontsLoading = _ref.preventGoogleFontsLoading;
  var isMounted = useIsMounted();

  var _React$useState = useState(false),
      isLoaded = _React$useState[0],
      setLoaded = _React$useState[1];

  var _React$useState2 = useState(undefined),
      loadError = _React$useState2[0],
      setLoadError = _React$useState2[1];

  useEffect(function applyPreventGoogleFonts() {
    if (isBrowser && preventGoogleFontsLoading) {
      preventGoogleFonts();
    }
  }, [preventGoogleFontsLoading]);
  useEffect(function validateLoadedState() {
    if (isLoaded) {
      ! // @ts-ignore
      !!window.google ? process.env.NODE_ENV !== "production" ? invariant(false, "useLoadScript was marked as loaded, but window.google is not present. Something went wrong.") : invariant(false) : void 0;
    }
  }, [isLoaded]);
  var url = makeLoadScriptUrl({
    version: version,
    googleMapsApiKey: googleMapsApiKey,
    googleMapsClientId: googleMapsClientId,
    language: language,
    region: region,
    libraries: libraries
  });
  useEffect(function loadScriptAndModifyLoadedState() {
    if (!isBrowser) {
      return;
    }

    function resetStateIfMounted() {
      if (isMounted()) {
        setLoaded(false);
        setLoadError(undefined);
      }
    }

    function setLoadedIfMounted() {
      if (isMounted()) {
        setLoaded(true);
        previouslyLoadedUrl = url;
      }
    }

    if (window.google && previouslyLoadedUrl === url) {
      setLoadedIfMounted();
      return;
    }

    resetStateIfMounted();
    injectScript({
      id: id,
      url: url
    }).then(setLoadedIfMounted)["catch"](function handleInjectError(err) {
      if (isMounted()) {
        setLoadError(err);
      }

      console.warn("\n        There has been an Error with loading Google Maps API script, please check that you provided correct google API key (" + (googleMapsApiKey || '-') + ") or Client ID (" + (googleMapsClientId || '-') + ")\n        Otherwise it is a Network issue.\n      ");
      console.error(err);
    });
  }, [id, url]);
  var prevLibraries = useRef();
  useEffect(function checkPerformance() {
    if (prevLibraries.current && libraries !== prevLibraries.current) {
      console.warn('Performance warning! Loadscript has been reloaded unintentionally! You should not pass `libraries` prop as new array. Please keep an array of libraries as static class property for Components and PureComponents, or just a const variable outside of component, or somewhere in config files or ENV variables');
    }

    prevLibraries.current = libraries;
  }, [libraries]);
  return {
    isLoaded: isLoaded,
    loadError: loadError,
    url: url
  };
}

var defaultLoadingElement =
/*#__PURE__*/
createElement(DefaultLoadingElement, null);

function LoadScriptNext(_ref) {
  var loadingElement = _ref.loadingElement,
      onLoad = _ref.onLoad,
      onError = _ref.onError,
      onUnmount = _ref.onUnmount,
      children = _ref.children,
      hookOptions = _objectWithoutPropertiesLoose(_ref, ["loadingElement", "onLoad", "onError", "onUnmount", "children"]);

  var _useLoadScript = useLoadScript(hookOptions),
      isLoaded = _useLoadScript.isLoaded,
      loadError = _useLoadScript.loadError;

  useEffect(function handleOnLoad() {
    if (isLoaded && typeof onLoad === "function") {
      onLoad();
    }
  }, [isLoaded, onLoad]);
  useEffect(function handleOnError() {
    if (loadError && typeof onError === "function") {
      onError(loadError);
    }
  }, [loadError, onError]);
  useEffect(function handleOnUnmount() {
    return function () {
      if (onUnmount) {
        onUnmount();
      }
    };
  }, [onUnmount]);
  return isLoaded ? children : loadingElement || defaultLoadingElement;
}

var LoadScriptNext$1 = /*#__PURE__*/
memo(LoadScriptNext);

var eventMap$1 = {};
var updaterMap$1 = {
  options: function options(instance, _options) {
    instance.setOptions(_options);
  }
};
var TrafficLayer =
/*#__PURE__*/
function (_PureComponent) {
  _inheritsLoose(TrafficLayer, _PureComponent);

  function TrafficLayer() {
    var _this;

    _this = _PureComponent.apply(this, arguments) || this;
    _this.state = {
      trafficLayer: null
    }; // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name

    _this.setTrafficLayerCallback = function () {
      if (_this.state.trafficLayer !== null) {
        if (_this.props.onLoad) {
          // @ts-ignore
          _this.props.onLoad(_this.state.trafficLayer);
        }
      }
    };

    _this.registeredEvents = [];
    return _this;
  }

  var _proto = TrafficLayer.prototype;

  _proto.componentDidMount = function componentDidMount() {
    var trafficLayer = new google.maps.TrafficLayer(_extends({}, this.props.options || {}, {
      map: this.context
    }));
    this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
      updaterMap: updaterMap$1,
      eventMap: eventMap$1,
      prevProps: {},
      nextProps: this.props,
      instance: trafficLayer
    });

    function setTrafficlayer() {
      return {
        trafficLayer: trafficLayer
      };
    }

    this.setState(setTrafficlayer, this.setTrafficLayerCallback);
  };

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    if (this.state.trafficLayer !== null) {
      unregisterEvents(this.registeredEvents);
      this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
        updaterMap: updaterMap$1,
        eventMap: eventMap$1,
        prevProps: prevProps,
        nextProps: this.props,
        instance: this.state.trafficLayer
      });
    }
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    if (this.state.trafficLayer !== null) {
      if (this.props.onUnmount) {
        // @ts-ignore
        this.props.onUnmount(this.state.trafficLayer);
      }

      unregisterEvents(this.registeredEvents); // @ts-ignore

      this.state.trafficLayer.setMap(null);
    }
  };

  _proto.render = function render() {
    return null;
  };

  return TrafficLayer;
}(PureComponent);
TrafficLayer.contextType = MapContext;

var BicyclingLayer =
/*#__PURE__*/
function (_React$PureComponent) {
  _inheritsLoose(BicyclingLayer, _React$PureComponent);

  function BicyclingLayer() {
    var _this;

    _this = _React$PureComponent.apply(this, arguments) || this;
    _this.state = {
      bicyclingLayer: null
    }; // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name

    _this.setBicyclingLayerCallback = function () {
      if (_this.state.bicyclingLayer !== null) {
        // TODO: how is this possibly null if we're doing a null check
        // @ts-ignore
        _this.state.bicyclingLayer.setMap(_this.context);

        if (_this.props.onLoad) {
          //@ts-ignore
          _this.props.onLoad(_this.state.bicyclingLayer);
        }
      }
    };

    return _this;
  }

  var _proto = BicyclingLayer.prototype;

  _proto.componentDidMount = function componentDidMount() {
    var bicyclingLayer = new google.maps.BicyclingLayer();

    function setBicyclingLayer() {
      return {
        bicyclingLayer: bicyclingLayer
      };
    }

    this.setState(setBicyclingLayer, this.setBicyclingLayerCallback);
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    if (this.state.bicyclingLayer !== null) {
      if (this.props.onUnmount) {
        // @ts-ignore
        this.props.onUnmount(this.state.bicyclingLayer);
      } // @ts-ignore


      this.state.bicyclingLayer.setMap(null);
    }
  };

  _proto.render = function render() {
    return null;
  };

  return BicyclingLayer;
}(PureComponent);
BicyclingLayer.contextType = MapContext;

var eventMap$2 = {
  onCircleComplete: "circlecomplete",
  onMarkerComplete: "markercomplete",
  onOverlayComplete: "overlaycomplete",
  onPolygonComplete: "polygoncomplete",
  onPolylineComplete: "polylinecomplete",
  onRectangleComplete: "rectanglecomplete"
};
var updaterMap$2 = {
  drawingMode: function drawingMode(instance, _drawingMode) {
    instance.setDrawingMode(_drawingMode);
  },
  options: function options(instance, _options) {
    instance.setOptions(_options);
  }
};
var DrawingManager =
/*#__PURE__*/
function (_React$PureComponent) {
  _inheritsLoose(DrawingManager, _React$PureComponent);

  function DrawingManager(props) {
    var _this;

    _this = _React$PureComponent.call(this, props) || this;
    _this.registeredEvents = [];
    _this.state = {
      drawingManager: null
    }; // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name

    _this.setDrawingManagerCallback = function () {
      if (_this.state.drawingManager !== null && _this.props.onLoad) {
        _this.props.onLoad(_this.state.drawingManager);
      }
    };

    !!!google.maps.drawing ? process.env.NODE_ENV !== "production" ? invariant(false, "Did you include prop libraries={['drawing']} in the URL? %s", google.maps.drawing) : invariant(false) : void 0;
    return _this;
  }

  var _proto = DrawingManager.prototype;

  _proto.componentDidMount = function componentDidMount() {
    var drawingManager = new google.maps.drawing.DrawingManager(_extends({}, this.props.options || {}, {
      map: this.context
    }));
    this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
      updaterMap: updaterMap$2,
      eventMap: eventMap$2,
      prevProps: {},
      nextProps: this.props,
      instance: drawingManager
    });

    function setDrawingManager() {
      return {
        drawingManager: drawingManager
      };
    }

    this.setState(setDrawingManager, this.setDrawingManagerCallback);
  };

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    if (this.state.drawingManager !== null) {
      unregisterEvents(this.registeredEvents);
      this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
        updaterMap: updaterMap$2,
        eventMap: eventMap$2,
        prevProps: prevProps,
        nextProps: this.props,
        instance: this.state.drawingManager
      });
    }
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    if (this.state.drawingManager !== null) {
      if (this.props.onUnmount) {
        this.props.onUnmount(this.state.drawingManager);
      }

      unregisterEvents(this.registeredEvents);
      this.state.drawingManager.setMap(null);
    }
  };

  _proto.render = function render() {
    return createElement(Fragment, null);
  };

  return DrawingManager;
}(PureComponent);
DrawingManager.contextType = MapContext;

var eventMap$3 = {
  onAnimationChanged: "animation_changed",
  onClick: "click",
  onClickableChanged: "clickable_changed",
  onCursorChanged: "cursor_changed",
  onDblClick: "dblclick",
  onDrag: "drag",
  onDragEnd: "dragend",
  onDraggableChanged: "draggable_changed",
  onDragStart: "dragstart",
  onFlatChanged: "flat_changed",
  onIconChanged: "icon_changed",
  onMouseDown: "mousedown",
  onMouseOut: "mouseout",
  onMouseOver: "mouseover",
  onMouseUp: "mouseup",
  onPositionChanged: "position_changed",
  onRightClick: "rightclick",
  onShapeChanged: "shape_changed",
  onTitleChanged: "title_changed",
  onVisibleChanged: "visible_changed",
  onZindexChanged: "zindex_changed"
};
var updaterMap$3 = {
  animation: function animation(instance, _animation) {
    instance.setAnimation(_animation);
  },
  clickable: function clickable(instance, _clickable) {
    instance.setClickable(_clickable);
  },
  cursor: function cursor(instance, _cursor) {
    instance.setCursor(_cursor);
  },
  draggable: function draggable(instance, _draggable) {
    instance.setDraggable(_draggable);
  },
  icon: function icon(instance, _icon) {
    instance.setIcon(_icon);
  },
  label: function label(instance, _label) {
    instance.setLabel(_label);
  },
  map: function map(instance, _map) {
    instance.setMap(_map);
  },
  opacity: function opacity(instance, _opacity) {
    instance.setOpacity(_opacity);
  },
  options: function options(instance, _options) {
    instance.setOptions(_options);
  },
  position: function position(instance, _position) {
    instance.setPosition(_position);
  },
  shape: function shape(instance, _shape) {
    instance.setShape(_shape);
  },
  title: function title(instance, _title) {
    instance.setTitle(_title);
  },
  visible: function visible(instance, _visible) {
    instance.setVisible(_visible);
  },
  zIndex: function zIndex(instance, _zIndex) {
    instance.setZIndex(_zIndex);
  }
};
var Marker =
/*#__PURE__*/
function (_React$PureComponent) {
  _inheritsLoose(Marker, _React$PureComponent);

  function Marker() {
    var _this;

    _this = _React$PureComponent.apply(this, arguments) || this;
    _this.registeredEvents = [];
    _this.state = {
      marker: null
    }; // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name

    _this.setMarkerCallback = function () {
      if (_this.state.marker !== null && _this.props.onLoad) {
        _this.props.onLoad(_this.state.marker);
      }
    };

    return _this;
  }

  var _proto = Marker.prototype;

  _proto.componentDidMount = function componentDidMount() {
    var markerOptions = _extends({}, this.props.options || {}, {}, this.props.clusterer ? {} : {
      map: this.context
    }, {
      position: this.props.position
    });

    var marker = new google.maps.Marker(markerOptions);

    if (this.props.clusterer) {
      this.props.clusterer.addMarker( // @ts-ignore
      marker, !!this.props.noClustererRedraw);
    } else {
      marker.setMap(this.context);
    }

    this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
      updaterMap: updaterMap$3,
      eventMap: eventMap$3,
      prevProps: {},
      nextProps: this.props,
      instance: marker
    });

    function setMarker() {
      return {
        marker: marker
      };
    }

    this.setState(setMarker, this.setMarkerCallback);
  };

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    if (this.state.marker !== null) {
      unregisterEvents(this.registeredEvents);
      this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
        updaterMap: updaterMap$3,
        eventMap: eventMap$3,
        prevProps: prevProps,
        nextProps: this.props,
        instance: this.state.marker
      });
    }
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    if (this.state.marker !== null) {
      if (this.props.onUnmount) {
        this.props.onUnmount(this.state.marker);
      }

      unregisterEvents(this.registeredEvents);

      if (this.props.clusterer) {
        this.props.clusterer.removeMarker( // @ts-ignore
        this.state.marker, !!this.props.noClustererRedraw);
      } else {
        this.state.marker && this.state.marker.setMap(null);
      }
    }
  };

  _proto.render = function render() {
    return this.props.children || null;
  };

  return Marker;
}(PureComponent);
Marker.contextType = MapContext;

var eventMap$4 = {
  onClick: "click",
  onClusteringBegin: "clusteringbegin",
  onClusteringEnd: "clusteringend",
  onMouseOut: "mouseout",
  onMouseOver: "mouseover"
};
var updaterMap$4 = {
  averageCenter: function averageCenter(instance, _averageCenter) {
    instance.setAverageCenter(_averageCenter);
  },
  batchSizeIE: function batchSizeIE(instance, _batchSizeIE) {
    instance.setBatchSizeIE(_batchSizeIE);
  },
  calculator: function calculator(instance, _calculator) {
    instance.setCalculator(_calculator);
  },
  clusterClass: function clusterClass(instance, _clusterClass) {
    instance.setClusterClass(_clusterClass);
  },
  enableRetinaIcons: function enableRetinaIcons(instance, _enableRetinaIcons) {
    instance.setEnableRetinaIcons(_enableRetinaIcons);
  },
  gridSize: function gridSize(instance, _gridSize) {
    instance.setGridSize(_gridSize);
  },
  ignoreHidden: function ignoreHidden(instance, _ignoreHidden) {
    instance.setIgnoreHidden(_ignoreHidden);
  },
  imageExtension: function imageExtension(instance, _imageExtension) {
    instance.setImageExtension(_imageExtension);
  },
  imagePath: function imagePath(instance, _imagePath) {
    instance.setImagePath(_imagePath);
  },
  imageSizes: function imageSizes(instance, _imageSizes) {
    instance.setImageSizes(_imageSizes);
  },
  maxZoom: function maxZoom(instance, _maxZoom) {
    instance.setMaxZoom(_maxZoom);
  },
  minimumClusterSize: function minimumClusterSize(instance, _minimumClusterSize) {
    instance.setMinimumClusterSize(_minimumClusterSize);
  },
  styles: function styles(instance, _styles) {
    instance.setStyles(_styles);
  },
  title: function title(instance, _title) {
    instance.setTitle(_title);
  },
  zoomOnClick: function zoomOnClick(instance, _zoomOnClick) {
    instance.setZoomOnClick(_zoomOnClick);
  }
};
var ClustererComponent =
/*#__PURE__*/
function (_React$PureComponent) {
  _inheritsLoose(ClustererComponent, _React$PureComponent);

  function ClustererComponent() {
    var _this;

    _this = _React$PureComponent.apply(this, arguments) || this;
    _this.registeredEvents = [];
    _this.state = {
      markerClusterer: null
    }; // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name

    _this.setClustererCallback = function () {
      if (_this.state.markerClusterer !== null && _this.props.onLoad) {
        _this.props.onLoad(_this.state.markerClusterer);
      }
    };

    return _this;
  }

  var _proto = ClustererComponent.prototype;

  _proto.componentDidMount = function componentDidMount() {
    if (this.context) {
      var markerClusterer = new Clusterer(this.context, [], this.props.options);
      this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
        updaterMap: updaterMap$4,
        eventMap: eventMap$4,
        prevProps: {},
        nextProps: this.props,
        instance: markerClusterer
      });
      this.setState(function setClusterer() {
        return {
          markerClusterer: markerClusterer
        };
      }, this.setClustererCallback);
    }
  };

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    if (this.state.markerClusterer) {
      unregisterEvents(this.registeredEvents);
      this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
        updaterMap: updaterMap$4,
        eventMap: eventMap$4,
        prevProps: prevProps,
        nextProps: this.props,
        instance: this.state.markerClusterer
      });
    }
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    if (this.state.markerClusterer !== null) {
      if (this.props.onUnmount) {
        this.props.onUnmount(this.state.markerClusterer);
      }

      unregisterEvents(this.registeredEvents); //@ts-ignore

      this.state.markerClusterer.setMap(null);
    }
  };

  _proto.render = function render() {
    return this.state.markerClusterer !== null ? this.props.children(this.state.markerClusterer) : null;
  };

  return ClustererComponent;
}(PureComponent);
ClustererComponent.contextType = MapContext;

var eventMap$5 = {
  onCloseClick: "closeclick",
  onContentChanged: "content_changed",
  onDomReady: "domready",
  onPositionChanged: "position_changed",
  onZindexChanged: "zindex_changed"
};
var updaterMap$5 = {
  options: function options(instance, _options) {
    instance.setOptions(_options);
  },
  position: function position(instance, _position) {
    instance.setPosition(_position);
  },
  zIndex: function zIndex(instance, _zIndex) {
    instance.setZIndex(_zIndex);
  }
};
var InfoWindow =
/*#__PURE__*/
function (_React$PureComponent) {
  _inheritsLoose(InfoWindow, _React$PureComponent);

  function InfoWindow() {
    var _this;

    _this = _React$PureComponent.apply(this, arguments) || this;
    _this.registeredEvents = [];
    _this.containerElement = null;
    _this.state = {
      infoWindow: null
    };

    _this.open = function (infoWindow, anchor) {
      if (anchor) {
        infoWindow.open(_this.context, anchor);
      } else if (infoWindow.getPosition()) {
        infoWindow.open(_this.context);
      } else {
         process.env.NODE_ENV !== "production" ? invariant(false, "You must provide either an anchor (typically render it inside a <Marker>) or a position props for <InfoWindow>.") : invariant(false) ;
      }
    };

    _this.setInfowindowCallback = function () {
      if (_this.state.infoWindow !== null && _this.containerElement !== null) {
        _this.state.infoWindow.setContent(_this.containerElement);

        _this.open(_this.state.infoWindow, _this.props.anchor);

        if (_this.props.onLoad) {
          _this.props.onLoad(_this.state.infoWindow);
        }
      }
    };

    return _this;
  }

  var _proto = InfoWindow.prototype;

  _proto.componentDidMount = function componentDidMount() {
    var infoWindow = new google.maps.InfoWindow(_extends({}, this.props.options || {}));
    this.containerElement = document.createElement("div");
    this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
      updaterMap: updaterMap$5,
      eventMap: eventMap$5,
      prevProps: {},
      nextProps: this.props,
      instance: infoWindow
    });

    function setInfoWindow() {
      return {
        infoWindow: infoWindow
      };
    }

    this.setState(setInfoWindow, this.setInfowindowCallback);
  };

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    if (this.state.infoWindow !== null) {
      unregisterEvents(this.registeredEvents);
      this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
        updaterMap: updaterMap$5,
        eventMap: eventMap$5,
        prevProps: prevProps,
        nextProps: this.props,
        instance: this.state.infoWindow
      });
    }
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    if (this.state.infoWindow !== null) {
      unregisterEvents(this.registeredEvents);
      this.state.infoWindow.close();
    }
  };

  _proto.render = function render() {
    return this.containerElement ? createPortal(Children.only(this.props.children), this.containerElement) : createElement(Fragment, null);
  };

  return InfoWindow;
}(PureComponent);
InfoWindow.contextType = MapContext;

var eventMap$6 = {
  onClick: "click",
  onDblClick: "dblclick",
  onDrag: "drag",
  onDragEnd: "dragend",
  onDragStart: "dragstart",
  onMouseDown: "mousedown",
  onMouseMove: "mousemove",
  onMouseOut: "mouseout",
  onMouseOver: "mouseover",
  onMouseUp: "mouseup",
  onRightClick: "rightclick"
};
var updaterMap$6 = {
  draggable: function draggable(instance, _draggable) {
    instance.setDraggable(_draggable);
  },
  editable: function editable(instance, _editable) {
    instance.setEditable(_editable);
  },
  map: function map(instance, _map) {
    instance.setMap(_map);
  },
  options: function options(instance, _options) {
    instance.setOptions(_options);
  },
  path: function path(instance, _path) {
    instance.setPath(_path);
  },
  visible: function visible(instance, _visible) {
    instance.setVisible(_visible);
  }
};
var Polyline =
/*#__PURE__*/
function (_React$PureComponent) {
  _inheritsLoose(Polyline, _React$PureComponent);

  function Polyline() {
    var _this;

    _this = _React$PureComponent.apply(this, arguments) || this;
    _this.registeredEvents = [];
    _this.state = {
      polyline: null
    }; // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name

    _this.setPolylineCallback = function () {
      if (_this.state.polyline !== null && _this.props.onLoad) {
        _this.props.onLoad(_this.state.polyline);
      }
    };

    return _this;
  }

  var _proto = Polyline.prototype;

  _proto.componentDidMount = function componentDidMount() {
    var polyline = new google.maps.Polyline(_extends({}, this.props.options || {}, {
      map: this.context
    }));
    this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
      updaterMap: updaterMap$6,
      eventMap: eventMap$6,
      prevProps: {},
      nextProps: this.props,
      instance: polyline
    });

    function setPolyline() {
      return {
        polyline: polyline
      };
    }

    this.setState(setPolyline, this.setPolylineCallback);
  };

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    if (this.state.polyline !== null) {
      unregisterEvents(this.registeredEvents);
      this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
        updaterMap: updaterMap$6,
        eventMap: eventMap$6,
        prevProps: prevProps,
        nextProps: this.props,
        instance: this.state.polyline
      });
    }
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    if (this.state.polyline !== null) {
      if (this.props.onUnmount) {
        this.props.onUnmount(this.state.polyline);
      }

      unregisterEvents(this.registeredEvents);
      this.state.polyline.setMap(null);
    }
  };

  _proto.render = function render() {
    return createElement(Fragment, null);
  };

  return Polyline;
}(PureComponent);
Polyline.contextType = MapContext;

var eventMap$7 = {
  onClick: "click",
  onDblClick: "dblclick",
  onDrag: "drag",
  onDragEnd: "dragend",
  onDragStart: "dragstart",
  onMouseDown: "mousedown",
  onMouseMove: "mousemove",
  onMouseOut: "mouseout",
  onMouseOver: "mouseover",
  onMouseUp: "mouseup",
  onRightClick: "rightclick"
};
var updaterMap$7 = {
  draggable: function draggable(instance, _draggable) {
    instance.setDraggable(_draggable);
  },
  editable: function editable(instance, _editable) {
    instance.setEditable(_editable);
  },
  map: function map(instance, _map) {
    instance.setMap(_map);
  },
  options: function options(instance, _options) {
    instance.setOptions(_options);
  },
  path: function path(instance, _path) {
    instance.setPath(_path);
  },
  paths: function paths(instance, _paths) {
    instance.setPaths(_paths);
  },
  visible: function visible(instance, _visible) {
    instance.setVisible(_visible);
  }
};
var Polygon =
/*#__PURE__*/
function (_React$PureComponent) {
  _inheritsLoose(Polygon, _React$PureComponent);

  function Polygon() {
    var _this;

    _this = _React$PureComponent.apply(this, arguments) || this;
    _this.registeredEvents = [];
    _this.state = {
      polygon: null
    }; // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name

    _this.setPolygonCallback = function () {
      if (_this.state.polygon !== null && _this.props.onLoad) {
        _this.props.onLoad(_this.state.polygon);
      }
    };

    _this.render = function () {
      return null;
    };

    return _this;
  }

  var _proto = Polygon.prototype;

  _proto.componentDidMount = function componentDidMount() {
    var polygon = new google.maps.Polygon(_extends({}, this.props.options || {}, {
      map: this.context
    }));
    this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
      updaterMap: updaterMap$7,
      eventMap: eventMap$7,
      prevProps: {},
      nextProps: this.props,
      instance: polygon
    });

    function setPolygon() {
      return {
        polygon: polygon
      };
    }

    this.setState(setPolygon, this.setPolygonCallback);
  };

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    if (this.state.polygon !== null) {
      unregisterEvents(this.registeredEvents);
      this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
        updaterMap: updaterMap$7,
        eventMap: eventMap$7,
        prevProps: prevProps,
        nextProps: this.props,
        instance: this.state.polygon
      });
    }
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    if (this.state.polygon !== null) {
      if (this.props.onUnmount) {
        this.props.onUnmount(this.state.polygon);
      }

      unregisterEvents(this.registeredEvents);
      this.state.polygon && this.state.polygon.setMap(null);
    }
  };

  return Polygon;
}(PureComponent);
Polygon.contextType = MapContext;

var eventMap$8 = {
  onBoundsChanged: "bounds_changed",
  onClick: "click",
  onDblClick: "dblclick",
  onDrag: "drag",
  onDragEnd: "dragend",
  onDragStart: "dragstart",
  onMouseDown: "mousedown",
  onMouseMove: "mousemove",
  onMouseOut: "mouseout",
  onMouseOver: "mouseover",
  onMouseUp: "mouseup",
  onRightClick: "rightclick"
};
var updaterMap$8 = {
  bounds: function bounds(instance, _bounds) {
    instance.setBounds(_bounds);
  },
  draggable: function draggable(instance, _draggable) {
    instance.setDraggable(_draggable);
  },
  editable: function editable(instance, _editable) {
    instance.setEditable(_editable);
  },
  map: function map(instance, _map) {
    instance.setMap(_map);
  },
  options: function options(instance, _options) {
    instance.setOptions(_options);
  },
  visible: function visible(instance, _visible) {
    instance.setVisible(_visible);
  }
};
var Rectangle =
/*#__PURE__*/
function (_React$PureComponent) {
  _inheritsLoose(Rectangle, _React$PureComponent);

  function Rectangle() {
    var _this;

    _this = _React$PureComponent.apply(this, arguments) || this;
    _this.registeredEvents = [];
    _this.state = {
      rectangle: null
    }; // eslint-disable-next-line @getify/proper-arrows/this, @getify/proper-arrows/name

    _this.setRectangleCallback = function () {
      if (_this.state.rectangle !== null && _this.props.onLoad) {
        _this.props.onLoad(_this.state.rectangle);
      }
    };

    return _this;
  }

  var _proto = Rectangle.prototype;

  _proto.componentDidMount = function componentDidMount() {
    var rectangle = new google.maps.Rectangle(_extends({}, this.props.options || {}, {
      map: this.context
    }));
    this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
      updaterMap: updaterMap$8,
      eventMap: eventMap$8,
      prevProps: {},
      nextProps: this.props,
      instance: rectangle
    });

    function setRectangle() {
      return {
        rectangle: rectangle
      };
    }

    this.setState(setRectangle, this.setRectangleCallback);
  };

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    if (this.state.rectangle !== null) {
      unregisterEvents(this.registeredEvents);
      this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
        updaterMap: updaterMap$8,
        eventMap: eventMap$8,
        prevProps: prevProps,
        nextProps: this.props,
        instance: this.state.rectangle
      });
    }
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    if (this.state.rectangle !== null) {
      if (this.props.onUnmount) {
        this.props.onUnmount(this.state.rectangle);
      }

      unregisterEvents(this.registeredEvents);
      this.state.rectangle.setMap(null);
    }
  };

  _proto.render = function render() {
    return createElement(Fragment, null);
  };

  return Rectangle;
}(PureComponent);
Rectangle.contextType = MapContext;

var eventMap$9 = {
  onCenterChanged: "center_changed",
  onClick: "click",
  onDblClick: "dblclick",
  onDrag: "drag",
  onDragEnd: "dragend",
  onDragStart: "dragstart",
  onMouseDown: "mousedown",
  onMouseMove: "mousemove",
  onMouseOut: "mouseout",
  onMouseOver: "mouseover",
  onMouseUp: "mouseup",
  onRadiusChanged: "radius_changed",
  onRightClick: "rightclick"
};
var updaterMap$9 = {
  center: function center(instance, _center) {
    instance.setCenter(_center);
  },
  draggable: function draggable(instance, _draggable) {
    instance.setDraggable(_draggable);
  },
  editable: function editable(instance, _editable) {
    instance.setEditable(_editable);
  },
  map: function map(instance, _map) {
    instance.setMap(_map);
  },
  options: function options(in