Add marker functionality - part II

Author: SercanSercan

google-maps/package.json

@@ -17,7 +17,7 @@
     "typescript": "~3.7.2"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "PORT=8443 react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

google-maps/public/index.html

@@ -9,7 +9,6 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

google-maps/public/manifest.json

@@ -6,16 +6,6 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
   ],
   "start_url": ".",

google-maps/src/Map/Map.tsx

@@ -6,13 +6,21 @@ interface IMap {
     mapTypeControl?: boolean;
 }
 
+interface IMarker {
+    address: string;
+    latitude: number;
+    longitude: number;
+}
+
 type GoogleLatLng = google.maps.LatLng;
 type GoogleMap = google.maps.Map;
+type GoogleMarker = google.maps.Marker;
 
 const Map: React.FC<IMap> = ({ mapType, mapTypeControl = false}) => {
 
     const ref = useRef<HTMLDivElement>(null);
     const [map, setMap] = useState<GoogleMap>();
+    const [marker, setMarker] = useState<IMarker>();
 
     const startMap = (): void => {
         if (!map) {
@@ -26,6 +34,54 @@ const Map: React.FC<IMap> = ({ mapType, mapTypeControl = false}) => {
         initMap(4, defaultAddress);
     };
 
+    const initEventListener = ():void => {
+        if (map) {
+            google.maps.event.addListener(map, 'click', function(e) {
+                coordinateToAddress(e.latLng);
+            })
+        }
+    };
+    useEffect(initEventListener, [map]);
+
+    const coordinateToAddress = async (coordinate: GoogleLatLng) => {
+        const geocoder = new google.maps.Geocoder();
+        await geocoder.geocode({ location: coordinate}, function (results, status) {
+            if (status === 'OK') {
+                setMarker({
+                    address: results[0].formatted_address,
+                    latitude: coordinate.lat(),
+                    longitude: coordinate.lng()
+                })
+            }
+        });
+    };
+
+    const addSingleMarker = ():void => {
+        if (marker) {
+            addMarker(new google.maps.LatLng(marker.latitude, marker.longitude));
+        }
+    };
+    useEffect(addSingleMarker, [marker]);
+
+    const addMarker = (location: GoogleLatLng): void => {
+        const marker:GoogleMarker = new google.maps.Marker({
+            position: location,
+            map: map,
+            icon: getIconAttributes('#000000')
+        });
+    };
+
+    const getIconAttributes = (iconColor: string) => {
+        return {
+            path: 'M11.0639 15.3003L26.3642 2.47559e-05L41.6646 15.3003L26.3638 51.3639L11.0639 15.3003 M22,17.5a4.5,4.5 0 1,0 9,0a4.5,4.5 0 1,0 -9,0Z',
+            fillColor: iconColor,
+            fillOpacity: 0.8,
+            strokeColor: 'pink',
+            strokeWeight: 2,
+            anchor: new google.maps.Point(30, 50)
+        };
+    };
+
     const initMap = (zoomLevel: number, address: GoogleLatLng): void => {
         if (ref.current) {
             setMap(