@googlemaps/react-wrapperでGoogle Map上をクリックした2点の間にラインを描画する

// Polyline.tsx
export const PolyLine: FC<{
  // ポリラインを描画する位置
  path: (google.maps.LatLng | google.maps.LatLngLiteral)[];

  // ポリラインを描画するGoogle Mapの指定
  map?: google.maps.Map;
}> = ({ path, map }) => {
  // 処理
}

// Polyline.tsx
export const PolyLine: FC<{
  path: (google.maps.LatLng | google.maps.LatLngLiteral)[];
  map?: google.maps.Map;
}> = ({ path, map }) => {
  // ポリラインを格納するState、これでポリラインの描画を制御する。
  const [polyline, setPolyline] = useState<google.maps.Polyline>();

  // polylineの描画を制御
  useEffect(() => {
    // ポリラインがまだ存在していなければ、Stateにポリラインのインスタンスを格納する。
    if (!polyline) {
      setPolyline(new google.maps.Polyline());
    }

    // アンマウント時にGoogle Mapからポリラインを削除する。
    return () => {
      if (polyline) {
        polyline.setMap(null);
      }
    };
  }, [polyline]);
}

// Polyline.tsx
export const PolyLine: FC<{
  // ...省略
  
  // ポリラインの描画を制御する。  
  useEffect(() => {
    if (map && polyline) {
      // Google Mapとポリラインが存在していたら、描画の設定を行う。
      polyline.setOptions({
        map: map, // 描画するGoogle Mapの指定
        path, // ラインを描画する位置
        strokeWeight: 4, // 線の太さ
        strokeColor: "black", // 線の色
        strokeOpacity: 1, // 線の透明度
      });
    }
  }, [map, path, polyline]);
}

// Polyline.tsx
export const PolyLine: FC<{
  // ...省略
  
  //追加
  return null;
}

// Map.tsx

// ..省略

const Content: FC<{
  // ..省略
  
  // 追加
  // この時点ではまだGoogle Mapのeventを取得できないので注意。
  const onClick = useCallback((event: google.maps.MapMouseEvent) => {
    console.log(event);
  }, []);

  return (
    <div style={VIEW_STYLE} ref={ref}>
      {cloneElement(children as ReactElement, { map })}
    </div>
  );
};

export default Map;

// Map.tsx

// ..省略

const Content: FC<{
  // ..省略

  // 追加
  useEffect(() => {
    // mapと動作させたい関数(今回はonClick)が存在していたらaddListener()を呼び出す。
    if (map && onClick) {
        // 第1引数にイベント名の"click"を指定する。
        // 第2引数に実行する関数onClickを指定する。
        map.addListener("click", onClick);
    }
  }, [onClick, map]);

  return (
    <div style={VIEW_STYLE} ref={ref}>
      {cloneElement(children as ReactElement, { map })}
    </div>
  );
};

export default Map;

// Map.tsx

// ...省略

const Map: FC = () => {
  // 追加
  // 2点のクリックした位置をそれぞれuseStateで管理
  const [centerPlace, setCenterPlace] = useState<google.maps.places.PlaceResult>();
  const [firstPlace, setFirstPlace] = useState<google.maps.places.PlaceResult>();
  
  return (
    <Wrapper apiKey={MAP_API_KEY}>
      <Content>
        <Marker place={DEFAULT.CENTER} />
      </Content>
    </Wrapper>
  );
};

// ...省略

// Map.tsx

// ...省略

const Map: FC = () => {
  const [centerPlace, setCenterPlace] =
    useState<google.maps.places.PlaceResult>();
  const [firstPlace, setFirstPlace] =
    useState<google.maps.places.PlaceResult>();
  
  // 追加
  const setPlaces = useCallback(
    (place: google.maps.places.PlaceResult) => {
      if (!centerPlace) {
        // 1回目のクリック時の処理
        setCenterPlace(place);
      } else if (!firstPlace) {
        // 2回目のクリック時の処理
        setFirstPlace(place);
      } else {
        // 3回目のクリック時の処理、2つのStateを初期化
        setCenterPlace(undefined);
        setFirstPlace(undefined);
      }
    },
    [centerPlace, firstPlace]
  );
  
  // ...省略
};

// ...省略

// Map.tsx

// ...省略

const Map: FC = () => {
  // ...省略

  // 追加
  const onClickMapCallback = useCallback(
    (position: google.maps.LatLng) => {
      // Google Mapの座標を受け取り、setPlacesでStateを更新する。
      setPlaces({
        geometry: {
          location: position,
        },
      });
    },
    [setPlaces]
  );
  
  return (
    <Wrapper apiKey={MAP_API_KEY}>
      {/* <Content> 削除 */}
      <Content onClickMapCallback={onClickMapCallback}> {/* 追加 */}
        <Marker place={DEFAULT.CENTER} />
      </Content>
    </Wrapper>
  );
};

// ...省略

// Map.tsx

// ...省略

const Map: FC = () => {
  // ...省略  
  return (
    <Wrapper apiKey={MAP_API_KEY}>
      <Content onClickMapCallback={onClickMapCallback}>
        {/* <Marker place={DEFAULT.CENTER} /> 削除 */}
        {centerPlace && <Marker place={centerPlace} />} {/* 追加 */}
        {firstPlace && <Marker place={firstPlace} />} {/* 追加 */}
      </Content>
    </Wrapper>
  );
};

// ...省略

// Marker.tsx

// ...省略

export const Marker: FC<{
  // place: google.maps.LatLngLiteral; 削除
  place: google.maps.places.PlaceResult; // 追加
  map?: google.maps.Map;
}> = ({ place, map }) => {
  return (
    <>
      // {map && ( 削除
      {map && place.geometry?.location && ( // 追加
        <OverlayView
          // position={place} 削除
          position={place.geometry.location} // 追加
          map={map}
        >
          <div style={wrapperStyle}>
            <span style={iconStyle}>x</span>
          </div>
        </OverlayView>
      )}
    </>
  );
};

// Map.tsx

// ..省略

const Content: FC<{
  onClickMapCallback: (position: google.maps.LatLng) => void; // 追加
  children: ReactNode;
}> = ({
  onClickMapCallback, // 追加
  children,
}) => {
  // ..省略

  const onClick = useCallback((event: google.maps.MapMouseEvent) => {
    // console.log(event); 削除
    if (event.latLng) onClickMapCallback(event.latLng); // 追加
  }, 
    [onClickMapCallback] // 依存関係も追加
  );
  
  // ..省略
};

export default Map;

// Map.tsx

// ..省略

const Content: FC<{
  // ..省略
  }, []);
  
 // 追加
  useEffect(() => {
    if (map && onClick) {
      map.addListener("click", onClick);
    }
  }, [onClick, map]);
  
  
  useEffect(() => {
    // 削除
    // if (map && onClick) {
    //   map.addListener("click", onClick);
    // }
    
    // 追加
    if (map) {
      // クリック毎にonClickを更新するために、クリックイベントをリセットする。
      google.maps.event.clearListeners(map, "click");
      if (onClick) {
        // クリック毎にonClickに更新する。
        map.addListener("click", onClick);
      }
    }
  }, [onClick, map]);
  
  // ..省略
};

export default Map;

// Map.tsx

// ..省略

const Content: FC<{  
  // ..省略

  return (
    <div style={VIEW_STYLE} ref={ref}>
      {/* {cloneElement(children as ReactElement, { map })} 削除 */}
	    
      {/* 追加 */}
      {Children.map(children, (child) => { // Children.mapで複数のオーバーレイを展開する。

        // React要素のchildrenが存在してなければ何も描画しない。
        if (!isValidElement(child)) return;
        return cloneElement(child as ReactElement, { map });
      })}
    </div>
  );
};

export default Map;

// Map.tsx

// ...省略

const Map: FC = () => {
  // ...省略
	
  // 追加
  // クリックした2つの位置を配列にまとめて、後々<PolyLine>に渡す。
  const polylinePath = useMemo(() => {
    // 2点がクリックされていなければundefinedを返す。
    if (!centerPlace?.geometry?.location || !firstPlace?.geometry?.location) {
      return undefined;
    }
    
    // 2点の位置を配列にして返す。
    return [centerPlace.geometry.location, firstPlace.geometry.location];
  }, [centerPlace, firstPlace]);
  
  // ...省略
};

// ...省略

// Map.tsx

// ...省略

const Map: FC = () => {
  // ...省略
  return (
    <Wrapper apiKey={MAP_API_KEY}>
      <Content onClickMapCallback={onClickMapCallback}>
        {centerPlace && <Marker place={centerPlace} />}
        {firstSacredPlace && <Marker place={firstSacredPlace} />}        
        {polylinePath && <PolyLine path={polylinePath} />} {/* 追加 */}
      </Content>
    </Wrapper>
  );
};

// ...省略

// Marker.tsx
import { CSSProperties, FC } from "react";
import { OverlayView } from "./OverlayView";

// マーカーにスタイルを当てる
const wrapperStyle: CSSProperties = {
  position: "absolute",
  top: 0,
  left: 0,
  display: "flex",
  flexDirection: "column",
  alignItems: "center",
  width: "fit-content",
  transform: "translate(-50%, -50%)",
};

// マーカーアイコンのスタイル
const iconStyle: CSSProperties = {
  fontSize: "56px",
  fontWeight: "bold",
  color: "red",
};

export const Marker: FC<{
  // propsを追加
  place: google.maps.places.PlaceResult;
  map?: google.maps.Map;
}> = ({ place, map }) => {
  return (
    <>
      {map && place.geometry?.location && (
        <OverlayView position={place.geometry.location} map={map}>
          <div style={wrapperStyle}>
            <span style={iconStyle}>x</span>
          </div>
        </OverlayView>
      )}
    </>
  );
};

// PolyLine.tsx
import { FC, useEffect, useState } from "react";

export const PolyLine: FC<{
  path: (google.maps.LatLng | google.maps.LatLngLiteral)[];
  map?: google.maps.Map;
}> = ({ path, map }) => {
  const [polyline, setPolyline] = useState<google.maps.Polyline>();

  useEffect(() => {
    if (!polyline) {
      setPolyline(new google.maps.Polyline());
    }

    return () => {
      if (polyline) {
        polyline.setMap(null);
      }
    };
  }, [polyline]);

  useEffect(() => {
    if (map && polyline) {
      polyline.setOptions({
        map: map, // 描画するGoogle Mapの指定
        path, // ラインを描画する位置
        strokeWeight: 4, // 線の太さ
        strokeColor: "black", // 線の色
        strokeOpacity: 1, // 線の透明度
      });
    }
  }, [map, path, polyline]);

  return null;
};

// Map.tsx
import React, {
  Children,
  FC,
  ReactElement,
  ReactNode,
  cloneElement,
  isValidElement,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import { Wrapper } from "@googlemaps/react-wrapper";
import { Marker } from "./Marker";
import { PolyLine } from "./PolyLine";

const MAP_API_KEY = "xxxx"; // 第1弾の記事で生成したAPIキー

// 最初にMapを表示する時の設定
const DEFAULT = {
  CENTER: {
    lat: 35.6973225,
    lng: 139.8265658,
  } as google.maps.LatLngLiteral,
  ZOOM: 16,
} as const;

// width指定がないと描画されない。
const VIEW_STYLE = {
  width: "100%",
  aspectRatio: "16 / 9",
};

const Map: FC = () => {
  const [centerPlace, setCenterPlace] = useState<google.maps.places.PlaceResult>();
  const [firstPlace, setFirstPlace] = useState<google.maps.places.PlaceResult>();

  const setPlaces = useCallback(
    (place: google.maps.places.PlaceResult) => {
      if (!centerPlace) {
        // 1回目のクリック時の処理
        setCenterPlace(place);
      } else if (!firstPlace) {
        // 2回目のクリック時の処理
        setFirstPlace(place);
      } else {
        // 3回目のクリック時の処理、2つのStateを初期化
        setCenterPlace(undefined);
        setFirstPlace(undefined);
      }
    },
    [centerPlace, firstPlace]
  );

  const onClickMapCallback = useCallback(
    (position: google.maps.LatLng) => {
      // Google Mapの座標を受け取り、setPlacesでStateを更新する。
      setPlaces({
        geometry: {
          location: position,
        },
      });
    },
    [setPlaces]
  );

  // クリックした2つの位置を配列にまとめて、後々<PolyLine>に渡す。
  const polylinePath = useMemo(() => {
    if (!centerPlace?.geometry?.location || !firstPlace?.geometry?.location) {
      return undefined;
    }
    return [centerPlace.geometry.location, firstPlace.geometry.location];
  }, [centerPlace, firstPlace]);

  return (
    <Wrapper apiKey={MAP_API_KEY}>
      <Content onClickMapCallback={onClickMapCallback}>
        {centerPlace && <Marker place={centerPlace} />}
        {firstPlace && <Marker place={firstPlace} />}
        {polylinePath && <PolyLine path={polylinePath} />}
      </Content>
    </Wrapper>
  );
};

const Content: FC<{
  onClickMapCallback: (position: google.maps.LatLng) => void;
  children: ReactNode;
}> = ({ onClickMapCallback, children }) => {
  const ref = useRef<HTMLDivElement>(null);
  const [map, setMap] = useState<google.maps.Map>();

  useEffect(() => {
    if (ref.current && !map) {
      const option = {
        center: DEFAULT.CENTER,
        zoom: DEFAULT.ZOOM,
      };
      setMap(new window.google.maps.Map(ref.current, option));
    }
  }, []);

  const onClick = useCallback(
    (event: google.maps.MapMouseEvent) => {
      if (event.latLng) onClickMapCallback(event.latLng);
    },
    [onClickMapCallback]
  );

  // 追加
  useEffect(() => {
    if (map && onClick) {
      map.addListener("click", onClick);
    }
  }, [onClick, map]);

  useEffect(() => {
    if (map) {
      google.maps.event.clearListeners(map, "click");
      if (onClick) {
        map.addListener("click", onClick);
      }
    }
  }, [onClick, map]);

  return (
    <div style={VIEW_STYLE} ref={ref}>
      {Children.map(children, (child) => {
        if (!isValidElement(child)) return;
        return cloneElement(child as ReactElement, { map });
      })}
    </div>
  );
};

export default Map;