[Kakao Map API] (쉬운 방법) HTML& JavaScript로 카카오 맵 마커 및 상세정보 표현하기

 

1. 카카오 디벨로퍼 에 들어가서 애플리케이션을 추가함

 

https://developers.kakao.com/console/app

카카오계정

 

 

 

 

 

2. 플랫폼에서 맵을 동작하고자 하는 주소를 입력함 (나는 liveserver로 동작시에 표기되는 ip주소를 등록함)

(도메인주소 마지막 부근에 / 를 입력하면 안됨)

 

 

 

 

3. 앱키 에서 JavaScript 키를 복사하여 넣음

 

 

 

 

4. 카카오 maps API 의 웹에 에 접속하여 원하는 샘플을 고름

https://apis.map.kakao.com/web/

 

 

 

 

 

 

5. JS + html을 복사하고 Vscode에 붙혀놓은 후,  3. 에서 발급받은api키 를 넣고 마음껏 커스텀 하면 끝

 

 

 

 

 

 

 

++ 6 . 원하는 좌표값은 구글에서 찾기

https://www.google.com/maps/?entry=ttu

길찾기로 위치를 검색 후 더블클릭하여 '여기를 출발지로 설정' 클릭하면 좌표값이 

주소창에 나타나므로 복사하여 사용하면 됨

 

 

 

 

 

 

++ 여러가지를 섞어서 활용하면 아래와 같이 나타내면서, 클릭시 해당 업체 정보창까지 이동 할 수있음