[네이버지도API / javascript] 네이버 지도 API v3 주소만으로 완전 간단하게 사용하기

javascript로 네이버 지도 API v3 를 쉽게 이용하는 방법을 알아보겠습니다.
위의 이미지 처럼 주소를 이용해서 커스텀 아이콘과 html로 이름을 넣어보겠습니다.


- html -
<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId=클라이언트ID&submodules=geocoder"></script>
<div id="map"></div>


- javascript -
<script type="javascript">
var map = new naver.maps.Map('map');
var myaddress = '서울특별시 중구 태평로1가 31';// 이곳에 주소를 넣어주세요. 도로명 주소나 지번 주소만 가능
naver.maps.Service.geocode({address: myaddress}, function(status, response) {

    if (status !== naver.maps.Service.Status.OK) {
        return alert(myaddress + '의 검색 결과가 없거나 기타 네트워크 에러');
    }
 
    var result = response.result;
    var myaddr = new naver.maps.Point(result.items[0].point.x, result.items[0].point.y);
    map.setCenter(myaddr); // 검색된 좌표로 지도 이동
    // 마커 표시
    var div_text = '<div style="width:300px; position:absolute; top:10px; left:33px; text-align:left; color:red; font-weight:bold; font-size:12px;">서울특별시청</div>';
    var marker = new naver.maps.Marker({
      position: myaddr,
      map: map,
      title: texts,
      icon: {
       content: '<img src="마커이미지 주소" alt="" style="margin: 0px; padding: 0px; border: 0px solid transparent; display: block; max-width: none; max-height: none; -webkit-user-select: none; position: absolute; width: 32px; height: 32px; left: 0px; top: 0px;"><br />'+div_text,
       size: new naver.maps.Size(32, 32),
       anchor: new naver.maps.Point(16, 30)
      }
    });
});
</script>


빨간색으로 표시된 클라이언트ID, 주소, 인포윈도우에 넣을 html, 마커이미지주소 만 넣어주시면 됩니다.
클라이언트ID는 아래의 링크를 들어가시면 내 어플리케이션 등록하는 방법이 자세하게 나와 있습니다.
https://navermaps.github.io/maps.js/docs/tutorial-Getting-Started-Register-Application.html