From 637445313c8c9364cbf1f32346d3438fc0589d74 Mon Sep 17 00:00:00 2001
From: Ben Schlegel <31989404+benschlegel@users.noreply.github.com>
Date: Tue, 28 Nov 2023 19:59:12 +0100
Subject: [PATCH] feat: Allow <Pin> glyphs to be passed as children (close #98)
 (#99)

Allows the glyph prop of to be passed via JSX children. Functionality is implemented like discussed in #98.
---
 .../assets/info-circle.svg                    |  6 ++++
 examples/markers-and-infowindows/src/app.tsx  | 13 ++++++++
 src/components/pin.tsx                        | 33 +++++++++++++++++--
 3 files changed, 49 insertions(+), 3 deletions(-)
 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 0000000..8728591
--- /dev/null
+++ b/examples/markers-and-infowindows/assets/info-circle.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 17.75C12.4142 17.75 12.75 17.4142 12.75 17V11C12.75 10.5858 12.4142 10.25 12 10.25C11.5858 10.25 11.25 10.5858 11.25 11V17C11.25 17.4142 11.5858 17.75 12 17.75Z" fill="#1C274C"/>
+<path d="M12 7C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7Z" fill="#1C274C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12ZM12 2.75C6.89137 2.75 2.75 6.89137 2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C17.1086 21.25 21.25 17.1086 21.25 12C21.25 6.89137 17.1086 2.75 12 2.75Z" fill="#1C274C"/>
+</svg>
diff --git a/examples/markers-and-infowindows/src/app.tsx b/examples/markers-and-infowindows/src/app.tsx
index 01c4192..5b426b6 100644
--- a/examples/markers-and-infowindows/src/app.tsx
+++ b/examples/markers-and-infowindows/src/app.tsx
@@ -43,6 +43,19 @@ const App = () => {
             glyphColor={'#0f677a'}></Pin>
         </AdvancedMarker>
 
+        {/* advanced marker with html pin glyph */}
+        <AdvancedMarker
+          position={{lat: 15, lng: 20}}
+          title={'AdvancedMarker with customized pin.'}>
+          <Pin background={'#22ccff'} borderColor={'#1e89a1'} scale={1.4}>
+            {/* child gets rendered as 'glyph' element of pin */}
+            <img
+              src="../assets/info-circle.svg"
+              style={{height: '24px', width: '24px'}}
+            />
+          </Pin>
+        </AdvancedMarker>
+
         {/* advanced marker with html-content */}
         <AdvancedMarker
           position={{lat: 30, lng: 10}}
diff --git a/src/components/pin.tsx b/src/components/pin.tsx
index cd510d9..a553dbe 100644
--- a/src/components/pin.tsx
+++ b/src/components/pin.tsx
@@ -1,5 +1,13 @@
-import {useContext, useEffect} 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';
 
 /**
  * Props for the Pin component
@@ -9,8 +17,9 @@ export type PinProps = google.maps.marker.PinElementOptions;
 /**
  * Component to render a google maps marker Pin View
  */
-export const Pin = (props: PinProps) => {
+export const Pin = (props: PropsWithChildren<PinProps>) => {
   const advancedMarker = useContext(AdvancedMarkerContext)?.marker;
+  const glyphContainer = useMemo(() => document.createElement('div'), []);
 
   // Create Pin View instance
   useEffect(() => {
@@ -24,15 +33,33 @@ export const Pin = (props: PinProps) => {
       return;
     }
 
+    if (props.glyph && props.children) {
+      logErrorOnce(
+        'The <Pin> 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 <Pin> component might lead to unexpected results.'
+      );
+    }
+
     const pinViewOptions: google.maps.marker.PinElementOptions = {
       ...props
     };
 
     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;
+    }
+
     // Set content of Advanced Marker View to the Pin View element
     advancedMarker.content = pinElement.element;
   }, [advancedMarker, props]);
 
-  return null;
+  return createPortal(props.children, glyphContainer);
 };