https://navermaps.github.io/maps.js/

예제 (업데이트가 안되어서 정보가 잘못되었다. 20190225)

https://navermaps.github.io/maps.js/docs/tutorial-2-Getting-Started.html

네이버 지도 클라우드 플랫폼

https://www.ncloud.com/

https://console.ncloud.com/mc/solution/naverService/application

예제코드

<script type="text/javascript" src="http://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=클라이언트아이디"></script>
<div class="map_wrap">
   <h1>오시는 길</h1>
   <div class="map_view">
      <div id="map" style="width:100%;height:400px;"></div>
      
      <script>

         var map = new naver.maps.Map('map', {
            center: new naver.maps.LatLng(35.8469571,128.5805891),
            zoom: 11
         });

         var marker = new naver.maps.Marker({
            position: new naver.maps.LatLng(35.8469571,128.5805891),
            map: map
         });
      </script>
   </div>
   <div class="map_info_wrap">
      <ul class="map_info">
         <li><span>주소</span>서울시 중구 칠패로 27 포스코더샵 A동 412호</li>
         <li><span>전화</span>0507-1343- 5157</li>
         <li><span>팩스</span>0504-481-5157</li>
      </ul>
   </div>
   <h2>지하철 이용시</h2>
   <h3>1호선*4호선 서울역 하차후</h3>
   <div class="desc">
      3번출구 – 200m 직진 후 Wise Tower를 끼고 좌회전 후100m 직진 – 연세재단 봉래빌딩 주차장을 지나서 올라오셔서 전방 횐당보도를 건너면 왼쪽에 순화동 포스코 더샾 주상복합 건물 – 오피스 A동 412호 <br>
      * 떡복이 집과 편의점 사이에 있는 현관문 이용
   </div>
   <h2>버스 이용시</h2>
   <h3>염천교 정류장</h3>
   <div class="desc">
      <b>간선버스(파랑)</b> 173, 261, 262 <br>
      <b>지선버스(초록)</b> 7011, 7017</div>
   
   <h3>숭례문 정류장</h3>
   <div class="desc">
      <b>간선버스(파랑)</b> 100, 103, 104, 105, 150, 151, 152, 162, 173, 201, 202, 261, 262, 400, 401, 405, 406,421, 471, 500, 501, 502, 504, 505, 506, 603, 701, 704 <br>
      <b>지선버스(초록)</b> 7017, 7021, 70226
   </div>
   
   <h2>자가용 이용시</h2>
   <div class="desc">네비게이션에 “순화동 포스코 더샵” 또는 “라마다호텔엔스위트 남대문” 입력</div>


</div>

주소를 좌표로 변환하는 사이트

http://0ff.kr/api_/d_geocode_new.php?addr=%EC%84%9C%EC%9A%B8%EC%8B%9C+%EC%A4%91%EA%B5%AC+%EC%B9%A0%ED%8C%A8%EB%A1%9C+27+%ED%8F%AC%EC%8A%A4%EC%BD%94%EB%8D%94%EC%83%B5