1. 기술 문서 링크 : https://navermaps.github.io/maps.js.ncp/docs/

    예제 모아보기 : https://navermaps.github.io/maps.js.ncp/docs/tutorial-digest.example.html

2. API 사용 신청하기

      -> 이용 신청하기 -> Application 등록 

서비스 선택
환경등록

    -> 위 세팅 후 application 등록 

 * 인증 정보에 API Key

 

3. 사용법 

  • html
<!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=YOUR_CLIENT_ID"></script>
        <script src=" https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

        <style>
            #map {
                width: 100%;
                height: 400px;
            }
        </style>

        <script>
            $(document).ready(function () {
                let map = new naver.maps.Map('map', {
                    center: new naver.maps.LatLng(37.4981125, 127.0379399),
                    zoom: 10
                });
            })
        </script>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

 

  • 확대/축소 버튼
let map = new naver.maps.Map('map', {
	center: new naver.maps.LatLng(37.4981125, 127.0379399),
	zoom: 10,
	zoomControl: true,
	zoomControlOptions: {
	style: naver.maps.ZoomControlStyle.SMALL,
	position: naver.maps.Position.TOP_RIGHT
	}
});

 

  • 마커 생성
let marker = new naver.maps.Marker({
    position: new naver.maps.LatLng(37.4981125, 127.0379399),
    map: map
});
  • 마커 이미지 변경
let marker = new naver.maps.Marker({
	position: new naver.maps.LatLng(37.4981125, 127.0379399),
	map: map,
    icon: "{{ url_for('static', filename='rtan_heart.png') }}"
});

 

  • 정보창 설정 (infowindow)
//생성
let infowindow = new naver.maps.InfoWindow({
    content: `<div style="width: 50px;height: 20px;text-align: center"><h5>안녕!</h5></div>`,
});

infowindow.open(map, marker);  // 정보창 열기(보여주기)
infowindow.open(map, marker);  // 정보창 열기(보여주기)

 

 

  • html 전체 소스코드
<!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=98hquhx0x7"></script>
        <script src=" https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

        <style>
            #map {
                width: 100%;
                height: 400px;
            }
        </style>

        <script>
            $(document).ready(function () {

                //지도 띄우기 & 줌인/줌아웃 버튼 추가
                let map = new naver.maps.Map('map', {
                    center: new naver.maps.LatLng(37.4981125, 127.0379399),
                    zoom: 10,
                    zoomControl: true,
                    zoomControlOptions: {
                        style: naver.maps.ZoomControlStyle.SMALL,
                        position: naver.maps.Position.TOP_RIGHT
                    }
                });
                //마커 생성 & 마커 이미지 삽입
                let marker = new naver.maps.Marker({
                    position: new naver.maps.LatLng(37.4981125, 127.0379399),
                    map: map,
                    icon: "{{ url_for('static', filename='rtan_heart.png') }}"
                });
                // 정보창(infowindow)생성
                let infowindow = new naver.maps.InfoWindow({
                    content: `<div style="width: 50px;height: 20px;text-align: center"><h5>안녕!</h5></div>`,
                });
                // marker에 click이 일어 났을 때 실행
                naver.maps.Event.addListener(marker, "click", function () {
                    console.log(infowindow.getMap()); // 정보창이 열려있을 때는 연결된 지도를 반환하고 닫혀있을 때는 null을 반환
                    if (infowindow.getMap()) {
                        infowindow.close(); //// 정보창 닫기(안보여주기)
                    } else {
                        infowindow.open(map, marker);  // 정보창 열기(보여주기)
                    }
                });

            })
        </script>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

 

  • 지오코딩(Geocoding) 연결하기

참조 문서 : https://api.ncloud-docs.com/docs/ai-naver-mapsgeocoding-geocode

 

headers = {
    "X-NCP-APIGW-API-KEY-ID": "[내 클라이언트 아이디]",
    "X-NCP-APIGW-API-KEY": "[내 클라이언트 시크릿 키]"
}
r = requests.get(f"https://naveropenapi.apigw.ntruss.com/map-geocode/v2/geocode?query={address}", headers=headers)
response = r.json()

if response["status"] == "OK":
	  if len(response["addresses"])>0:
	      x = float(response["addresses"][0]["x"])
	      y = float(response["addresses"][0]["y"])
	      print(title, address, category, show, episode, x, y)
	  else:
	      print(title, "좌표를 찾지 못했습니다")

 

저작자표시 비영리 변경금지

'프로그래밍 > API' 카테고리의 다른 글

다음 주소 API (우편번호 서비스, 주소로 지도 띄우기)  (0) 2022.06.26
API TEST Tool  (0) 2022.05.30
네이버 쇼핑 API  (0) 2022.05.25
Oowlbot 사용법 (영어 사전 API)  (0) 2022.04.29

+ Recent posts

티스토리툴바