Angular Ionic에서 Kakao Map API 사용하기

npm install @types/kakao.maps kakao.maps --save

1. kakaoMap 설치

 

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


export class KakaoMapComponent implements OnInit {
  ngOnInit() {
    this.initializeMap();
  }

  initializeMap() {
    const container = document.getElementById('map');
    const options = {
      center: new kakao.maps.LatLng(37.5665, 126.9780),
      level: 5
    };
    const map = new kakao.maps.Map(container, options);
  }
}

2. 컴포넌트 생성

 

 

<div id="map"></div>

3. 지도를 표시할 템플릿

 

"scripts": [
  "node_modules/kakao.maps-sdk-for-web/kakao.js"
]

4. angular.json 파일에 해당 스크립트 추가

 

5. 제 경우 nx 를 사용하기에 project.json 파일에 추가했습니다.