angular 카카오맵 api 연동

카카오맵 api 연동

우선  angular 기반의 카카오맵을 연동하기 전에 아래의 경로를 통해 카카오  api 키를 발급받아야 합니다.

카카오 API: https://developers.kakao.com/

* 회원가입 하고 내 애플리케이션 추가하기를 한후 앱 설정 > 앱 키 의 Javascript 키를 복사해 둡니다.
(angular는 자바스크립트 기반이므로 당연히 javascript 앱 키가 필요합니다.)

* 카카오맵 연동 페이지 컴포넌트 생성한후에 아래와 같이 셋팅한후에 원하는데로 사용 하시면 되며, 참조된 맵 api 샘플 가이드를
토대로 커스텀하게 수정해서 사용하면 됩니다.

* 카카오 지도, 마커, 마커 인포 윈도우 표시 (주석 및 내용참고 :  https://apis.map.kakao.com)

 

import { Component, OnInit, OnDestroy } from '@angular/core';
declare const kakao: any;

@Component({
  selector: 'app-kakao-map',
  template: `
    <div style="width:490px; height:460px;">
      <div id="map" style="width:100%;height:100%;"></div>
    </div> `
})
export class AppKakaoMapComponent implements OnInit, OnDestroy {

    public kakaomap = {
      id: 'map',
      name: '지도',
      latitude: 37.54699,
      longitude: 127.09598,
      level: 3,
      marker: 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png'
    };

    constructor() {
    }

    public ngOnInit(): void {
         this.getkakaoMap();
    }

   // 카카오맵 가져오기
   public getkakaoMap(): void {
    try {
      setTimeout(() => {
        const mapScript = document.createElement('script');
        mapScript.id = 'kakaomap';
        mapScript.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY&autoload=false`;
        document.head.appendChild(mapScript);
        const onLoadKakaoMap = () => {
          kakao.maps.load(() => {
            const container = document.getElementById(this.kakaomap.id);
            const options = {
              center: new kakao.maps.LatLng(this.kakaomap.latitude, this.kakaomap.longitude),
              level: this.kakaomap.level
            };
            const map = new kakao.maps.Map(container, options);
            const imageSrc = this.kakaomap.marker;
            const imageSize = new kakao.maps.Size(64, 69); // 마커이미지의 크기입니다
            const imageOption = { offset: new kakao.maps.Point(27, 69) }; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.

            // 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
            const markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption);
            const markerPosition = new kakao.maps.LatLng(this.kakaomap.latitude, this.kakaomap.longitude); // 마커가 표시될 위치입니다

            const marker = new kakao.maps.Marker({
              position: markerPosition,
              image: markerImage // 마커이미지 설정
            });

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

            // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
            const iwContent = `<div style="padding:5px;">${this.kakaomap.name}</div>`;
            const iwPosition = new kakao.maps.LatLng(this.kakaomap.latitude, this.kakaomap.longitude); // 인포윈도우 표시 위치입니다
            const iwRemoveable = true; // removeable 속성을 true 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다

            // 인포윈도우를 생성합니다
            const infowindow = new kakao.maps.InfoWindow({
              position: iwPosition,
              content: iwContent,
              removable : iwRemoveable
            });

            // 마커 위에 인포윈도우를 표시합니다. 두번째 파라미터인 marker를 넣어주지 않으면 지도 위에 표시됩니다
            infowindow.open(map, marker);
          });
        };
        mapScript.addEventListener('load', onLoadKakaoMap);
        this.loading = false;
      }, 10);
    } catch (err) {
      console.log(err);
    }
  }

  public ngOnDestroy(): void {
    $('#kakaomap').remove(); // 카카오 맵 연동된 스크립트 제거
  }
}

카카오 map api 샘플 가이드 :  https://apis.map.kakao.com/web/sample/