티스토리에 카카오맵(로드뷰)을 추가해보자(kakao map api)-2

2021/01/01 - [IT/이것저것] - 티스토리에 카카오맵(로드뷰)을 추가해보자(kakao map api)-1

티스토리에 카카오맵(로드뷰)을 추가해보자(kakao map api)-1

이전 블로그에서 기본적인 설정이 끝났으니, 다음 예제를 따라가려고 합니다.

다음 예제는 아래의 주소를 참조해주세요.

apis.map.kakao.com/web/guide/#start

카카오는 진짜 공지사항도 특이하게 친절한 느낌이고, 가이드 또한 친절한 느낌입니다.

지도를 사용하기 위해 블로그에서도 해야할 것이 있습니다.

바로 기본모드에서 HTML모드로 변경하는 것인데요.

코드들이 무섭게 생겼지만 예제만 따라가면 어렵지 않습니다. 

원하는 위치에 소스를 복사합니다.

출처 : https://apis.map.kakao.com/web/guide/#start

예제 소스를 추가할때 발급 받은 APP KEY를 넣으시면 됩니다 부분에 Java script 앱 키를 추가하면 됩니다.

위의 예제가 정상이든 정상적이지 않든 추가 되었다면, 아래의 이미지가 본문에 표시됩니다.

앱 키가 제대로 추가 안되었다면 게시물을 공개할 때 해당 스크립트 부분이 공란으로 나오고, 제대로 추가되었다면 지도가 표시될 겁니다.

 

제대로 입력했다면 아래와 같이 추가 될 것입니다.

또한 본문 중 center: new kakao.maps.LatLng(33.450701,126.570667) 가 위도, 경도 정보이며, 해당 부분을 수정하면 다른 위치를 볼 수 있습니다.