이번 게시물은 스프링부트로 카카오 지도 API를 사용하여 웹페이지에 지도를 띄우는 프로젝트입니다.
이전 게시물 : 카카오 로그인 버튼 구현하기 (스프링부트)
https://rexondex.tistory.com/27
https://apis.map.kakao.com/web/guide/
↑ ↑ ↑
(참고) 카카오 지도 Web API 가이드 링크
1) kakao-map.html (임의) 를 작성합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kakao 지도 시작하기</title>
</head>
<body>
<div id="map" style="width:500px;height:400px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=당신의 javascript api 키 입력"></script>
<script>
var container = document.getElementById('map');
var options = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 3
};
var map = new kakao.maps.Map(container, options);
</script>
</body>
</html>
2) 자바스크립트 키 발급 / 사이트 도메인 설정
3) 스프링 컨트롤러 매핑
@Controller
public class HomeController {
@GetMapping("/index")
public String index() {
return "index";
}
@GetMapping("/home")
public String home() {
return "home";
}
@GetMapping("/error")
public String error() {
return "error";
}
// 카카오 맵
@GetMapping("/kakao-map")
public String kakaoMap() {
return "kakao-map";
}
}
이전에 작성해두었던 3가지 겟매핑 아래에 카카오맵 html을 호출하도록 메소드를 하나 더 추가했습니다.
4) 브라우저에서 접속 및 확인
지도를 띄운 후에도 라이브러리나 URL을 사용하여 상용서비스에서 이미 카카오지도를 잘 활용하고 있는 것처럼,
링크 및 길찾기, 마커 등 다양한 활용이 가능합니다.
쇼핑몰 어플리케이션 이나 중고거래 플랫폼 등 활용가능한 API 자원 중 지도 API는 아직도 활발히 사용되고 있습니다.
물건을 주문 및 전송 할때나, 중고거래 위치를 확인하는 등 활용점은 매우 많다고 생각합니다.
카카오맵도 있지만 네이버 맵도 있습니다. 이전에 사용해 본 경험으로는 두 지도가 꽤 다른 매커니즘을 가지고 있어서 필요에 따라 선택하면 더 용이하게 어플리케이션을 개발할 수도 있겠습니다.
지도API를 사용하며 느낀점은 자바스크립트를 이용해 지도를 동적으로 조작하는 것도 가능하므로 자바스크립트를 자유로이 사용할 수 있는 역량도 중요하다고 생각했습니다.
자바스크립트 로직을 직접 설계하고 작성하는 능력을 키우면 웹표준을 다루는 데 있어서 훨씬 유리할 것 같았습니다.
'API' 카테고리의 다른 글
| Node.js 서버로 카카오 로그인을 구현해보자 [MongoDB/JWT] (0) | 2024.10.30 |
|---|---|
| 스프링부트에서 페이팔 결제 API를 사용해보자 [PayPal/후기] (1) | 2024.10.28 |
| 스프링부트 카카오 로그인 버튼 구현하기 [REST API/후기] (3) | 2024.10.21 |