네이버 지도 API (naver map API)

가입 및 인증

https://console.ncloud.com

주소를 좌표로 변환

[map.html]

<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&submodules=geocoder"></script>

[map.js]

function getCoordinates(address) {
  return new Promise((resolve, reject) => {
    naver.maps.Service.geocode({
      query: address
    }, function(status, response) {
      if (status !== naver.maps.Service.Status.OK) {
        return reject(new Error('주소를 찾을 수 없거나 오류가 발생했습니다.'));
      }
      var result = response.v2;
      var items = result.addresses;
      if (items.length > 0) {
        resolve({ latitude: items[0].y, longitude: items[0].x });
      } else {
        reject(new Error('주소에 해당하는 좌표 정보를 찾을 수 없습니다.'));
      }
    });
  });
}

async function main () {
  try {
    const address = '불정로 6';
    const coordinates = await getCoordinates(address);
    console.log(coordinates); // { latitude: 위도, longitude: 경도 }
  } catch (error) {
    console.error(error.message);
  }
}

main();

지도 생성

[map.html]

<div id="map"></div>

[map.css]

html, body {
  margin: 0;
  padding: 0;
}
#map {
  width: 100%;
  height: 100%;
}

[map.js]

const map = new naver.maps.Map(document.getElementById('map'), {
  center: new naver.maps.LatLng(coordinates.latitude, coordinates.longitude)
});

지도 타입 컨트롤러 삽입

[map.js]

const map = new naver.maps.Map(document.getElementById('map'), {
  mapTypeControl: true,
  mapTypeControlOptions: {
    style: naver.maps.MapTypeControlStyle.DROPDOWN
  }
});

컨트롤러의 스타일을 드롭다운으로 설정했다.

지적도 추가, 제거

[map.html]

<button id="cadastralOn">지적도 켜기</button>
<button id="cadastralOff">지적도 끄기</button>

[map.js]

const cadastralOn = document.getElementById('cadastralOn');
const cadastralOff = document.getElementById('cadastralOff');

const cadastralLayer = new naver.maps.CadastralLayer();

cadastralOn.addEventListener('click', event => {
  cadastralLayer.setMap(map);
});

cadastralOff.addEventListener('click', event => {
  cadastralLayer.setMap(null);
});

zoom 설정

[map.js]

const map = new naver.maps.Map(document.getElementById('map'), {
  zoom: 17
});

마커 표시

[map.js]

const marker = new naver.maps.Marker({
  position: new naver.maps.LatLng(coordinates.latitude, coordinates.longitude),
  map: map
});