init commit,

03_source/mobile_notworking.del/src/components/Map.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useRef } from 'react';
+import { Location } from '../models/Location';
+
+interface MapProps {
+  locations: Location[];
+  mapCenter: Location;
+}
+
+const Map: React.FC<MapProps> = ({ mapCenter, locations }) => {
+  const mapEle = useRef<HTMLDivElement>(null);
+  const map = useRef<google.maps.Map>();
+
+  useEffect(() => {
+    map.current = new google.maps.Map(mapEle.current, {
+      center: {
+        lat: mapCenter.lat,
+        lng: mapCenter.lng,
+      },
+      zoom: 16,
+    });
+
+    addMarkers();
+
+    google.maps.event.addListenerOnce(map.current, 'idle', () => {
+      if (mapEle.current) {
+        mapEle.current.classList.add('show-map');
+      }
+    });
+
+    function addMarkers() {
+      locations.forEach(markerData => {
+        let infoWindow = new google.maps.InfoWindow({
+          content: `<h5>${markerData.name}</h5>`,
+        });
+
+        let marker = new google.maps.Marker({
+          position: new google.maps.LatLng(markerData.lat, markerData.lng),
+          map: map.current!,
+          title: markerData.name,
+        });
+
+        marker.addListener('click', () => {
+          infoWindow.open(map.current!, marker);
+        });
+      });
+    }
+  }, [mapCenter, locations]);
+
+  return <div ref={mapEle} className="map-canvas"></div>;
+};
+
+export default Map;