Skip to content

Commit 7dc116f

Browse files
Merge pull request #162 from giorgiabosello/bugfix/general
🐛 #147 fix Google Link not updating on map change
2 parents ee0fc50 + 4c8faca commit 7dc116f

12 files changed

+599
-498
lines changed

dist/index.cjs

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@ var react = require('react');
44
var reactDom = require('react-dom');
55
var jsxRuntime = require('react/jsx-runtime');
66

7-
var S={};function Y(e){let r=document.querySelector(`script[src="${e}"]`),a=r==null?void 0:r.getAttribute("data-status");return {node:r,status:a}}function J(e={src:"",attributes:{},callbacks:{onLoadCallback:()=>{},onErrorCallback:()=>{}},elementIdToAppend:""},r,a={removeOnUnmount:!1,shouldPreventLoad:!1}){let[l,s]=react.useState(()=>!e.src||a!=null&&a.shouldPreventLoad?"idle":typeof window>"u"?"loading":S[e.src]??"loading");return react.useEffect(()=>{var u,n,m;if(r){s(r);return}if(!(e!=null&&e.src)||a!=null&&a.shouldPreventLoad)return;let i=S[e.src];if(i==="ready"||i==="error"){s(i);return}let c=Y(e.src),t=c.node;if(t){let p=c.status??i??"loading";switch(p){case"loading":case"ready":(n=e.callbacks)!=null&&n.onLoadCallback&&e.callbacks.onLoadCallback();break;case"error":(m=e.callbacks)!=null&&m.onErrorCallback&&e.callbacks.onErrorCallback();break;}s(p);}else {t=document.createElement("script"),t.src=e.src,t.async=!0,t.setAttribute("data-status","loading"),e.attributes&&Object.entries(e.attributes).length>0&&Object.entries(e.attributes).map(([g,d])=>t==null?void 0:t.setAttribute(g,d)),e.elementIdToAppend&&document.getElementById(e.elementIdToAppend)?(u=document.getElementById(e.elementIdToAppend))==null||u.appendChild(t):document.body.appendChild(t);let p=g=>{let d=g.type==="load"?"ready":"error";t==null||t.setAttribute("data-status",d);};t.addEventListener("load",p),t.addEventListener("error",p);}let o=p=>{var d,f;let g=p.type==="load"?"ready":"error";p.type==="load"?(d=e.callbacks)!=null&&d.onLoadCallback&&e.callbacks.onLoadCallback():(f=e.callbacks)!=null&&f.onErrorCallback&&e.callbacks.onErrorCallback(),s(g),S[e.src]=g;};return t.addEventListener("load",o),t.addEventListener("error",o),()=>{t&&(t.removeEventListener("load",o),t.removeEventListener("error",o)),t&&(a!=null&&a.removeOnUnmount)&&t.remove();}},[e,r,l]),l}var O=J;var T=({apiKey:e,libraries:r=[],loadScriptExternally:a=!1,status:l="idle",externalApiParams:s,callback:i})=>{var o;typeof window<"u"&&(window.googleMapsCallback=i);let c=(o=new URLSearchParams(s))==null?void 0:o.toString(),t=e?{src:`https://maps.googleapis.com/maps/api/js?key=${e}&callback=googleMapsCallback&libraries=${r==null?void 0:r.join(",")}${c?`&${c}`:""}`,attributes:{id:"googleMapsApi"}}:{src:`https://maps.googleapis.com/maps/api/js?callback=googleMapsCallback&libraries=${r==null?void 0:r.join(",")}`,attributes:{id:"googleMapsApi"}};return O(t,a?l:void 0)};var x=(e,r,a=1e-6)=>{if(e.length&&r.length){for(let l=0;l!==e.length;++l)if(Math.abs(e[l]-r[l])>a)return !1;return !0}return !1};var _=(e,r)=>{let a=react.useRef(),l=a.current,s=r(l,e);return react.useEffect(()=>{s||(a.current=e);}),s?l:e},H=_;var k=e=>{try{return {lat:e==null?void 0:e.lat(),lng:e==null?void 0:e.lng()}}catch{return e}},K=({container:e,pane:r,position:a,maps:l,drag:s})=>{class i extends google.maps.OverlayView{onAdd=()=>{var u;let t=this;s!=null&&s.draggable&&(this.get("map").getDiv().addEventListener("mouseleave",()=>{google.maps.event.trigger(this.container,"mouseup");}),this.container.addEventListener("mousedown",n=>{var m;this.container.style.cursor="grabbing",(m=t.map)==null||m.set("draggable",!1),t.set("origin",n),s.onDragStart(n,{latLng:k(this.position)}),t.moveHandler=this.get("map").getDiv().addEventListener("mousemove",p=>{let g=t.get("origin"),d=g.clientX-p.clientX,f=g.clientY-p.clientY,b=t.getProjection().fromLatLngToDivPixel(t.position);if(b===null)return;let v=t.getProjection().fromDivPixelToLatLng(new l.Point(b.x-d,b.y-f));t.set("position",v),t.set("origin",p),t.draw(),s.onDrag(p,{latLng:k(v)});});}),this.container.addEventListener("mouseup",n=>{var m;(m=t.map)==null||m.set("draggable",!0),this.container.style.cursor="default",t.moveHandler&&(google.maps.event.removeListener(t.moveHandler),t.moveHandler=null),s.onDragEnd(n,{latLng:k(t.position)});}));let o=(u=this.getPanes())==null?void 0:u[this.pane];o==null||o.classList.add("google-map-markers-overlay"),o==null||o.appendChild(this.container);};draw=()=>{let o=this.getProjection().fromLatLngToDivPixel(this.position);o!==null&&(this.container.style.transform=`translate(${o.x}px, ${o.y}px)`,this.container.style.width="0px",this.container.style.height="0px");};onRemove=()=>{this.container.parentNode!==null&&(google.maps.event.clearInstanceListeners(this.container),this.container.parentNode.removeChild(this.container));};container;pane;position;map=this.getMap();moveHandler;constructor(t,o,u){super(),this.container=t,this.pane=o,this.position=u,this.moveHandler=null;}}return new i(e,r,a)},U=K;var ee=({pane:e="floatPane",position:r,map:a,maps:l,zIndex:s=0,children:i,drag:c})=>{let t=react.useMemo(()=>{let n=document.createElement("div");return n.style.position="absolute",n},[]),o=react.useMemo(()=>U({container:t,pane:e,position:r,maps:l,drag:c}),[t,c,l,e,r]),u=H(i==null?void 0:i.props,(n,m)=>n&&n.lat===m.lat&&n.lng===m.lng);return react.useEffect(()=>!o.map&&a?(o==null||o.setMap(a),()=>{o==null||o.setMap(null);}):()=>{},[a,u]),react.useEffect(()=>{t.style.zIndex=`${s}`;},[s,t]),reactDom.createPortal(i,t)},R=ee;var P=()=>{},ae=({children:e,map:r,maps:a})=>{let l=react.useMemo(()=>!r||!a?[]:react.Children.map(e,s=>{if(react.isValidElement(s)){let i={lat:s.props.lat,lng:s.props.lng},{zIndex:c,draggable:t=!1,onDragStart:o=P,onDrag:u=P,onDragEnd:n=P}=s.props||{};return s=react.cloneElement(s,{...s.props,draggable:void 0,onDragStart:void 0,onDrag:void 0,onDragEnd:void 0}),jsxRuntime.jsx(R,{position:new a.LatLng(i.lat,i.lng),map:r,maps:a,zIndex:c,drag:{draggable:t,onDragStart:o,onDrag:u,onDragEnd:n},children:s})}return null}),[e,r,a]);return jsxRuntime.jsx("div",{children:l})},j=ae;function le({children:e=null,style:r={width:"100%",height:"100%",left:0,top:0,margin:0,padding:0,position:"absolute"},defaultCenter:a,defaultZoom:l,onGoogleApiLoaded:s,onChange:i,options:c={},events:t=[]}){let o=react.useRef(null),u=react.useRef([]),[n,m]=react.useState(),[p,g]=react.useState(),[d,f]=react.useState(!1),b=react.useCallback(()=>{var v,y;try{if(!n)return;let E=n.getZoom()??l,M=n.getBounds(),F=[(v=n.getCenter())==null?void 0:v.lng(),(y=n.getCenter())==null?void 0:y.lat()],L=M==null?void 0:M.getNorthEast(),h=M==null?void 0:M.getSouthWest();if(!L||!h||!M)return;let D=[h.lng(),h.lat(),L.lng(),L.lat()];x(D,u.current)||(i&&i({zoom:E,center:F,bounds:M}),u.current=D);}catch(E){console.error(E);}},[n,i]);return react.useEffect(()=>{o.current&&!n&&(m(new google.maps.Map(o.current,{center:a,zoom:l,...c})),g(google.maps));},[a,l,n,o,c]),react.useEffect(()=>{n&&(d||(s&&p&&s({map:n,maps:p,ref:o.current}),f(!0)),google.maps.event.hasListeners(n,"idle")&&google.maps.event.clearListeners(n,"idle"),google.maps.event.addListener(n,"idle",b));},[d,n,p,i,s,b]),react.useEffect(()=>()=>{n&&google.maps.event.clearListeners(n,"idle");},[n]),jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{ref:o,style:r,className:"google-map",...t==null?void 0:t.reduce((v,{name:y,handler:E})=>(v[y]=E,v),{})}),e&&n&&p&&jsxRuntime.jsx(j,{map:n,maps:p,children:e})]})}var q=le;var ue=react.forwardRef(({apiKey:e="",libraries:r=["places","geometry"],children:a=null,loadingContent:l="Google Maps is loading",idleContent:s="Google Maps is on idle",errorContent:i="Google Maps is on error",mapMinHeight:c="unset",containerProps:t={},loadScriptExternally:o=!1,status:u="idle",scriptCallback:n=()=>{},externalApiParams:m={},...p},g)=>{let d={ready:jsxRuntime.jsx(q,{...p,children:a}),loading:l,idle:s,error:i},f=T({apiKey:e,libraries:r,loadScriptExternally:o,status:u,externalApiParams:m,callback:n});return jsxRuntime.jsx("div",{ref:g,style:{height:"100%",width:"100%",overflow:"hidden",position:"relative",minHeight:c},...t,children:d[f]||null})}),B=ue;var qe=B;
7+
var S={};function Y(e){let r=document.querySelector(`script[src="${e}"]`),a=r==null?void 0:r.getAttribute("data-status");return {node:r,status:a}}function J(e={src:"",attributes:{},callbacks:{onLoadCallback:()=>{},onErrorCallback:()=>{}},elementIdToAppend:""},r,a={removeOnUnmount:!1,shouldPreventLoad:!1}){let[l,s]=react.useState(()=>!e.src||a!=null&&a.shouldPreventLoad?"idle":typeof window>"u"?"loading":S[e.src]??"loading");return react.useEffect(()=>{var u,n,m;if(r){s(r);return}if(!(e!=null&&e.src)||a!=null&&a.shouldPreventLoad)return;let i=S[e.src];if(i==="ready"||i==="error"){s(i);return}let c=Y(e.src),t=c.node;if(t){let p=c.status??i??"loading";switch(p){case"loading":case"ready":(n=e.callbacks)!=null&&n.onLoadCallback&&e.callbacks.onLoadCallback();break;case"error":(m=e.callbacks)!=null&&m.onErrorCallback&&e.callbacks.onErrorCallback();break;}s(p);}else {t=document.createElement("script"),t.src=e.src,t.async=!0,t.setAttribute("data-status","loading"),e.attributes&&Object.entries(e.attributes).length>0&&Object.entries(e.attributes).map(([g,d])=>t==null?void 0:t.setAttribute(g,d)),e.elementIdToAppend&&document.getElementById(e.elementIdToAppend)?(u=document.getElementById(e.elementIdToAppend))==null||u.appendChild(t):document.body.appendChild(t);let p=g=>{let d=g.type==="load"?"ready":"error";t==null||t.setAttribute("data-status",d);};t.addEventListener("load",p),t.addEventListener("error",p);}let o=p=>{var d,f;let g=p.type==="load"?"ready":"error";p.type==="load"?(d=e.callbacks)!=null&&d.onLoadCallback&&e.callbacks.onLoadCallback():(f=e.callbacks)!=null&&f.onErrorCallback&&e.callbacks.onErrorCallback(),s(g),S[e.src]=g;};return t.addEventListener("load",o),t.addEventListener("error",o),()=>{t&&(t.removeEventListener("load",o),t.removeEventListener("error",o)),t&&(a!=null&&a.removeOnUnmount)&&t.remove();}},[e,r,l]),l}var O=J;var T=({apiKey:e,libraries:r=[],loadScriptExternally:a=!1,status:l="idle",externalApiParams:s,callback:i})=>{var o;typeof window<"u"&&(window.googleMapsCallback=i);let c=(o=new URLSearchParams(s))==null?void 0:o.toString(),t=e?{src:`https://maps.googleapis.com/maps/api/js?key=${e}&callback=googleMapsCallback&libraries=${r==null?void 0:r.join(",")}${c?`&${c}`:""}`,attributes:{id:"googleMapsApi"}}:{src:`https://maps.googleapis.com/maps/api/js?callback=googleMapsCallback&libraries=${r==null?void 0:r.join(",")}`,attributes:{id:"googleMapsApi"}};return O(t,a?l:void 0)};var x=(e,r,a=1e-6)=>{if(e.length&&r.length){for(let l=0;l!==e.length;++l)if(Math.abs(e[l]-r[l])>a)return !1;return !0}return !1};var _=(e,r)=>{let a=react.useRef(),l=a.current,s=r(l,e);return react.useEffect(()=>{s||(a.current=e);}),s?l:e},H=_;var k=e=>{try{return {lat:e==null?void 0:e.lat(),lng:e==null?void 0:e.lng()}}catch{return e}},K=({container:e,pane:r,position:a,maps:l,drag:s})=>{class i extends google.maps.OverlayView{onAdd=()=>{var u;let t=this;s!=null&&s.draggable&&(this.get("map").getDiv().addEventListener("mouseleave",()=>{google.maps.event.trigger(this.container,"mouseup");}),this.container.addEventListener("mousedown",n=>{var m;this.container.style.cursor="grabbing",(m=t.map)==null||m.set("draggable",!1),t.set("origin",n),s.onDragStart(n,{latLng:k(this.position)}),t.moveHandler=this.get("map").getDiv().addEventListener("mousemove",p=>{let g=t.get("origin"),d=g.clientX-p.clientX,f=g.clientY-p.clientY,b=t.getProjection().fromLatLngToDivPixel(t.position);if(b===null)return;let v=t.getProjection().fromDivPixelToLatLng(new l.Point(b.x-d,b.y-f));t.set("position",v),t.set("origin",p),t.draw(),s.onDrag(p,{latLng:k(v)});});}),this.container.addEventListener("mouseup",n=>{var m;(m=t.map)==null||m.set("draggable",!0),this.container.style.cursor="default",t.moveHandler&&(google.maps.event.removeListener(t.moveHandler),t.moveHandler=null),s.onDragEnd(n,{latLng:k(t.position)});}));let o=(u=this.getPanes())==null?void 0:u[this.pane];o==null||o.classList.add("google-map-markers-overlay"),o==null||o.appendChild(this.container);};draw=()=>{let o=this.getProjection().fromLatLngToDivPixel(this.position);o!==null&&(this.container.style.transform=`translate(${o.x}px, ${o.y}px)`,this.container.style.width="0px",this.container.style.height="0px");};onRemove=()=>{this.container.parentNode!==null&&(google.maps.event.clearInstanceListeners(this.container),this.container.parentNode.removeChild(this.container));};container;pane;position;map=this.getMap();moveHandler;constructor(t,o,u){super(),this.container=t,this.pane=o,this.position=u,this.moveHandler=null;}}return new i(e,r,a)},U=K;var ee=({pane:e="floatPane",position:r,map:a,maps:l,zIndex:s=0,children:i,drag:c})=>{let t=react.useMemo(()=>{let n=document.createElement("div");return n.style.position="absolute",n},[]),o=react.useMemo(()=>U({container:t,pane:e,position:r,maps:l,drag:c}),[t,c,l,e,r]),u=H(i==null?void 0:i.props,(n,m)=>n&&n.lat===m.lat&&n.lng===m.lng);return react.useEffect(()=>!o.map&&a?(o==null||o.setMap(a),()=>{o==null||o.setMap(null);}):()=>{},[a,u]),react.useEffect(()=>{t.style.zIndex=`${s}`;},[s,t]),reactDom.createPortal(i,t)},R=ee;var P=()=>{},ae=({children:e,map:r,maps:a})=>{let l=react.useMemo(()=>!r||!a?[]:react.Children.map(e,s=>{if(react.isValidElement(s)){let i={lat:s.props.lat,lng:s.props.lng},{zIndex:c,draggable:t=!1,onDragStart:o=P,onDrag:u=P,onDragEnd:n=P}=s.props||{};return s=react.cloneElement(s,{...s.props,draggable:void 0,onDragStart:void 0,onDrag:void 0,onDragEnd:void 0}),jsxRuntime.jsx(R,{position:new a.LatLng(i.lat,i.lng),map:r,maps:a,zIndex:c,drag:{draggable:t,onDragStart:o,onDrag:u,onDragEnd:n},children:s})}return null}),[e,r,a]);return jsxRuntime.jsx("div",{children:l})},j=ae;function le({children:e=null,style:r={width:"100%",height:"100%",left:0,top:0,margin:0,padding:0,position:"absolute"},defaultCenter:a,defaultZoom:l,onGoogleApiLoaded:s,onChange:i,options:c={},events:t=[]}){let o=react.useRef(null),u=react.useRef([]),[n,m]=react.useState(),[p,g]=react.useState(),[d,f]=react.useState(!1),b=react.useCallback(()=>{var v,y;try{if(!n)return;let E=n.getZoom()??l,M=n.getBounds(),F=[(v=n.getCenter())==null?void 0:v.lng(),(y=n.getCenter())==null?void 0:y.lat()],h=M==null?void 0:M.getNorthEast(),L=M==null?void 0:M.getSouthWest();if(!h||!L||!M)return;let D=[L.lng(),L.lat(),h.lng(),h.lat()];x(D,u.current)||(i&&i({zoom:E,center:F,bounds:M}),u.current=D);}catch(E){console.error(E);}},[n,i]);return react.useEffect(()=>{o.current&&!n&&(m(new google.maps.Map(o.current,{center:a,zoom:l,...c})),g(google.maps));},[a,l,n,o,c]),react.useEffect(()=>{n&&!d&&(typeof s=="function"&&p&&s({map:n,maps:p,ref:o.current}),f(!0),google.maps.event.hasListeners(n,"idle")&&google.maps.event.clearListeners(n,"idle"),google.maps.event.addListener(n,"idle",b));},[d,n,s]),react.useEffect(()=>()=>{n&&google.maps.event.clearListeners(n,"idle");},[n]),jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{ref:o,style:r,className:"google-map",...t==null?void 0:t.reduce((v,{name:y,handler:E})=>(v[y]=E,v),{})}),e&&n&&p&&jsxRuntime.jsx(j,{map:n,maps:p,children:e})]})}var q=le;var ue=react.forwardRef(({apiKey:e="",libraries:r=["places","geometry"],children:a=null,loadingContent:l="Google Maps is loading",idleContent:s="Google Maps is on idle",errorContent:i="Google Maps is on error",mapMinHeight:c="unset",containerProps:t={},loadScriptExternally:o=!1,status:u="idle",scriptCallback:n=()=>{},externalApiParams:m={},...p},g)=>{let d={ready:jsxRuntime.jsx(q,{...p,children:a}),loading:l,idle:s,error:i},f=T({apiKey:e,libraries:r,loadScriptExternally:o,status:u,externalApiParams:m,callback:n});return jsxRuntime.jsx("div",{ref:g,style:{height:"100%",width:"100%",overflow:"hidden",position:"relative",minHeight:c},...t,children:d[f]||null})}),B=ue;var qe=B;
88

99
module.exports = qe;

dist/index.d.cts

+1-1
Original file line numberDiff line numberDiff line change
@@ -292,4 +292,4 @@ interface GoogleMapProps extends MapProps, IUseGoogleMaps {
292292

293293
declare const GoogleMap: React.ForwardRefExoticComponent<GoogleMapProps & React.RefAttributes<HTMLDivElement>>;
294294

295-
export { Drag, EventProps, GoogleMapProps, IUseGoogleMaps, LatLng, LatLngBounds, LatLngBoundsLiteral, LatLngLiteral, Map, MapContextProps, MapMarkersProps, MapMouseEvent, MapOptions, MapPanes, MapProps, MapsLibrary, OverlayViewProps, Pane, ScriptProps, UseScriptOptions, UseScriptStatus, createOverlayProps, GoogleMap as default, onGoogleApiLoadedProps };
295+
export { type Drag, type EventProps, type GoogleMapProps, type IUseGoogleMaps, type LatLng, type LatLngBounds, type LatLngBoundsLiteral, type LatLngLiteral, type Map, type MapContextProps, type MapMarkersProps, type MapMouseEvent, type MapOptions, type MapPanes, type MapProps, type MapsLibrary, type OverlayViewProps, type Pane, type ScriptProps, type UseScriptOptions, type UseScriptStatus, type createOverlayProps, GoogleMap as default, type onGoogleApiLoadedProps };

dist/index.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -292,4 +292,4 @@ interface GoogleMapProps extends MapProps, IUseGoogleMaps {
292292

293293
declare const GoogleMap: React.ForwardRefExoticComponent<GoogleMapProps & React.RefAttributes<HTMLDivElement>>;
294294

295-
export { Drag, EventProps, GoogleMapProps, IUseGoogleMaps, LatLng, LatLngBounds, LatLngBoundsLiteral, LatLngLiteral, Map, MapContextProps, MapMarkersProps, MapMouseEvent, MapOptions, MapPanes, MapProps, MapsLibrary, OverlayViewProps, Pane, ScriptProps, UseScriptOptions, UseScriptStatus, createOverlayProps, GoogleMap as default, onGoogleApiLoadedProps };
295+
export { type Drag, type EventProps, type GoogleMapProps, type IUseGoogleMaps, type LatLng, type LatLngBounds, type LatLngBoundsLiteral, type LatLngLiteral, type Map, type MapContextProps, type MapMarkersProps, type MapMouseEvent, type MapOptions, type MapPanes, type MapProps, type MapsLibrary, type OverlayViewProps, type Pane, type ScriptProps, type UseScriptOptions, type UseScriptStatus, type createOverlayProps, GoogleMap as default, type onGoogleApiLoadedProps };

0 commit comments

Comments
 (0)