UNPKG

google-maps-api-react-map

Version:

React.js Google Maps API integration

1 lines 10.6 kB
!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"));else if("function"==typeof define&&define.amd)define(["react"],t);else{var r="object"==typeof exports?t(require("react")):t(e.react);for(var i in r)("object"==typeof exports?exports:e)[i]=r[i]}}("undefined"==typeof self?this:self,(e=>(()=>{var t={961:function(e,t,r){var i;"undefined"==typeof self||self,i=e=>(()=>{"use strict";var t={496:t=>{t.exports=e}},r={};function i(e){var n=r[e];if(void 0!==n)return n.exports;var o=r[e]={exports:{}};return t[e](o,o.exports,i),o.exports}i.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return i.d(t,{a:t}),t},i.d=(e,t)=>{for(var r in t)i.o(t,r)&&!i.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{i.r(n),i.d(n,{MapsApiProvider:()=>d,googleMapsContext:()=>l,useGoogleMapsLibraries:()=>h});var e=i(496),t=i.n(e),r=function e(t,r){if(t===r)return!0;if(t&&r&&"object"==typeof t&&"object"==typeof r){if(t.constructor!==r.constructor)return!1;var i,n,o;if(Array.isArray(t)){if((i=t.length)!=r.length)return!1;for(n=i;0!=n--;)if(!e(t[n],r[n]))return!1;return!0}if(t.constructor===RegExp)return t.source===r.source&&t.flags===r.flags;if(t.valueOf!==Object.prototype.valueOf)return t.valueOf()===r.valueOf();if(t.toString!==Object.prototype.toString)return t.toString()===r.toString();if((i=(o=Object.keys(t)).length)!==Object.keys(r).length)return!1;for(n=i;0!=n--;)if(!Object.prototype.hasOwnProperty.call(r,o[n]))return!1;for(n=i;0!=n--;){var s=o[n];if(!e(t[s],r[s]))return!1}return!0}return t!=t&&r!=r};const o="__googleMapsScriptId";var s;!function(e){e[e.INITIALIZED=0]="INITIALIZED",e[e.LOADING=1]="LOADING",e[e.SUCCESS=2]="SUCCESS",e[e.FAILURE=3]="FAILURE"}(s||(s={}));class a{constructor({apiKey:e,authReferrerPolicy:t,channel:i,client:n,id:s=o,language:l,libraries:c=[],mapIds:d,nonce:h,region:u,retries:p=3,url:g="https://maps.googleapis.com/maps/api/js",version:f}){if(this.callbacks=[],this.done=!1,this.loading=!1,this.errors=[],this.apiKey=e,this.authReferrerPolicy=t,this.channel=i,this.client=n,this.id=s||o,this.language=l,this.libraries=c,this.mapIds=d,this.nonce=h,this.region=u,this.retries=p,this.url=g,this.version=f,a.instance){if(!r(this.options,a.instance.options))throw new Error(`Loader must not be called again with different options. ${JSON.stringify(this.options)} !== ${JSON.stringify(a.instance.options)}`);return a.instance}a.instance=this}get options(){return{version:this.version,apiKey:this.apiKey,channel:this.channel,client:this.client,id:this.id,libraries:this.libraries,language:this.language,region:this.region,mapIds:this.mapIds,nonce:this.nonce,url:this.url,authReferrerPolicy:this.authReferrerPolicy}}get status(){return this.errors.length?s.FAILURE:this.done?s.SUCCESS:this.loading?s.LOADING:s.INITIALIZED}get failed(){return this.done&&!this.loading&&this.errors.length>=this.retries+1}createUrl(){let e=this.url;return e+="?callback=__googleMapsCallback",this.apiKey&&(e+=`&key=${this.apiKey}`),this.channel&&(e+=`&channel=${this.channel}`),this.client&&(e+=`&client=${this.client}`),this.libraries.length>0&&(e+=`&libraries=${this.libraries.join(",")}`),this.language&&(e+=`&language=${this.language}`),this.region&&(e+=`&region=${this.region}`),this.version&&(e+=`&v=${this.version}`),this.mapIds&&(e+=`&map_ids=${this.mapIds.join(",")}`),this.authReferrerPolicy&&(e+=`&auth_referrer_policy=${this.authReferrerPolicy}`),e}deleteScript(){const e=document.getElementById(this.id);e&&e.remove()}load(){return this.loadPromise()}loadPromise(){return new Promise(((e,t)=>{this.loadCallback((r=>{r?t(r.error):e(window.google)}))}))}importLibrary(e){return this.execute(),google.maps.importLibrary(e)}loadCallback(e){this.callbacks.push(e),this.execute()}setScript(){var e,t;if(document.getElementById(this.id))return void this.callback();const r={key:this.apiKey,channel:this.channel,client:this.client,libraries:this.libraries.length&&this.libraries,v:this.version,mapIds:this.mapIds,language:this.language,region:this.region,authReferrerPolicy:this.authReferrerPolicy};Object.keys(r).forEach((e=>!r[e]&&delete r[e])),(null===(t=null===(e=null===window||void 0===window?void 0:window.google)||void 0===e?void 0:e.maps)||void 0===t?void 0:t.importLibrary)||(e=>{let t,r,i,n="The Google Maps JavaScript API",o="google",s="importLibrary",a="__ib__",l=document,c=window;c=c[o]||(c[o]={});const d=c.maps||(c.maps={}),h=new Set,u=new URLSearchParams,p=()=>t||(t=new Promise(((s,c)=>{return p=this,f=function*(){var p;for(i in yield r=l.createElement("script"),r.id=this.id,u.set("libraries",[...h]+""),e)u.set(i.replace(/[A-Z]/g,(e=>"_"+e[0].toLowerCase())),e[i]);u.set("callback",o+".maps."+a),r.src=this.url+"?"+u,d[a]=s,r.onerror=()=>t=c(Error(n+" could not load.")),r.nonce=this.nonce||(null===(p=l.querySelector("script[nonce]"))||void 0===p?void 0:p.nonce)||"",l.head.append(r)},new((g=void 0)||(g=Promise))((function(e,t){function r(e){try{n(f.next(e))}catch(e){t(e)}}function i(e){try{n(f.throw(e))}catch(e){t(e)}}function n(t){var n;t.done?e(t.value):(n=t.value,n instanceof g?n:new g((function(e){e(n)}))).then(r,i)}n((f=f.apply(p,[])).next())}));var p,g,f})));d[s]?console.warn(n+" only loads once. Ignoring:",e):d[s]=(e,...t)=>h.add(e)&&p().then((()=>d[s](e,...t)))})(r);const i=this.libraries.map((e=>this.importLibrary(e)));i.length||i.push(this.importLibrary("core")),Promise.all(i).then((()=>this.callback()),(e=>{const t=new ErrorEvent("error",{error:e});this.loadErrorCallback(t)}))}reset(){this.deleteScript(),this.done=!1,this.loading=!1,this.errors=[],this.onerrorEvent=null}resetIfRetryingFailed(){this.failed&&this.reset()}loadErrorCallback(e){if(this.errors.push(e),this.errors.length<=this.retries){const e=this.errors.length*Math.pow(2,this.errors.length);console.error(`Failed to load Google Maps script, retrying in ${e} ms.`),setTimeout((()=>{this.deleteScript(),this.setScript()}),e)}else this.onerrorEvent=e,this.callback()}callback(){this.done=!0,this.loading=!1,this.callbacks.forEach((e=>{e(this.onerrorEvent)})),this.callbacks=[]}execute(){if(this.resetIfRetryingFailed(),this.done)this.callback();else{if(window.google&&window.google.maps&&window.google.maps.version)return console.warn("Google Maps already loaded outside @googlemaps/js-api-loader.This may result in undesirable behavior as options and script parameters may not match."),void this.callback();this.loading||(this.loading=!0,this.setScript())}}}const l=t().createContext({}),c=e=>{const{children:r,value:i}=e;return t().createElement(l.Provider,{value:i},r)},d=r=>{const{apiKey:i,children:n,version:o="weekly"}=r,s=function(e,t){var r={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(r[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(i=Object.getOwnPropertySymbols(e);n<i.length;n++)t.indexOf(i[n])<0&&Object.prototype.propertyIsEnumerable.call(e,i[n])&&(r[i[n]]=e[i[n]])}return r}(r,["apiKey","children","version"]),[l,d]=(0,e.useState)({}),h=(0,e.useRef)(new a(Object.assign({apiKey:i,version:o},s)));return t().createElement(c,{value:{googleLibraries:l,addLibrary:function(e){const t=`${e}Library`,r=h.current.importLibrary(e);d(Object.assign(Object.assign({},l),{[t]:r}))}}},n)},h=function(){return(0,e.useContext)(l)}})(),n})(),e.exports=i(r(155))},155:t=>{"use strict";t.exports=e}},r={};function i(e){var n=r[e];if(void 0!==n)return n.exports;var o=r[e]={exports:{}};return t[e].call(o.exports,o,o.exports,i),o.exports}i.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return i.d(t,{a:t}),t},i.d=(e,t)=>{for(var r in t)i.o(t,r)&&!i.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{"use strict";i.r(n),i.d(n,{Map:()=>l,MapsApiProvider:()=>r.MapsApiProvider,useMap:()=>a});var e=i(155),t=i.n(e),r=i(961);const o=t().createContext(null),s=e=>{const{children:r,value:i}=e;return t().createElement(o.Provider,{value:i},r)},a=function(){return(0,e.useContext)(o)};const l=i=>{const{className:n,children:o,onClick:a,onDoubleClick:l,onBoundsChanged:c,onCenterChanged:d,onContextMenu:h,onDrag:u,onDragEnd:p,onDragStart:g,onHeadingChanged:f,onIdle:y,onMapCapabilitiesChanged:b,onMapTypeIdChanged:v,onMouseMove:m,onMouseOut:O,onMouseOver:L,onTilesLoaded:w,onZoomChanged:S,zoom:C=14}=i,I=function(e,t){var r={};for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&t.indexOf(i)<0&&(r[i]=e[i]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(i=Object.getOwnPropertySymbols(e);n<i.length;n++)t.indexOf(i[n])<0&&Object.prototype.propertyIsEnumerable.call(e,i[n])&&(r[i[n]]=e[i[n]])}return r}(i,["className","children","onClick","onDoubleClick","onBoundsChanged","onCenterChanged","onContextMenu","onDrag","onDragEnd","onDragStart","onHeadingChanged","onIdle","onMapCapabilitiesChanged","onMapTypeIdChanged","onMouseMove","onMouseOut","onMouseOver","onTilesLoaded","onZoomChanged","zoom"]),{googleLibraries:j,addLibrary:E}=(0,r.useGoogleMapsLibraries)(),{mapsLibrary:P}=j,x=(0,e.useRef)(null),[M,k]=(0,e.useState)(null);return(0,e.useLayoutEffect)((()=>{E("maps")}),[]),(0,e.useEffect)((()=>{P&&x.current&&P.then((({Map:e})=>{k(new e(x.current,Object.assign({zoom:C},I)))}))}),[P,x]),(0,e.useEffect)((()=>{M&&(a&&M.addListener("click",(e=>{a(e)})),l&&M.addListener("dblclick",(e=>{l(e)})),c&&M.addListener("bounds_changed",(()=>{c()})),d&&M.addListener("center_changed",(()=>{d()})),h&&M.addListener("contextmenu",(e=>{h(e)})),u&&M.addListener("drag",(()=>{u()})),p&&M.addListener("dragend",(()=>{p()})),g&&M.addListener("dragstart",(()=>{g()})),f&&M.addListener("heading_changed",(()=>{f()})),y&&M.addListener("idle",(()=>{y()})),v&&M.addListener("maptypeid_changed",(()=>{v()})),m&&M.addListener("mousemove",(e=>{m(e)})),O&&M.addListener("mouseout",(e=>{O(e)})),L&&M.addListener("mouseover",(e=>{L(e)})),b&&M.addListener("mapcapabilities_changed",(()=>{b()})),w&&M.addListener("tilesloaded",(()=>{w()})),S&&M.addListener("zoom_changed",(()=>{S()})))}),[M]),t().createElement("div",{ref:x,className:n,style:{width:"100%",height:"100%"}},t().createElement(s,{value:M},o))}})(),n})()));