From 438499924f98f2a6f3dc3b9deded103d8a2b3caa Mon Sep 17 00:00:00 2001 From: Ben Schlegel Date: Fri, 24 Nov 2023 19:03:13 +0100 Subject: [PATCH 1/6] feat: support pin glyph passed via jsx children --- examples/markers-and-infowindows/src/app.tsx | 12 +++++++++++ src/components/pin.tsx | 21 +++++++++++++++++--- 2 files changed, 30 insertions(+), 3 deletions(-) diff --git a/examples/markers-and-infowindows/src/app.tsx b/examples/markers-and-infowindows/src/app.tsx index 01c4192e..15542f4f 100644 --- a/examples/markers-and-infowindows/src/app.tsx +++ b/examples/markers-and-infowindows/src/app.tsx @@ -43,6 +43,18 @@ const App = () => { glyphColor={'#0f677a'}> + {/* advanced marker with html pin glyph */} + + + {/* child gets rendered as 'glyph' element of pin */} + + + + {/* advanced marker with html-content */} { +export const Pin = (props: PropsWithChildren) => { const advancedMarker = useContext(AdvancedMarkerContext)?.marker; + const glyphContainer = useMemo(() => document.createElement('div'), []); // Create Pin View instance useEffect(() => { @@ -24,15 +27,27 @@ export const Pin = (props: PinProps) => { return; } + if (props.glyph && props.children) { + logErrorOnce('The component only uses children to render the glyph if both the glyph property and children are present.') + } + + if (Children.count(props.children) > 1) { + logErrorOnce('Passing multiple children to the component might lead to unexpected results.') + } + const pinViewOptions: google.maps.marker.PinElementOptions = { ...props }; const pinElement = new google.maps.marker.PinElement(pinViewOptions); + if (props.children) { + pinElement.glyph = glyphContainer; + } + // Set content of Advanced Marker View to the Pin View element advancedMarker.content = pinElement.element; }, [advancedMarker, props]); - return null; + return createPortal(props.children, glyphContainer); }; From 397d7d47e09e2c918e2a855306b39ffa33ba6889 Mon Sep 17 00:00:00 2001 From: Ben Schlegel Date: Fri, 24 Nov 2023 19:08:13 +0100 Subject: [PATCH 2/6] chore: add code comment to explain pin glyph --- src/components/pin.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/pin.tsx b/src/components/pin.tsx index aac92c33..92030881 100644 --- a/src/components/pin.tsx +++ b/src/components/pin.tsx @@ -41,6 +41,10 @@ export const Pin = (props: PropsWithChildren) => { const pinElement = new google.maps.marker.PinElement(pinViewOptions); + /** + * Set glyph to glyph container if children are present (rendered via portal). + * If both props.glyph and props.children are present, props.children takes priority. + * */ if (props.children) { pinElement.glyph = glyphContainer; } From 4002a9fca39213b993e21dea36a18047182439fe Mon Sep 17 00:00:00 2001 From: Ben Schlegel Date: Fri, 24 Nov 2023 19:08:59 +0100 Subject: [PATCH 3/6] refactor: remove leftover css properties --- examples/markers-and-infowindows/src/app.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/markers-and-infowindows/src/app.tsx b/examples/markers-and-infowindows/src/app.tsx index 15542f4f..f237a9d3 100644 --- a/examples/markers-and-infowindows/src/app.tsx +++ b/examples/markers-and-infowindows/src/app.tsx @@ -51,7 +51,7 @@ const App = () => { borderColor={'#1e89a1'} scale={1.4}> {/* child gets rendered as 'glyph' element of pin */} - + From 67164af5ee4ea51063b8fefcc8796127b99192e3 Mon Sep 17 00:00:00 2001 From: Ben Schlegel Date: Fri, 24 Nov 2023 19:12:32 +0100 Subject: [PATCH 4/6] chore: format code with prettier --- examples/markers-and-infowindows/src/app.tsx | 17 +++++++++-------- src/components/pin.tsx | 20 +++++++++++++++----- 2 files changed, 24 insertions(+), 13 deletions(-) diff --git a/examples/markers-and-infowindows/src/app.tsx b/examples/markers-and-infowindows/src/app.tsx index f237a9d3..04096689 100644 --- a/examples/markers-and-infowindows/src/app.tsx +++ b/examples/markers-and-infowindows/src/app.tsx @@ -44,15 +44,16 @@ const App = () => { {/* advanced marker with html pin glyph */} - - - {/* child gets rendered as 'glyph' element of pin */} - - + + {/* child gets rendered as 'glyph' element of pin */} + + {/* advanced marker with html-content */} diff --git a/src/components/pin.tsx b/src/components/pin.tsx index 92030881..d071698c 100644 --- a/src/components/pin.tsx +++ b/src/components/pin.tsx @@ -1,7 +1,13 @@ -import {Children, PropsWithChildren, useContext, useEffect, useMemo} from 'react'; +import { + Children, + PropsWithChildren, + useContext, + useEffect, + useMemo +} from 'react'; import {AdvancedMarkerContext} from './advanced-marker'; -import { createPortal } from 'react-dom'; -import { logErrorOnce } from '../libraries/errors'; +import {createPortal} from 'react-dom'; +import {logErrorOnce} from '../libraries/errors'; /** * Props for the Pin component @@ -28,11 +34,15 @@ export const Pin = (props: PropsWithChildren) => { } if (props.glyph && props.children) { - logErrorOnce('The component only uses children to render the glyph if both the glyph property and children are present.') + logErrorOnce( + 'The component only uses children to render the glyph if both the glyph property and children are present.' + ); } if (Children.count(props.children) > 1) { - logErrorOnce('Passing multiple children to the component might lead to unexpected results.') + logErrorOnce( + 'Passing multiple children to the component might lead to unexpected results.' + ); } const pinViewOptions: google.maps.marker.PinElementOptions = { From f4d79a0fc17c56faffd45dc9a3fb936be9f368cd Mon Sep 17 00:00:00 2001 From: Ben Schlegel Date: Sun, 26 Nov 2023 22:19:19 +0100 Subject: [PATCH 5/6] feat: use local svg for pin glyph example --- examples/markers-and-infowindows/assets/info-circle.svg | 6 ++++++ examples/markers-and-infowindows/src/app.tsx | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 examples/markers-and-infowindows/assets/info-circle.svg diff --git a/examples/markers-and-infowindows/assets/info-circle.svg b/examples/markers-and-infowindows/assets/info-circle.svg new file mode 100644 index 00000000..8728591d --- /dev/null +++ b/examples/markers-and-infowindows/assets/info-circle.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/examples/markers-and-infowindows/src/app.tsx b/examples/markers-and-infowindows/src/app.tsx index 04096689..5b426b67 100644 --- a/examples/markers-and-infowindows/src/app.tsx +++ b/examples/markers-and-infowindows/src/app.tsx @@ -50,7 +50,7 @@ const App = () => { {/* child gets rendered as 'glyph' element of pin */} From 0aa04d8d4d47a263be6e5849036f7a441b11d6b1 Mon Sep 17 00:00:00 2001 From: Ben Schlegel Date: Sun, 26 Nov 2023 22:22:07 +0100 Subject: [PATCH 6/6] chore: use regular comments instead of jsdoc --- src/components/pin.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/pin.tsx b/src/components/pin.tsx index d071698c..a553dbe9 100644 --- a/src/components/pin.tsx +++ b/src/components/pin.tsx @@ -51,10 +51,8 @@ export const Pin = (props: PropsWithChildren) => { const pinElement = new google.maps.marker.PinElement(pinViewOptions); - /** - * Set glyph to glyph container if children are present (rendered via portal). - * If both props.glyph and props.children are present, props.children takes priority. - * */ + // Set glyph to glyph container if children are present (rendered via portal). + // If both props.glyph and props.children are present, props.children takes priority. if (props.children) { pinElement.glyph = glyphContainer; }