53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
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;
|