http://kr.open.gugi.yahoo.com/

Version 3.7 야후! 지도 AJAX API – 클래스 참조문서

http://kr.open.gugi.yahoo.com/document/reference.php

 

   1:  <html>
   2:  <head>
   3:  <script type="text/javascript" src="http://kr.open.gugi.yahoo.com/Client/AjaxMap.php?v=3.7&appid=YahooDemo"></script>
   4:   
   5:  <style type="text/css">
   6:  #map{
   7:      height: 300px;
   8:      width: 640px;
   9:  }
  10:  </style>
  11:   
  12:  <script type="text/javascript">
  13:  <!--
  14:   
  15:  function StartYMap()
  16:  {
  17:      // 지도 오브젝트를 생성 합니다.
  18:      var map = new YMap(document.getElementById('map'));
  19:   
  20:      // 지도 유형 콘트롤을 추가합니다.
  21:      map.addTypeControl();
  22:      // 지도 확대/축소 콘트롤을 추가합니다.
  23:      map.addZoomLong();
  24:      // 지도 이동 콘트롤을 추가합니다.
  25:      map.addPanControl();
  26:   
  27:      // 지도보기 유형을 선택합니다.
  28:      // YAHOO_MAP_SAT: 위성지도
  29:      // YAHOO_MAP_HYB: 하이브리드 지도
  30:      // YAHOO_MAP_REG: 일반지도
  31:      map.setMapType(YAHOO_MAP_REG);
  32:   
  33:   
  34:      // 지명을 이용하여 지도의 표시 위치를 지정한다.
  35:      // 이때 한글은 encodeURIComponent를 이용하여 encode된 문자열을 전달해주어야 한다.
  36:      //    map.drawZoomAndCenter(encodeURIComponent("삼성동"),3);
  37:   
  38:      map.drawZoomAndCenter(encodeURIComponent("교보문고"),3);
  39:      var newMarker= new YMarker(encodeURIComponent("교보문고"));
  40:      newMarker.addAutoExpand("교보문고");
  41:      map.addOverlay(newMarker);
  42:  }
  43:   
  44:   
  45:  window.onload = StartYMap;
  46:   
  47:  //-->
  48:  </script>
  49:   
  50:  </head>
  51:   
  52:  <body>
  53:  <div id="map"></div>
  54:  </body>
  55:  </html>

Yahoo 지도 API를 이용해 회사 근처의 '교보문고' 를 축소 3단계로 검색하고, 지도에 마크를 표시하도록 처리해 본 소스입니다.

 

보다시피 내용이 어렵지 않고

메소드도 간결하여 자바스크립트로 지도를 가지고 하는 처리를 쉽게 작성할 수 있을 듯 하네요.

유사한 주제의 글들을 살펴보세요:

Latest Comment

티스토리 툴바