NAVER MAP API를 검색하면 네이버 지도 V3 사이트가 나옵니다.
https://navermaps.github.io/maps.js/
NAVER Maps API v3
NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다.
navermaps.github.io
이 페이지에서 시작하기를 누르면 예시가 나오는데
해당 예제로는 맵이 불러와지지 않습니다.
이유는 우측 상단에 서비스 종료 공지사항에서 확인이 가능한데
뭐...다 안읽어봐서 모르겠습니다ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
그냥 뭐 안쓰겠다는데 방법이 있나;;;;
여기서 중요한 건
----------------------------------------------------------------------------------------------------------------------
Q3. 네이버 클라우드 플랫폼으로 이관을 하려면 무엇을 변경해서 사용해야 하나요?
A3. 호출 URL, 인증 파라미터 이름(ClientID → ncpClientID),
키 값이 변경되니 인증 부분만 확인하여 수정 후 이용해 주시면 됩니다.
단, Web Dynamic Map 경우에는 네이버 개발자센터에서 쓰던 호출 URL 그대로 사용하시면 됩니다.
인증 파라미터, 키값만 바꿔서 사용해주세요.
----------------------------------------------------------------------------------------------------------------------
이 부분!!!!!
예제에서 ClientId를 ncpClientId 로 변경만 하면 됩니다.
기존에 네이버맵을 사용했던 건 아니라 clientId를 변경해야되는지는 모르겠지만;;
뜬 예제에서 여기만 변경해주면!! 됩니다.
<!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={ClientId}"></script>
</head>
<body>
<div id="map" style="width:100%;height:400px;"></div>
<script>
var mapOptions = {
center: new naver.maps.LatLng(37.51231, 127.12312),
zoom: 18
};
var map = new naver.maps.Map('map', mapOptions);
var marker = new naver.maps.Marker({
position: new naver.maps.LatLng(37.51231, 127.12312),
map: map
});
// naver.maps.Event.addListener(map, 'click', function(e) {
// marker.setPosition(e.latlng);
// });
</script>
</body>
</html>
위도와 경도는 아래 주소에서 검색해서 찾으시면 됩니다.
참고로 위 주석은 클릭때마다 좌표값이 변경되는건데...음...쓸 일은 별로 없을 듯 싶네요 ㅋㅋㅋㅋㅋ
clientId는
https://www.ncloud.com/product/applicationService/maps
NAVER CLOUD PLATFORM
cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification
www.ncloud.com
여기에 로그인 후 콘솔에 들어가서
메뉴 밑에 AI.NAVER API - application 에 들어간 다음에
Application 등록 - Web Dynamic Map 을 등록 후
도메인까지 등록하시면 사용이 가능합니다.
'개발놈' 카테고리의 다른 글
| [javascript] 쿠키 써서 더블클릭 막기 (0) | 2022.07.25 |
|---|---|
| [ANDROID] 버튼 더블클릭 방지하는 방법 (0) | 2022.07.22 |
| [JAVA]비밀번호는 알 수 없다면서 어떻게 이전 비밀번호는 알까??(feat.해시) (0) | 2022.06.17 |