카카오맵 - 마커 클릭하면 설정한 창 뜨기

마커를 내맘대로 박아놨다.

 

마커를 클릭하면 매장 정보를 볼수있게 하고싶은데

일단은 어찌 할수 있는 아이디어가 없어서 

정보를 볼수있는 네이버 창이 뜨게 했다.

 

// //map
// // 지도 컴포넌트

import React, { useEffect } from "react";
import { markerdata } from "./MarkerData";

declare global {
  interface Window {
    kakao: any;
  }
}

interface SearchProps {
  Place: string;
}
const MapComponent = ({ Place }: SearchProps) => {
  useEffect(() => {
    mapscript();
  }, [Place]);

  const mapscript = () => {
    const container = document.getElementById("map");
    const options = {
      center: new window.kakao.maps.LatLng(37.498085437935735, 127.02799122813362), //강남역
      level: 3,
    };

    const map = new window.kakao.maps.Map(container, options);

    //사용자 현재위치 정보
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function (position) {
        const lat = position.coords.latitude,
          lon = position.coords.longitude;

        const locPosition = new window.kakao.maps.LatLng(lat, lon),
          message = "<div>현재위치</div>";

        // console.log(locPosition, message); // 이게 현재위치 잡히는거다 !!!!!!!!
        displayMarker(locPosition, message);
      });
    } else {
      const locPosition = new window.kakao.maps.LatLng(37.57022168346011, 126.98314742271637), //종각역
        message = "<div>아니야</div>";
      // console.log(locPosition, message);
      displayMarker(locPosition, message);
    }
    function displayMarker(locPosition: any, message: any) {
      const marker = new window.kakao.maps.Marker({
        map: map,
        position: locPosition,
      });
      const iwContent = message,
        iwRemoveable = true;

      const infowindow = new window.kakao.maps.InfoWindow({
        content: iwContent,
        removable: iwRemoveable,
      });
      infowindow.open(map, marker);
      map.setCenter(locPosition);
    }

    markerdata.forEach((el) => {
      //마커를 생성합니다.
      const marker = new window.kakao.maps.Marker({
        map: map, //마커가 표시될 지도
        position: new window.kakao.maps.LatLng(el.lat, el.lng), //마커가 표시될 위치
      });
      // 마커에 표시할 인포윈도우를 생성합니다
      const infowindow = new window.kakao.maps.InfoWindow({
        content: el.title, // 인포윈도우에 표시할 내용
      });

      window.kakao.maps.event.addListener(marker, "mouseover", makeOverListener(map, marker, infowindow));
      window.kakao.maps.event.addListener(marker, "mouseout", makeOutListener(infowindow));
      window.kakao.maps.event.addListener(marker, "click", () => {
        window.open(
          "https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=1&ie=utf8&query=%EA%B3%A0%EB%9E%98%EB%A7%A5%EC%A3%BC%EC%B0%BD%EA%B3%A0+%EC%88%98%EC%A7%80%EA%B5%AC%EC%B2%AD%EC%A0%90",
        );
      });
    });
    // 인포윈도우를 표시하는 클로저를 만드는 함수입니다
    function makeOverListener(map: any, marker: any, infowindow: any) {
      return function () {
        infowindow.open(map, marker);
      };
    }

    // 인포윈도우를 닫는 클로저를 만드는 함수입니다
    function makeOutListener(infowindow: any) {
      return function () {
        infowindow.close();
      };
    }
  };

  return <div id="map" style={{ width: "800px", height: "500px" }}></div>;
};

export default MapComponent;