@deatog/react-google-maps-api
Version:
React.js Google Maps API integration
1,540 lines (1,520 loc) • 172 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('invariant'), require('@googlemaps/js-api-loader'), require('react-dom'), require('@deatog/react-google-maps-marker-clusterer'), require('@deatog/react-google-maps-infobox'), require('@googlemaps/markerclusterer')) :
typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', 'invariant', '@googlemaps/js-api-loader', 'react-dom', '@deatog/react-google-maps-marker-clusterer', '@deatog/react-google-maps-infobox', '@googlemaps/markerclusterer'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.deAtog = global.deAtog || {}, global.deAtog.ReactGoogleMaps = global.deAtog.ReactGoogleMaps || {}, global.deAtog.ReactGoogleMaps.API = {}), global.ReactJSXRuntime, global.React, global.invariant, global.google.maps.plugins.loader, global.ReactDOM, global.deAtog.ReactGoogleMaps.MarkerClusterer, global.deAtog.ReactGoogleMaps.InfoBox, global.markerClusterer));
})(this, (function (exports, jsxRuntime, React, invariant, jsApiLoader, ReactDOM, reactGoogleMapsMarkerClusterer, reactGoogleMapsInfobox, markerclusterer) { 'use strict';
function _interopNamespaceDefault(e) {
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n.default = e;
return Object.freeze(n);
}
var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
var markerclusterer__namespace = /*#__PURE__*/_interopNamespaceDefault(markerclusterer);
function asyncGeneratorStep(n, t, e, r, o, a, c) {
try {
var i = n[a](c),
u = i.value;
} catch (n) {
return void e(n);
}
i.done ? t(u) : Promise.resolve(u).then(r, o);
}
function _asyncToGenerator(n) {
return function () {
var t = this,
e = arguments;
return new Promise(function (r, o) {
var a = n.apply(t, e);
function _next(n) {
asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
}
function _throw(n) {
asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
}
_next(void 0);
});
};
}
function _defineProperty(e, r, t) {
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: !0,
configurable: !0,
writable: !0
}) : e[r] = t, e;
}
function ownKeys(e, r) {
var t = Object.keys(e);
if (Object.getOwnPropertySymbols) {
var o = Object.getOwnPropertySymbols(e);
r && (o = o.filter(function (r) {
return Object.getOwnPropertyDescriptor(e, r).enumerable;
})), t.push.apply(t, o);
}
return t;
}
function _objectSpread2(e) {
for (var r = 1; r < arguments.length; r++) {
var t = null != arguments[r] ? arguments[r] : {};
r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
_defineProperty(e, r, t[r]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
});
}
return e;
}
function _objectWithoutProperties(e, t) {
if (null == e) return {};
var o,
r,
i = _objectWithoutPropertiesLoose(e, t);
if (Object.getOwnPropertySymbols) {
var n = Object.getOwnPropertySymbols(e);
for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
}
return i;
}
function _objectWithoutPropertiesLoose(r, e) {
if (null == r) return {};
var t = {};
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
if (-1 !== e.indexOf(n)) continue;
t[n] = r[n];
}
return t;
}
function _toPrimitive(t, r) {
if ("object" != typeof t || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r || "default");
if ("object" != typeof i) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function _toPropertyKey(t) {
var i = _toPrimitive(t, "string");
return "symbol" == typeof i ? i : i + "";
}
var MapContext = React.createContext(null);
function useGoogleMap() {
invariant(!!React.useContext, 'useGoogleMap is React hook and requires React version 16.8+');
var map = React.useContext(MapContext);
invariant(!!map, 'useGoogleMap needs a GoogleMap available up in the tree');
return map;
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function reduce(obj, fn, acc) {
return Object.keys(obj).reduce(function reducer(newAcc, key) {
return fn(newAcc, obj[key], key);
}, acc);
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function forEach(obj, fn) {
Object.keys(obj).forEach(key => {
return fn(obj[key], key);
});
}
/* global google */
/* eslint-disable filenames/match-regex */
function applyUpdaterToNextProps(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
updaterMap,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
prevProps,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
nextProps,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
instance
// eslint-disable-next-line @typescript-eslint/no-explicit-any
) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var map = {};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var iter = (fn, key) => {
var nextValue = nextProps[key];
if (nextValue !== prevProps[key]) {
map[key] = nextValue;
fn(instance, nextValue);
}
};
forEach(updaterMap, iter);
return map;
}
function registerEvents(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
props,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
instance, eventMap) {
var registeredList = reduce(eventMap, function reducer(acc, googleEventName,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
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() {
var events = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
events.forEach(unregisterEvent);
}
function applyUpdatersToPropsAndRegisterEvents(_ref) {
var {
updaterMap,
eventMap,
prevProps,
nextProps,
instance
} = _ref;
var registeredEvents = registerEvents(nextProps, instance, eventMap);
applyUpdaterToNextProps(updaterMap, prevProps, nextProps, instance);
return registeredEvents;
}
var eventMap$j = {
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$k = {
extraMapTypes(map, extra) {
extra.forEach(function forEachExtra(it, i) {
map.mapTypes.set(String(i), it);
});
},
center(map, center) {
map.setCenter(center);
},
clickableIcons(map, clickable) {
map.setClickableIcons(clickable);
},
heading(map, heading) {
map.setHeading(heading);
},
mapTypeId(map, mapTypeId) {
map.setMapTypeId(mapTypeId);
},
options(map, options) {
map.setOptions(options);
},
streetView(map, streetView) {
map.setStreetView(streetView);
},
tilt(map, tilt) {
map.setTilt(tilt);
},
zoom(map, zoom) {
map.setZoom(zoom);
}
};
// TODO: unfinished!
function GoogleMapFunctional(_ref) {
var {
children,
options,
id,
mapContainerStyle,
mapContainerClassName,
center,
// clickableIcons,
// extraMapTypes,
// heading,
// mapTypeId,
onClick,
onDblClick,
onDrag,
onDragEnd,
onDragStart,
onMouseMove,
onMouseOut,
onMouseOver,
onMouseDown,
onMouseUp,
onRightClick,
// onMapTypeIdChanged,
// onTilesLoaded,
// onBoundsChanged,
onCenterChanged,
// onHeadingChanged,
// onIdle,
// onProjectionChanged,
// onResize,
// onTiltChanged,
// onZoomChanged,
onLoad,
onUnmount
} = _ref;
var [map, setMap] = React.useState(null);
var ref = React.useRef(null);
// Order does matter
React.useEffect(() => {
if (options && map !== null) {
map.setOptions(options);
}
}, [map, options]);
React.useEffect(() => {
if (map !== null && typeof center !== 'undefined') {
map.setCenter(center);
}
}, [map, center]);
React.useEffect(() => {
if (!map || !onDblClick) return;
var handler = google.maps.event.addListener(map, 'dblclick', onDblClick);
return () => {
handler.remove();
};
}, [map, onDblClick]);
React.useEffect(() => {
if (!map || !onDragEnd) return;
var handler = google.maps.event.addListener(map, 'dragend', onDragEnd);
return () => {
handler.remove();
};
}, [map, onDragEnd]);
React.useEffect(() => {
if (!map || !onDragStart) return;
var handler = google.maps.event.addListener(map, 'dragstart', onDragStart);
return () => {
handler.remove();
};
}, [map, onDragStart]);
React.useEffect(() => {
if (!map || !onMouseDown) return;
var handler = google.maps.event.addListener(map, 'mousedown', onMouseDown);
return () => {
handler.remove();
};
}, [map, onMouseDown]);
React.useEffect(() => {
if (!map || !onMouseMove) return;
var handler = google.maps.event.addListener(map, 'mousemove', onMouseMove);
return () => {
handler.remove();
};
}, [map, onMouseMove]);
React.useEffect(() => {
if (!map || !onMouseOut) return;
var handler = google.maps.event.addListener(map, 'mouseout', onMouseOut);
return () => {
handler.remove();
};
}, [map, onMouseOut]);
React.useEffect(() => {
if (!map || !onMouseOver) return;
var handler = google.maps.event.addListener(map, 'mouseover', onMouseOver);
return () => {
handler.remove();
};
}, [map, onMouseOver]);
React.useEffect(() => {
if (!map || !onMouseUp) return;
var handler = google.maps.event.addListener(map, 'mouseup', onMouseUp);
return () => {
handler.remove();
};
}, [map, onMouseUp]);
React.useEffect(() => {
if (!map || !onRightClick) return;
var handler = google.maps.event.addListener(map, 'rightclick', onRightClick);
return () => {
handler.remove();
};
}, [map, onRightClick]);
React.useEffect(() => {
if (!map || !onClick) return;
var handler = google.maps.event.addListener(map, 'click', onClick);
return () => {
handler.remove();
};
}, [map, onClick]);
React.useEffect(() => {
if (!map || !onDrag) return;
var handler = google.maps.event.addListener(map, 'drag', onDrag);
return () => {
handler.remove();
};
}, [map, onDrag]);
React.useEffect(() => {
if (!map || !onCenterChanged) return;
var handler = google.maps.event.addListener(map, 'center_changed', onCenterChanged);
return () => {
handler.remove();
};
}, [onClick]);
React.useEffect(() => {
if (!map || !onLoad) return;
onLoad(map);
}, [map, onLoad]);
React.useEffect(() => {
if (!map || !onUnmount) return;
return () => {
onUnmount(map);
};
}, [map, onUnmount]);
React.useEffect(() => {
var map = ref.current === null ? null : new google.maps.Map(ref.current, options);
setMap(map);
}, []);
return jsxRuntime.jsx("div", {
id: id,
ref: ref,
style: mapContainerStyle,
className: mapContainerClassName,
children: jsxRuntime.jsx(MapContext.Provider, {
value: map,
children: map !== null ? children : null
})
});
}
React.memo(GoogleMapFunctional);
class GoogleMap extends React.PureComponent {
constructor() {
super(...arguments);
_defineProperty(this, "state", {
map: null
});
_defineProperty(this, "registeredEvents", []);
_defineProperty(this, "mapRef", null);
_defineProperty(this, "getInstance", () => {
if (this.mapRef === null) {
return null;
}
return new google.maps.Map(this.mapRef, this.props.options);
});
_defineProperty(this, "panTo", latLng => {
var map = this.getInstance();
if (map) {
map.panTo(latLng);
}
});
_defineProperty(this, "setMapCallback", () => {
if (this.state.map !== null) {
if (this.props.onLoad) {
this.props.onLoad(this.state.map);
}
}
});
_defineProperty(this, "getRef", ref => {
this.mapRef = ref;
});
}
componentDidMount() {
var map = this.getInstance();
this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
updaterMap: updaterMap$k,
eventMap: eventMap$j,
prevProps: {},
nextProps: this.props,
instance: map
});
this.setState(function setMap() {
return {
map
};
}, this.setMapCallback);
}
componentDidUpdate(prevProps) {
if (this.state.map !== null) {
unregisterEvents(this.registeredEvents);
this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
updaterMap: updaterMap$k,
eventMap: eventMap$j,
prevProps,
nextProps: this.props,
instance: this.state.map
});
}
}
componentWillUnmount() {
if (this.state.map !== null) {
if (this.props.onUnmount) {
this.props.onUnmount(this.state.map);
}
unregisterEvents(this.registeredEvents);
}
}
render() {
return jsxRuntime.jsx("div", {
id: this.props.id,
ref: this.getRef,
style: this.props.mapContainerStyle,
className: this.props.mapContainerClassName,
children: jsxRuntime.jsx(MapContext.Provider, {
value: this.state.map,
children: this.state.map !== null ? this.props.children : null
})
});
}
}
function makeLoadScriptUrl(_ref) {
var {
googleMapsApiKey,
googleMapsClientId,
version = 'weekly',
language,
region,
libraries,
channel,
mapIds,
authReferrerPolicy,
apiUrl = 'https://maps.googleapis.com'
} = _ref;
var params = [];
invariant(googleMapsApiKey && googleMapsClientId || !(googleMapsApiKey && googleMapsClientId), 'You need to specify either googleMapsApiKey or googleMapsClientId for @deatog/react-google-maps-api load script to work. You cannot use both at the same time.');
if (googleMapsApiKey) {
params.push("key=".concat(googleMapsApiKey));
} else if (googleMapsClientId) {
params.push("client=".concat(googleMapsClientId));
}
if (version) {
params.push("v=".concat(version));
}
if (language) {
params.push("language=".concat(language));
}
if (region) {
params.push("region=".concat(region));
}
if (libraries && libraries.length) {
params.push("libraries=".concat(libraries.sort().join(',')));
}
if (channel) {
params.push("channel=".concat(channel));
}
if (mapIds && mapIds.length) {
params.push("map_ids=".concat(mapIds.join(',')));
}
if (authReferrerPolicy) {
params.push("auth_referrer_policy=".concat(authReferrerPolicy));
}
params.push('loading=async');
params.push('callback=initMap');
return "".concat(apiUrl, "/maps/api/js?").concat(params.join('&'));
}
var isBrowser = typeof document !== 'undefined';
function injectScript(_ref) {
var {
url,
id,
nonce
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} = _ref;
if (!isBrowser) {
return Promise.reject(new Error('document is undefined'));
}
return new Promise(function injectScriptCallback(resolve, reject) {
var existingScript = document.getElementById(id);
var windowWithGoogleMap = window;
if (existingScript) {
// Same script id/url: keep same script
var dataStateAttribute = existingScript.getAttribute('data-state');
if (existingScript.src === url && dataStateAttribute !== 'error') {
if (dataStateAttribute === 'ready') {
return resolve(id);
} else {
var originalInitMap = windowWithGoogleMap.initMap;
var originalErrorCallback = existingScript.onerror;
windowWithGoogleMap.initMap = function initMap() {
if (originalInitMap) {
originalInitMap();
}
resolve(id);
};
existingScript.onerror = function (err) {
if (originalErrorCallback) {
originalErrorCallback(err);
}
reject(err);
};
return;
}
}
// Same script id, but either
// 1. requested URL is different
// 2. script failed to load
else {
existingScript.remove();
}
}
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.id = id;
script.async = true;
script.nonce = nonce || '';
script.onerror = function onerror(err) {
script.setAttribute('data-state', 'error');
reject(err);
};
windowWithGoogleMap.initMap = function onload() {
script.setAttribute('data-state', 'ready');
resolve(id);
};
document.head.appendChild(script);
}).catch(err => {
console.error('injectScript error: ', err);
throw err;
});
}
function isGoogleFontStyle(element) {
// 'Roboto' or 'Google Sans Text' font download
var href = element.href;
if (href && (href.indexOf('https://fonts.googleapis.com/css?family=Roboto') === 0 || href.indexOf('https://fonts.googleapis.com/css?family=Google+Sans+Text') === 0)) {
return true;
}
// font style elements
if (
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
element.tagName.toLowerCase() === 'style' &&
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
element.styleSheet &&
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
element.styleSheet.cssText &&
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
element.styleSheet.cssText.replace('\r\n', '').indexOf('.gm-style') === 0) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
element.styleSheet.cssText = '';
return true;
}
// font style elements for other browsers
if (
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
element.tagName.toLowerCase() === 'style' &&
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
element.innerHTML &&
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
element.innerHTML.replace('\r\n', '').indexOf('.gm-style') === 0) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
element.innerHTML = '';
return true;
}
// when google tries to add empty style
if (
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
element.tagName.toLowerCase() === 'style' &&
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
!element.styleSheet &&
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
!element.innerHTML) {
return true;
}
return false;
}
// Preventing the Google Maps library from downloading an extra font
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];
if (head) {
var trueInsertBefore = head.insertBefore.bind(head);
// TODO: adding return before reflect solves the TS issue
head.insertBefore = function insertBefore(newElement, referenceElement) {
if (!isGoogleFontStyle(newElement)) {
Reflect.apply(trueInsertBefore, head, [newElement, referenceElement]);
}
return newElement;
};
var trueAppend = head.appendChild.bind(head);
// TODO: adding return before reflect solves the TS issue
head.appendChild = function appendChild(textNode) {
if (!isGoogleFontStyle(textNode)) {
Reflect.apply(trueAppend, head, [textNode]);
}
return textNode;
};
}
}
var cleaningUp = false;
function DefaultLoadingElement() {
return jsxRuntime.jsx("div", {
children: "Loading..."
});
}
var defaultLoadScriptProps = {
id: 'script-loader',
version: 'weekly'
};
class LoadScript extends React.PureComponent {
constructor() {
super(...arguments);
_defineProperty(this, "check", null);
_defineProperty(this, "state", {
loaded: false
});
_defineProperty(this, "cleanupCallback", () => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
delete window.google.maps;
this.injectScript();
});
_defineProperty(this, "isCleaningUp", /*#__PURE__*/_asyncToGenerator(function* () {
function promiseCallback(resolve) {
if (!cleaningUp) {
resolve();
} else {
if (isBrowser) {
var timer = window.setInterval(function interval() {
if (!cleaningUp) {
window.clearInterval(timer);
resolve();
}
}, 1);
}
}
return;
}
return new Promise(promiseCallback);
}));
_defineProperty(this, "cleanup", () => {
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 typeof script.src === 'string' && 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);
}
});
});
_defineProperty(this, "injectScript", () => {
if (this.props.preventGoogleFontsLoading) {
preventGoogleFonts();
}
invariant(!!this.props.id, 'LoadScript requires "id" prop to be a string: %s', this.props.id);
var injectScriptOptions = {
id: this.props.id,
nonce: this.props.nonce,
url: makeLoadScriptUrl(this.props)
};
injectScript(injectScriptOptions).then(() => {
if (this.props.onLoad) {
this.props.onLoad();
}
this.setState(function setLoaded() {
return {
loaded: true
};
});
return;
}).catch(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 (".concat(this.props.googleMapsApiKey || '-', ") or Client ID (").concat(this.props.googleMapsClientId || '-', ") to <LoadScript />\n Otherwise it is a Network issue.\n "));
});
});
_defineProperty(this, "getRef", el => {
this.check = el;
});
}
componentDidMount() {
if (isBrowser) {
if (window.google && window.google.maps && !cleaningUp) {
console.error('google api is already presented');
return;
}
this.isCleaningUp().then(this.injectScript).catch(function error(err) {
console.error('Error at injecting script after cleaning up: ', err);
});
}
}
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 outside of component, or somewhere 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.
this.setState(function setLoaded() {
return {
loaded: false
};
}, this.cleanupCallback);
}
}
componentWillUnmount() {
if (isBrowser) {
this.cleanup();
var timeoutCallback = () => {
if (!this.check) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
delete window.google;
cleaningUp = false;
}
};
window.setTimeout(timeoutCallback, 1);
if (this.props.onUnmount) {
this.props.onUnmount();
}
}
}
render() {
return jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [jsxRuntime.jsx("div", {
ref: this.getRef
}), this.state.loaded ? this.props.children : this.props.loadingElement || jsxRuntime.jsx(DefaultLoadingElement, {})]
});
}
}
_defineProperty(LoadScript, "defaultProps", defaultLoadScriptProps);
/* eslint-disable filenames/match-regex */
var previouslyLoadedUrl;
function useLoadScript(_ref) {
var {
id = defaultLoadScriptProps.id,
version = defaultLoadScriptProps.version,
nonce,
googleMapsApiKey,
googleMapsClientId,
language,
region,
libraries,
preventGoogleFontsLoading,
channel,
mapIds,
authReferrerPolicy,
apiUrl = "https://maps.googleapis.com"
} = _ref;
var isMounted = React.useRef(false);
var [isLoaded, setLoaded] = React.useState(false);
var [loadError, setLoadError] = React.useState(undefined);
React.useEffect(function trackMountedState() {
isMounted.current = true;
return () => {
isMounted.current = false;
};
}, []);
React.useEffect(function applyPreventGoogleFonts() {
if (isBrowser && preventGoogleFontsLoading) {
preventGoogleFonts();
}
}, [preventGoogleFontsLoading]);
React.useEffect(function validateLoadedState() {
if (isLoaded) {
invariant(!!window.google, 'useLoadScript was marked as loaded, but window.google is not present. Something went wrong.');
}
}, [isLoaded]);
var url = makeLoadScriptUrl({
version,
googleMapsApiKey,
googleMapsClientId,
language,
region,
libraries,
channel,
mapIds,
authReferrerPolicy,
apiUrl
});
React.useEffect(function loadScriptAndModifyLoadedState() {
if (!isBrowser) {
return;
}
function setLoadedIfMounted() {
if (isMounted.current) {
setLoaded(true);
previouslyLoadedUrl = url;
}
}
if (window.google && window.google.maps && previouslyLoadedUrl === url) {
setLoadedIfMounted();
return;
}
injectScript({
id,
url,
nonce
}).then(setLoadedIfMounted).catch(function handleInjectError(err) {
if (isMounted.current) {
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 (".concat(googleMapsApiKey || '-', ") or Client ID (").concat(googleMapsClientId || '-', ")\n Otherwise it is a Network issue.\n "));
console.error(err);
});
}, [id, url, nonce]);
var prevLibraries = React.useRef(undefined);
React.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,
loadError,
url
};
}
var _excluded$1 = ["loadingElement", "onLoad", "onError", "onUnmount", "children"];
var defaultLoadingElement = jsxRuntime.jsx(DefaultLoadingElement, {});
function LoadScriptNext(_ref) {
var {
loadingElement,
onLoad,
onError,
onUnmount,
children
} = _ref,
hookOptions = _objectWithoutProperties(_ref, _excluded$1);
var {
isLoaded,
loadError
} = useLoadScript(hookOptions);
React.useEffect(function handleOnLoad() {
if (isLoaded && typeof onLoad === 'function') {
onLoad();
}
}, [isLoaded, onLoad]);
React.useEffect(function handleOnError() {
if (loadError && typeof onError === 'function') {
onError(loadError);
}
}, [loadError, onError]);
React.useEffect(function handleOnUnmount() {
return () => {
if (onUnmount) {
onUnmount();
}
};
}, [onUnmount]);
return isLoaded ? children : loadingElement || defaultLoadingElement;
}
var LoadScriptNext$1 = React.memo(LoadScriptNext);
var defaultLibraries = ['maps'];
function useJsApiLoader(_ref) {
var {
id = defaultLoadScriptProps.id,
version = defaultLoadScriptProps.version,
nonce,
googleMapsApiKey,
// googleMapsClientId,
language,
region,
libraries = defaultLibraries,
preventGoogleFontsLoading,
// channel,
mapIds,
authReferrerPolicy
} = _ref;
var isMounted = React.useRef(false);
var [isLoaded, setLoaded] = React.useState(false);
var [loadError, setLoadError] = React.useState(undefined);
React.useEffect(function trackMountedState() {
isMounted.current = true;
return () => {
isMounted.current = false;
};
}, []);
var loader = React.useMemo(() => {
return new jsApiLoader.Loader({
id,
apiKey: googleMapsApiKey,
version,
libraries,
language: language || 'en',
region: region || 'US',
mapIds: mapIds || [],
nonce: nonce || '',
authReferrerPolicy: authReferrerPolicy || 'origin'
});
}, [id, googleMapsApiKey, version, libraries, language, region, mapIds, nonce, authReferrerPolicy]);
React.useEffect(function effect() {
if (isLoaded) {
return;
} else {
loader.load().then(() => {
if (isMounted.current) {
setLoaded(true);
}
return;
}).catch(error => {
setLoadError(error);
});
}
}, []);
React.useEffect(() => {
if (isBrowser && preventGoogleFontsLoading) {
preventGoogleFonts();
}
}, [preventGoogleFontsLoading]);
var prevLibraries = React.useRef();
React.useEffect(() => {
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,
loadError
};
}
var eventMap$i = {};
var updaterMap$j = {
options(instance, options) {
instance.setOptions(options);
}
};
function TrafficLayerFunctional(_ref) {
var {
options,
onLoad,
onUnmount
} = _ref;
var map = React.useContext(MapContext);
var [instance, setInstance] = React.useState(null);
// Order does matter
React.useEffect(() => {
if (instance !== null) {
instance.setMap(map);
}
}, [map]);
React.useEffect(() => {
if (options && instance !== null) {
instance.setOptions(options);
}
}, [instance, options]);
React.useEffect(() => {
var trafficLayer = new google.maps.TrafficLayer(_objectSpread2(_objectSpread2({}, options), {}, {
map
}));
setInstance(trafficLayer);
if (onLoad) {
onLoad(trafficLayer);
}
return () => {
if (instance !== null) {
if (onUnmount) {
onUnmount(instance);
}
instance.setMap(null);
}
};
}, []);
return null;
}
var TrafficLayerF = React.memo(TrafficLayerFunctional);
class TrafficLayer extends React.PureComponent {
constructor() {
super(...arguments);
_defineProperty(this, "state", {
trafficLayer: null
});
_defineProperty(this, "setTrafficLayerCallback", () => {
if (this.state.trafficLayer !== null && this.props.onLoad) {
this.props.onLoad(this.state.trafficLayer);
}
});
_defineProperty(this, "registeredEvents", []);
}
componentDidMount() {
var trafficLayer = new google.maps.TrafficLayer(_objectSpread2(_objectSpread2({}, this.props.options), {}, {
map: this.context
}));
this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
updaterMap: updaterMap$j,
eventMap: eventMap$i,
prevProps: {},
nextProps: this.props,
instance: trafficLayer
});
this.setState(function setTrafficLayer() {
return {
trafficLayer
};
}, this.setTrafficLayerCallback);
}
componentDidUpdate(prevProps) {
if (this.state.trafficLayer !== null) {
unregisterEvents(this.registeredEvents);
this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
updaterMap: updaterMap$j,
eventMap: eventMap$i,
prevProps,
nextProps: this.props,
instance: this.state.trafficLayer
});
}
}
componentWillUnmount() {
if (this.state.trafficLayer !== null) {
if (this.props.onUnmount) {
this.props.onUnmount(this.state.trafficLayer);
}
unregisterEvents(this.registeredEvents);
this.state.trafficLayer.setMap(null);
}
}
render() {
return null;
}
}
_defineProperty(TrafficLayer, "contextType", MapContext);
function BicyclingLayerFunctional(_ref) {
var {
onLoad,
onUnmount
} = _ref;
var map = React.useContext(MapContext);
var [instance, setInstance] = React.useState(null);
// Order does matter
React.useEffect(() => {
if (instance !== null) {
instance.setMap(map);
}
}, [map]);
React.useEffect(() => {
var bicyclingLayer = new google.maps.BicyclingLayer();
setInstance(bicyclingLayer);
bicyclingLayer.setMap(map);
if (onLoad) {
onLoad(bicyclingLayer);
}
return () => {
if (bicyclingLayer !== null) {
if (onUnmount) {
onUnmount(bicyclingLayer);
}
bicyclingLayer.setMap(null);
}
};
}, []);
return null;
}
var BicyclingLayerF = React.memo(BicyclingLayerFunctional);
class BicyclingLayer extends React.PureComponent {
constructor() {
super(...arguments);
_defineProperty(this, "state", {
bicyclingLayer: null
});
_defineProperty(this, "setBicyclingLayerCallback", () => {
if (this.state.bicyclingLayer !== null) {
this.state.bicyclingLayer.setMap(this.context);
if (this.props.onLoad) {
this.props.onLoad(this.state.bicyclingLayer);
}
}
});
}
componentDidMount() {
var bicyclingLayer = new google.maps.BicyclingLayer();
this.setState(() => {
return {
bicyclingLayer
};
}, this.setBicyclingLayerCallback);
}
componentWillUnmount() {
if (this.state.bicyclingLayer !== null) {
if (this.props.onUnmount) {
this.props.onUnmount(this.state.bicyclingLayer);
}
this.state.bicyclingLayer.setMap(null);
}
}
render() {
return null;
}
}
_defineProperty(BicyclingLayer, "contextType", MapContext);
function TransitLayerFunctional(_ref) {
var {
onLoad,
onUnmount
} = _ref;
var map = React.useContext(MapContext);
var [instance, setInstance] = React.useState(null);
// Order does matter
React.useEffect(() => {
if (instance !== null) {
instance.setMap(map);
}
}, [map]);
React.useEffect(() => {
var transitLayer = new google.maps.TransitLayer();
setInstance(transitLayer);
transitLayer.setMap(map);
if (onLoad) {
onLoad(transitLayer);
}
return () => {
if (instance !== null) {
if (onUnmount) {
onUnmount(instance);
}
instance.setMap(null);
}
};
}, []);
return null;
}
var TransitLayerF = React.memo(TransitLayerFunctional);
class TransitLayer extends React.PureComponent {
constructor() {
super(...arguments);
_defineProperty(this, "state", {
transitLayer: null
});
_defineProperty(this, "setTransitLayerCallback", () => {
if (this.state.transitLayer !== null) {
this.state.transitLayer.setMap(this.context);
if (this.props.onLoad) {
this.props.onLoad(this.state.transitLayer);
}
}
});
}
componentDidMount() {
var transitLayer = new google.maps.TransitLayer();
this.setState(function setTransitLayer() {
return {
transitLayer
};
}, this.setTransitLayerCallback);
}
componentWillUnmount() {
if (this.state.transitLayer !== null) {
if (this.props.onUnmount) {
this.props.onUnmount(this.state.transitLayer);
}
this.state.transitLayer.setMap(null);
}
}
render() {
return null;
}
}
_defineProperty(TransitLayer, "contextType", MapContext);
var eventMap$h = {
onClick: 'click',
onDrag: 'drag',
onDragEnd: 'dragend',
onDragStart: 'dragstart'
};
var updaterMap$i = {
collisionBehavior(instance, collisionBehavior) {
instance.collisionBehavior = collisionBehavior !== null && collisionBehavior !== void 0 ? collisionBehavior : null;
},
clickable(instance, clickable) {
instance.gmpClickable = clickable !== null && clickable !== void 0 ? clickable : null;
},
draggable(instance, draggable) {
instance.gmpDraggable = draggable !== null && draggable !== void 0 ? draggable : null;
},
position(instance, position) {
instance.position = position !== null && position !== void 0 ? position : null;
},
title(instance, title) {
instance.title = title !== null && title !== void 0 ? title : '';
},
zIndex(instance, zIndex) {
instance.zIndex = zIndex !== null && zIndex !== void 0 ? zIndex : null;
}
};
var AdvancedMarkerContext = React.createContext(null);
function AdvancedMarkerFunctional(_ref) {
var {
children,
collisionBehavior,
clickable,
clusterer,
noClustererRedraw,
draggable,
position,
title,
zIndex,
onClick,
onRightClick,
onDrag,
onDragEnd,
onDragStart,
onLoad,
onUnmount
} = _ref;
var map = React.useContext(MapContext);
var content = document.createDocumentFragment();
var instance = React.useMemo(() => {
var options = {
collisionBehavior: collisionBehavior !== null && collisionBehavior !== void 0 ? collisionBehavior : null,
gmpClickable: clickable !== null && clickable !== void 0 ? clickable : null,
gmpDraggable: draggable !== null && draggable !== void 0 ? draggable : null,
position: position !== null && position !== void 0 ? position : null,
title: title !== null && title !== void 0 ? title : null,
zIndex: zIndex !== null && zIndex !== void 0 ? zIndex : null,
map: map,
content
};
return new google.maps.marker.AdvancedMarkerElement(options);
}, []);
React.useEffect(() => {
if (typeof collisionBehavior === 'undefined') return;
instance.collisionBehavior = collisionBehavior;
}, [instance, collisionBehavior]);
React.useEffect(() => {
if (typeof clickable === 'undefined') return;
instance.gmpClickable = clickable;
}, [instance, clickable]);
React.useEffect(() => {
if (typeof draggable === 'undefined') return;
instance.gmpDraggable = draggable;
}, [instance, draggable]);
React.useEffect(() => {
if (typeof position === 'undefined') return;
instance.position = position;
}, [instance, position]);
React.useEffect(() => {
if (typeof title === 'undefined') return;
instance.title = title;
}, [instance, title]);
React.useEffect(() => {
if (typeof zIndex === 'undefined') return;
instance.zIndex = zIndex;
}, [instance, zIndex]);
React.useEffect(() => {
if (!onClick) return;
var handler = instance.addListener('click', onClick);
return () => {
handler.remove();
};
}, [instance, onClick]);
React.useEffect(() => {
if (!onRightClick) return;
instance.addEventListener('contextmenu', onRightClick);
return () => {
instance.removeEventListener('contextmenu', onRightClick);
};
}, [instance, onRightClick]);
React.useEffect(() => {
if (!onDrag) return;
var handler = instance.addListener('drag', onDrag);
return () => {
handler.remove();
};
}, [instance, onDrag]);
React.useEffect(() => {
if (!onDragEnd) return;
var handler = instance.addListener('dragend', onDragEnd);
return () => {
handler.remove();
};
}, [instance, onDragEnd]);
React.useEffect(() => {
if (!onDragStart) return;
var handler = instance.addListener('dragstart', onDragStart);
return () => {
handler.remove();
};
}, [instance, onDragStart]);
React.useEffect(() => {
if (clusterer) {
clusterer.addMarker(instance, !!noClustererRedraw);
} else {
instance.map = map;
}
return () => {
if (clusterer) {
clusterer.removeMarker(instance, !!noClustererRedraw);
} else {
instance.map = null;
}
};
}, [instance, map]);
React.useEffect(() => {
if (!onLoad) return;
onLoad(instance);
}, [instance, onLoad]);
React.useEffect(() => {
if (!onUnmount) return;
return () => {
onUnmount(instance);
};
}, [instance, onUnmount]);
var chx = children ? React.Children.map(children, child => {
if (!React.isValidElement(child)) {
return child;
}
var childElement = child;
return React.cloneElement(childElement, {
anchor: instance
});
}) : null;
return jsxRuntime.jsx(AdvancedMarkerContext.Provider, {
value: instance,
children: ReactDOM.createPortal(chx, content)
});
}
var AdvancedMarkerF = React.memo(AdvancedMarkerFunctional);
class AdvancedMarker extends React.PureComponent {
constructor() {
super(...arguments);
_defineProperty(this, "content", document.createDocumentFragment());
_defineProperty(this, "registeredEvents", []);
}
componentDidMount() {
var _this = this;
return _asyncToGenerator(function* () {
var {
collisionBehavior,
clickable,
clusterer,
noClustererRedraw,
draggable,
position,
title,
zIndex,
onLoad,
onRightClick
} = _this.props;
var options = {
collisionBehavior: collisionBehavior !== null && collisionBehavior !== void 0 ? collisionBehavior : null,
gmpClickable: clickable !== null && clickable !== void 0 ? clickable : null,
gmpDraggable: draggable !== null && draggable !== void 0 ? draggable : null,
position: position !== null && position !== void 0 ? position : null,
title: title !== null && title !== void 0 ? title : null,
zIndex: zIndex !== null && zIndex !== void 0 ? zIndex : null,
content: _this.content
};
_this.marker = new google.maps.marker.AdvancedMarkerElement(options);
_this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
updaterMap: updaterMap$i,
eventMap: eventMap$h,
prevProps: {},
nextProps: _this.props,
instance: _this.marker
});
if (clusterer) {
clusterer.addMarker(_this.marker, !!noClustererRedraw);
} else {
_this.marker.map = _this.context;
}
if (onRightClick) {
_this.marker.addEventListener('contextmenu', onRightClick);
}
if (onLoad) {
onLoad(_this.marker);
}
})();
}
componentDidUpdate(prevProps) {
if (!this.marker) {
return;
}
unregisterEvents(this.registeredEvents);
if (prevProps.onRightClick !== this.props.onRightClick) {
if (prevProps.onRightClick) {
this.marker.removeEventListener('contextmenu', prevProps.onRightClick);
}
if (this.props.onRightClick) {
this.marker.addEventListener('contextmenu', this.props.onRightClick);
}
}
this.registeredEvents = applyUpdatersToPropsAndRegisterEvents({
updaterMap: updaterMap$i,
eventMap: eventMap$h,
prevProps,
nextProps: this.props,
instance: this.marker
});
}
componentWillUnmount() {
if (!this.marker) {
return;
}
var {
clusterer,
noClustererRedraw,
onUnmount,
onRightClick
} = this.props;
if (onUnmount) {
onUnmount(this.marker);
}
unregisterEvents(this.registeredEvents);
if (onRightClick) {
this.marker.removeEventListener('contextmenu', onRightClick);
}
if (clusterer) {
clusterer.removeMarker(this.marker, !!noClustererRedraw);
} else {
this.marker.map = null;
}
}
render() {
var _this$marker;
var children = this.props.children ? React.Children.map(this.props.children, child => {
if (!React.isValidElement(child)) {
return child;
}
var childElement = child;
return React.cloneElement(childElement, {
anchor: this.marker
});
}) : null;
return jsxRuntime.jsx(AdvancedMarkerContext.Provider, {
value: (_this$marker = this.marker) !== null && _th