google-maps-js-api-react
Version:
Fast, tree-shakable, and light-weight React components and hooks for integrating Google Maps API functionality
229 lines (224 loc) • 8.13 kB
JavaScript
'use strict';
var chunkXCNRHAXY_cjs = require('./chunk-XCNRHAXY.cjs');
var chunkSNJM2CWB_cjs = require('./chunk-SNJM2CWB.cjs');
var chunkQWMSBSOL_cjs = require('./chunk-QWMSBSOL.cjs');
var chunkLHLLIGUT_cjs = require('./chunk-LHLLIGUT.cjs');
var chunk2XKLZKVG_cjs = require('./chunk-2XKLZKVG.cjs');
var react = require('react');
var setRef = require('react-helpful-utils/setRef');
var googleMapsJsApiLoader = require('google-maps-js-api-loader');
var noop = require('lodash.noop');
var jsxRuntime = require('react/jsx-runtime');
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
var setRef__default = /*#__PURE__*/_interopDefault(setRef);
var noop__default = /*#__PURE__*/_interopDefault(noop);
var MAX_LAT = Math.atan(Math.sinh(Math.PI)) * 180 / Math.PI;
var connectedEventsAndProps = chunkQWMSBSOL_cjs.getConnectedEventsAndProps_default([
"center",
"heading",
"mapTypeId",
"tilt",
"zoom",
"bounds"
]);
var isKeyOmitted = chunkQWMSBSOL_cjs.handleHas_default([
"className",
"style",
"id",
"children",
"defaultOptions",
"fallback"
]);
var mapsStorage = /* @__PURE__ */ new Map();
var GoogleMap = react.forwardRef(
(props, ref) => {
const { defaultOptions = {} } = props;
const key = `${defaultOptions.backgroundColor || ""},${defaultOptions.controlSize || 40},${defaultOptions.mapId || ""},${defaultOptions.renderingType || ""}`;
return react.useMemo(() => {
if (!mapsStorage.has(key)) {
mapsStorage.set(key, []);
}
const components = mapsStorage.get(key);
for (let i = 0; i < components.length; i++) {
const render2 = components[i];
if (render2._isFree) {
return render2;
}
}
let map;
let panes;
let mapPromise;
let resolveMap = noop__default.default;
let isPanesPending = true;
const Content = (props2) => {
const forceRerender = react.useState()[1];
if (panes) {
return /* @__PURE__ */ jsxRuntime.jsx(chunk2XKLZKVG_cjs.MapContext_default.Provider, { value: map, children: /* @__PURE__ */ jsxRuntime.jsx(chunkSNJM2CWB_cjs.PanesContext_default.Provider, { value: panes, children: props2.children }) });
}
if (isPanesPending) {
isPanesPending = false;
const overlayView = new (googleMapsJsApiLoader.GoogleMapsLoader.get(chunkLHLLIGUT_cjs.MAPS)).OverlayView();
overlayView.onRemove = overlayView.draw = noop__default.default;
overlayView.onAdd = () => {
panes = overlayView.getPanes();
overlayView.setMap(null);
forceRerender(panes);
};
overlayView.setMap(map);
}
return null;
};
const SuspendedGoogleMap = (props2) => {
if (map) {
const { children } = props2;
chunkQWMSBSOL_cjs.useHandlersAndProps_default(
props2,
connectedEventsAndProps,
isKeyOmitted
)(map);
return children ? /* @__PURE__ */ jsxRuntime.jsx(Content, { children }) : null;
}
if (googleMapsJsApiLoader.GoogleMapsLoader.getStatus(chunkLHLLIGUT_cjs.MAPS) == "error") {
throw googleMapsJsApiLoader.GoogleMapsLoader.getError(chunkLHLLIGUT_cjs.MAPS);
}
if (!mapPromise) {
mapPromise = new Promise((resolve) => {
resolveMap = () => {
resolveMap = noop__default.default;
mapPromise = void 0;
resolve();
};
});
}
throw mapPromise;
};
const divRef = chunkXCNRHAXY_cjs.handleRef_default((el) => {
let isAlive = true;
const options = {
...props.defaultOptions,
...props
};
const _ref = ref;
props = ref = void 0;
if (map) {
map.setOptions(options);
map.moveCamera({});
el.prepend(map.getDiv());
setRef__default.default(_ref, map);
} else {
const handleMap = () => {
if (isAlive) {
const div = document.createElement("div");
div.style.width = div.style.height = "100%";
map = new (googleMapsJsApiLoader.GoogleMapsLoader.get(chunkLHLLIGUT_cjs.MAPS)).Map(div, options);
resolveMap();
el.prepend(div);
setRef__default.default(_ref, map);
}
};
if (googleMapsJsApiLoader.GoogleMapsLoader.getStatus(chunkLHLLIGUT_cjs.MAPS) == "loaded") {
handleMap();
} else {
googleMapsJsApiLoader.GoogleMapsLoader.load(chunkLHLLIGUT_cjs.MAPS).then(handleMap, () => {
resolveMap();
});
}
}
return () => {
isAlive = false;
render._isFree = true;
resolveMap();
if (map) {
const { ControlPosition, MapTypeId } = google.maps;
map.setOptions({
clickableIcons: true,
disableDefaultUI: false,
disableDoubleClickZoom: false,
draggable: true,
draggableCursor: null,
draggingCursor: null,
fullscreenControl: true,
fullscreenControlOptions: {
position: ControlPosition.INLINE_END_BLOCK_START
},
gestureHandling: "auto",
headingInteractionEnabled: false,
isFractionalZoomEnabled: map.getRenderingType() == google.maps.RenderingType.VECTOR,
keyboardShortcuts: true,
mapTypeControl: true,
mapTypeControlOptions: {
mapTypeIds: [
MapTypeId.ROADMAP,
MapTypeId.SATELLITE,
MapTypeId.HYBRID,
MapTypeId.TERRAIN
],
position: ControlPosition.BLOCK_START_INLINE_START,
style: google.maps.MapTypeControlStyle.DEFAULT
},
mapTypeId: MapTypeId.ROADMAP,
maxZoom: null,
minZoom: null,
noClear: false,
panControl: false,
panControlOptions: {
position: ControlPosition.INLINE_END_BLOCK_END
},
restriction: {
latLngBounds: {
west: -180,
east: 180,
north: MAX_LAT,
south: -MAX_LAT
},
strictBounds: false
},
rotateControl: false,
rotateControlOptions: {
position: ControlPosition.INLINE_END_BLOCK_END
},
scaleControl: false,
scaleControlOptions: {
style: google.maps.ScaleControlStyle.DEFAULT
},
scrollwheel: true,
streetView: null,
streetViewControl: true,
styles: null,
tiltInteractionEnabled: false,
zoomControl: true,
zoomControlOptions: {
position: ControlPosition.INLINE_END_BLOCK_END
}
});
map.moveCamera({ tilt: 0, heading: 0 });
setRef__default.default(_ref, null);
}
};
});
const render = (_props, _ref) => {
if (render._isFree) {
props = _props;
ref = _ref;
render._isFree = false;
}
return /* @__PURE__ */ jsxRuntime.jsx(
"div",
{
ref: divRef,
className: _props.className,
style: _props.style,
id: _props.id,
children: /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: _props.fallback || null, children: jsxRuntime.jsx(SuspendedGoogleMap, _props) })
}
);
};
components.push(render);
return render;
}, [key])(props, ref);
}
);
var GoogleMap_default = GoogleMap;
exports.GoogleMap_default = GoogleMap_default;
//# sourceMappingURL=chunk-ZZP22YHO.cjs.map
//# sourceMappingURL=chunk-ZZP22YHO.cjs.map