🟩 Frontend-HTML & CSS & +JS/🔰HTML & CSS & JQ
[Kakao Map API] (쉬운 방법) HTML& JavaScript로 카카오 맵 마커 및 상세정보 표현하기
ramen2
2024. 7. 14. 04:32
반응형
1. 카카오 디벨로퍼 에 들어가서 애플리케이션을 추가함
https://developers.kakao.com/console/app
카카오계정
accounts.kakao.com
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
길찾기로 위치를 검색 후 더블클릭하여 '여기를 출발지로 설정' 클릭하면 좌표값이
주소창에 나타나므로 복사하여 사용하면 됨
++ 여러가지를 섞어서 활용하면 아래와 같이 나타내면서, 클릭시 해당 업체 정보창까지 이동 할 수있음
반응형