feat: Allow <Pin> glyphs to be passed as children (close #98)

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}}

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 @@
 /**
  * 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 @@
       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);
 };