네이버 지도 이용시 api key 적용하기

[jhlee]

안녕하세요.

최근 AI Naver Maps API가 Naver Cloud Platform Maps API으로 전환됨에 따라 마이그레이션을 완료했습니다.

기존 지도 서비스는 selectfromuser.com 도메인에만 서비스를 허용하고있어

Custom domain 사용자는 “인증 오류” 가 지도에 표시되는 문제가 있습니다.

이때 mapOptions.ncpKeyId 를 통해 직접 키를 지정 가능합니다.

• 자사 커스텀 도메인을 위한 NCP Application (web url) 새로 발급하여 서비스 중단 없이 계속 이용

Before:

After:

전체 YAML을 공유합니다.

  - type: query
    resource: mysql.qa
    sqlType: select
    sql: >
      SELECT * FROM test_map
    display: map
    
    displayFn: |

      for (const row of rows) {
        // 마커 추가
        const marker = new naver.maps.Marker({
          position: new naver.maps.LatLng(row.lat, row.long),
          title: row.name,
          map: map,
        });

        naver.maps.Event.addListener(marker, 'click', function(e) {
          // console.log('>>>선택한 로우 데이터', row)
          
          // 모달 열기
          openModal('view', row)
        });
      }

      // 지도를 첫번째 마커로 옮기기
      map.setCenter(new naver.maps.LatLng(rows[0].lat, rows[0].long))

    height: 600px
    width: 100%

    mapOptions:
      zoom: 15
      zoomControl: true
      ncpKeyId: "API_KEY"

NCP Console 화면