feat: add nearbySearch in Emergency Location page

src/pages/main/EmergencyLocation.tsx

@@ -18,15 +18,30 @@ interface Coordinates {
   lng: number;
 }
 
+interface Location {
+  center: {
+    lat: any;
+    lng: any;
+  };
+  coordsResult: [];
+}
+
 const EmergencyLocation: React.FC = () => {
   const [currentPosition, setCurrentPosition] = useState<Coordinates>({
     lat: -6.257377926995551,
     lng: 106.61829861017398,
   });
+  const [emergencyLocation, setEmergencyLocation] = useState<Location>({
+    center: currentPosition,
+    coordsResult: [],
+  });
+  const [isGetCurrentPosition, setIsGetCurrentPosition] =
+    useState<boolean>(true);
 
   useEffect(() => {
     getCurrentPosition();
-  }, []);
+    setIsGetCurrentPosition(false);
+  }, [isGetCurrentPosition]);
 
   const getCurrentPosition = async () => {
     const coordinates = await Geolocation.getCurrentPosition({
@@ -39,6 +54,38 @@ const EmergencyLocation: React.FC = () => {
     });
   };
 
+  const onMapLoad = async (map: google.maps.Map) => {
+    await getCurrentPosition();
+
+    const request = {
+      location: currentPosition,
+      radius: 1000,
+      type: 'hospital',
+    };
+
+    const service = new window.google.maps.places.PlacesService(map);
+
+    const coords: any = [];
+
+    service.nearbySearch(request, (results, status) => {
+      if (status === google.maps.places.PlacesServiceStatus.OK && results) {
+        for (let i = 0; i < results.length; i++) {
+          coords.push(results[i]);
+        }
+
+        setEmergencyLocation({
+          center: {
+            lat: results[0].geometry?.location?.lat,
+            lng: results[0].geometry?.location?.lng,
+          },
+          coordsResult: coords,
+        });
+      }
+    });
+
+    console.log(coords);
+  };
+
   return (
     <Layout title="Lokasi Layanan Darurat">
       <IonToolbar color="primary">
@@ -80,13 +127,22 @@ const EmergencyLocation: React.FC = () => {
           }}
           center={currentPosition}
           zoom={14}
+          onLoad={(map) => onMapLoad(map)}
         >
           <Marker position={currentPosition} />
+
+          {emergencyLocation.coordsResult &&
+            emergencyLocation.coordsResult.map((result: any, i: number) => (
+              <Marker key={i} position={result.geometry.location} />
+            ))}
         </GoogleMap>
       </div>
 
       <IonFab horizontal="start" vertical="bottom" slot="fixed">
-        <IonFabButton color="primary" onClick={getCurrentPosition}>
+        <IonFabButton
+          color="primary"
+          onClick={() => setIsGetCurrentPosition(true)}
+        >
           <IonIcon icon={locateOutline} />
         </IonFabButton>
       </IonFab>