Huzylog

홈페이지를 제작하거나, 생활하다 필요했던 도구들을 직접 만들어 모아볼 생각

우선 네이버 지도 좌표X, Y 검색기를 카카오, 구글지도도 검색 가능하게 추가해서 제일 먼저 만들었다.

디자인에 소질이 없어서 반응형 모바일웹이 아직 안되는데, UI를 좀 고민해봐야겠다. (PC만 되는 상태)

네이버, 카카오, 구글 좌표 X,Y 검색

> https://tools.huzy.net 

kakao sdk.js 는 로드되었을지 몰라도 latlng method 가 로드되기 전에 호출될 경우 발생하는 문제이다.

다음과 같이 수정하여 해결하였다.

sdk.js 호출시 파라미터에 autoload=false 를 추가해주었다.

<script
  async
  src={`https://dapi.kakao.com/v2/maps/sdk.js?appkey=${KAKAO_JAVASCRIPT_APP_KEY}&autoload=false`}
></script>

그다음 latlng 메소드가 호출되는 부분을 kakao.maps.load callback 처리해주었다.

useEffect(() => {
    if (kakao) {
      kakao.maps.load(() => {
        var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
        var options = {
          //지도를 생성할 때 필요한 기본 옵션
          center: new kakao.maps.LatLng(Number(lat), Number(lng)), //지도의 중심좌표.
          level: 3, //지도의 레벨(확대, 축소 정도)
        };

        var map = new kakao.maps.Map(container as HTMLDivElement, options);
        var markerPosition = new kakao.maps.LatLng(Number(lat), Number(lng));

        // 마커를 생성합니다
        var marker = new kakao.maps.Marker({
          position: markerPosition,
        });

        // 마커가 지도 위에 표시되도록 설정합니다
        marker.setMap(map);
      });
    }
  }, [lat, lng]);