블로그 전체목록

네이버 지도 API key 발급 방법 (Naver Map API)

기술정보 24.04.05

네이버 에서 제공하는 지도 API를 이용하려면 먼저 구글에서 발급하는 API Key를 발급받아야 합니다.

※ 지도 서비스를 정상적으로 사용하시려면, 홈페이지에 보안 인증서(HTTPS) 설치가 필요합니다.

1. 로그인

네이버 클라우드 플랫폼 웹사이트에 가입하거나 기존 계정으로 로그인합니다.

네이버 클라우드 웹사이트: https://www.ncloud.com/

2. maps 이용 신청하기

로그인 후 화면 상단 메뉴 서비스 > Application Service > map 선택합니다.

(https://www.ncloud.com/product/applicationService/maps)

3. Application 등록

결제 수단 등록 후 나오는 콘솔에서 Application을 등록합니다.

AI · Naver Service 를 이용할 Application 이름을 설정합니다.

Application에서 이용할 Service > Web Dynamic Map 선택합니다.

Application에서 이용할 서비스 환경을 예시에 맞게 작성 후 추가합니다.

4. Application 인증 정보 확인

Application key > Client ID로 앱키 사용합니다.

[예시]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>
    <head>
        <title>Naver 지도 시작하기</title>
        <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=발급받은 APP KEY를 넣으시면 됩니다.&callback=initMap"></script>
    </head>
    <body>
        <div id="map" style="width:100%;height:100%;"></div>
    </body>
 
    <script>
        var map = new naver.maps.Map('map', {
            center: new naver.maps.LatLng(x값, y값), //지도의 초기 중심 좌표
            useStyleMap: true,
            zoom: 줌레벨, //지도의 초기 줌 레벨
            minZoom: 1, //지도의 최소 줌 레벨
            mapTypeControl: true, //지도 유형 컨트롤의 표시 여부
            mapTypeControlOptions: { //지도 유형 컨트롤의 옵션
                style: naver.maps.MapTypeControlStyle.BUTTON,
                position: naver.maps.Position.TOP_LEFT
            },
            zoomControl: true, //줌 컨트롤의 표시 여부
            zoomControlOptions: { //줌 컨트롤의 옵션
            position: naver.maps.Position.TOP_RIGHT
                        
            }
        });
        //정보창
    
        var contentString = [
            '',
            "   ",
            '
'
        ].join('');
    
        var marker = new naver.maps.Marker({
            position: new naver.maps.LatLng(x값,y값),
            map: map
        });
    
        var infowindow = new naver.maps.InfoWindow({
            content: contentString,
            anchorSize: new naver.maps.Size(15, 5),
            pixelOffset: new naver.maps.Point(0, -10)
        });
    
        naver.maps.Event.addListener(marker, "click", function(e) {
            if (infowindow.getMap()) {
                infowindow.close();
            } else {
                infowindow.open(map, marker);
            }
        });
    
        infowindow.open(map, marker);
    
        //setOptions 메서드를 통해 옵션을 조정할 수도 있습니다.
        map.setOptions("mapTypeControl", true); //지도 유형 컨트롤의 표시 여부
    </script>
</html>
 
Colored by Color Scripter
cs

블로그 전체목록

최근 포스트