앵귤러 카카오맵 api 질문 드립니다

지도/로컬 API
, ,
#1

안녕하세요.
Angular9를 이용하여 개발을 진행하고 있습니다.
프로젝트에서 맵을 띄우고, 좌표에 대한 주소값을 가져올 일이 있어 카카오 API를 사용하려고 하는데 Angular 자료가 많지 않다보니 찾기가 힘드네요.

아무 오류 없이 동작은 하고 있지만, 실제로 Map이 나오진 않고 있습니다…
26

코드는 아래와 같이 작성되었습니다.

[ kakao-map.component.ts ]
`
declare var kakao: any;

@Component({
selector: ‘app-kakao-map’,
templateUrl: ‘./kakao-map.component.html’,
styleUrls: [’./kakao-map.component.scss’]
})
export class KakaoMapComponent implements AfterViewInit {
@ViewChild(‘map’) mapEl: ElementRef;

ngOnInit() {

}

ngAfterViewInit() {
this.renderMap(
this.mapEl.nativeElement,
[37.50802, 127.062835],
3
)
}

private renderMap(
mapContainer: HTMLElement,
coordinate: [ number, number ],
level: number
) {
const options = {
center: new kakao.maps.LatLng(coordinate),
level: level
}

const map = new kakao.maps.Map(mapContainer, options)

}
}
`

[ index.html ]
.
.
.
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey="></script>
.
.
.

혹시 해결하신분이 있다면 도움 부탁드립니다.

#2

coordinate이 배열이기 때문에 지도 중심 좌표를 아래와 같이 설정해주세요.

const options = {
    // center: new kakao.maps.LatLng(coordinate), (X)
    center: new kakao.maps.LatLng(coordinate[0], coordinate[1]), //(O)
    level: level
}