분명히 제공되고 있는 API들이 많을텐데 나는 초보자니까 가장 많이 사용되는 지도를 이용할 것이다.
네이버지도도 있고 구글지도, 카카오맵도 존재하나 현재는 네이버지도를 사용하였다.
해당 사이트에 접속 후 회원가입을 한다.
(같은 네이버지만 아마 자회사 느낌이라고 보면 된다 그래서 네이버로그인이 되어있어도 네이버아이디로 새로 클라우드플렛트폼에 가입을 해줘야 한다.)
가입을 완료 했다면 우측 상단에 콘솔을 클릭한 후 아래의 화면처럼 나올 것이다.
좌측의 Services를 클릭 후 AI를 검색하면 AI·NAVER API 가 나올 것이다. 그것을 클릭한다
그 다음 Application 추가를 해줘서 선택을 해주면 다양한 것들이 나오는데 이름을 설정하고 maps에서 주로 사용되는 것은 Web Dynamic Map을 체크해준다. 현재는 무료로 진행되고 있다.
선택을 해준 후 아래에 많은 것들이 있는데 로컬만 진행하는 사람은 아마 스프링부트를 하기 때문에 localhost:8080을 입력해주면 되고 도메인 구입자들은 도메인을 혹은 EC2에서 외부주소를 받은 사람은 그것에 맞게 입력을 해주면 된다.
그렇게 되면 다양한 것들이 보이는데
가리는게 귀찮아서 대충 가렸다. 이곳에서 필요로 하는 것은 Client ID와 Client Secret인데 시크릿은 아직 어디다 써먹어야 할지 잘 모르겠고 아무튼 Client ID를 가지게 되었다면 이를 활용하면 된다. 활용의 예시를 보여주겠다.
https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-Getting-Started.html
NAVER Maps API v3
NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다.
navermaps.github.io
이곳에서 사용법이 나오는데 초보자가 봐도 모르는 부분에 대해서 조금 입력을 해보겠다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>간단한 지도 표시하기</title>
<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=당신이 발급받은 Client ID입력"></script>
</head>
<body>
<div id="map" style="width:100%;height:400px;"></div>
<script>
var mapOptions = {
center: new naver.maps.LatLng(37.3595704, 127.105399),
zoom: 10
};
var map = new naver.maps.Map('map', mapOptions);
</script>
</body>
</html>내가 '당신이발급받은 클라이언트 아이디라고 적어놨는데 그것을 입력해줘야 한다.
추가적으로 적을 내용이 있다면 바로 자신이 스프링부트를 진행하고 있다면 분명 로컬호스트:8080만 입력해서 했을텐데
현재 받은 APP에서 수정을 누른 후 입력을 해주면 되고 아마 이때 클라이언트 아이디나 시크릿이 변경될 수 있으니 주의해서 입력을 해주면 된다.(생각해보니 변경할 것은 없었던 것 같고 주소 추가라고 해서 아이디가 변경되거나 하지는 않았던 것 같다.