다음 api 를 이용한 지도 만들기 (사용자 이미지를 이용한 마커 / 컨크롤 올리기)

다음지도에서 지원하는 약도만들기로 부족할때는 api 를 통해서 지도를 만들어야 합니다.

api 는 api key 가 반드시 필요해서 다음회원으로 가입후 key 를 발급 받아야 합니다.

http://apis.map.daum.net/

우측 상단에 보이는 API KEY 발급 버튼을 눌러서 시작합니다.

이용약관에 동의합니다.

우선 사용할 앱을 먼저 등록합니다.

만들어진 앱으로 사용할수있는 api 들도 보입니다.

사용할 이름을 입력해줍니다.

앱을 만든후 홈페이지에서 자바스크립트를 통하서 지도 api를 사용할거니 RES/JS API 에 + 버튼을 눌러줍니다.

플렛폼을 웹브라우져로 선택하고 사용하려는 도메인 주소를 Referer 에 입력합니다.

http:// 가 빠지면 형식에 맞지 않는다고 경고가 나옵니다.

줄바꿈해서 여려개 등록가능하니 www 있는거 없는거 등을 등록해줍니다.

다 등록하셨으면 이제 API 키를 발급 받으신겁니다.

이 key 값을 복사해 두신후 이제 지도를 만들어 보도록 하겠습니다.

http://apis.map.daum.net/web/wizard/

간단하게 위의 페이지에서 만드실수있습니다.

지도 만들기 기본은 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>지도 생성하기</title>
    
</head>
<body>

<!-- 지도를 표시할 div 입니다 -->
<div id="map" style="width:100%;height:350px;"></div>

<script type="text/javascript" src="//apis.daum.net/maps/maps3.js?apikey=발급받은 API KEY를 사용하세요"></script>


<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = { 
        center: new daum.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };

// 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
var map = new daum.maps.Map(mapContainer, mapOption); 
</script>

</body>
</html>

다음은 원하는 주소를 통해서 지도를 만들어 보겠습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>주소로 장소 표시하기</title>
    
</head>
<body>

<p style="margin-top:-12px">
    <em class="link">
        <a href="javascript:void(0);" onclick="window.open('http://fiy.daum.net/fiy/map/CsGeneral.daum', '_blank', 'width=981, height=650')">
            혹시 주소 결과가 잘못 나오는 경우에는 여기에 제보해주세요.
        </a>
    </em>
</p>
<div id="map" style="width:100%;height:350px;"></div>

<script type="text/javascript" src="//apis.daum.net/maps/maps3.js?apikey=발급받은 API KEY를 사용하세요&libraries=services"></script>


<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = {
        center: new daum.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };  

// 지도를 생성합니다    
var map = new daum.maps.Map(mapContainer, mapOption); 

// 주소-좌표 변환 객체를 생성합니다
var geocoder = new daum.maps.services.Geocoder();

// 주소로 좌표를 검색합니다
geocoder.addr2coord('제주특별자치도 제주시 첨단로 242', function(status, result) {

    // 정상적으로 검색이 완료됐으면 
     if (status === daum.maps.services.Status.OK) {

        var coords = new daum.maps.LatLng(result.addr[0].lat, result.addr[0].lng);

        // 결과값으로 받은 위치를 마커로 표시합니다
        var marker = new daum.maps.Marker({
            map: map,
            position: coords
        });

        // 인포윈도우로 장소에 대한 설명을 표시합니다
        var infowindow = new daum.maps.InfoWindow({
            content: '<div style="padding:5px;">우리회사</div>'
        });
        infowindow.open(map, marker);
    } 
});    
</script>


</body>
</html>
 
위 두개를 이용해서 윈포윈도우 없이 마커만 있는 지도를 만들어 보겠습니다.
 
<div id="map" style="width:754px;height:341px;"></div>
<script type="text/javascript" src="//apis.daum.net/maps/maps3.js?apikey=발급받은 API KEY를 사용하세요&libraries=services"></script>
<script>
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new daum.maps.services.Geocoder();
// 주소로 좌표를 검색합니다
geocoder.addr2coord('제주특별자치도 제주시 첨단로 242', function(status, result) {
    // 정상적으로 검색이 완료됐으면
     if (status === daum.maps.services.Status.OK) {
        var coords = new daum.maps.LatLng(result.addr[0].lat, result.addr[0].lng);
 
  var mapContainer = document.getElementById('map'), // 지도를 표시할 div
      mapOption = {
          center: coords, // 지도의 중심좌표
          level: 3, // 지도의 확대 레벨
          mapTypeId : daum.maps.MapTypeId.ROADMAP // 지도종류
      };
 
  // 지도를 생성합니다
  var map = new daum.maps.Map(mapContainer, mapOption);
        // 결과값으로 받은 위치를 마커로 표시합니다
        var marker = new daum.maps.Marker({
            map: map,
            position: coords
        });
 
  // 마커가 지도 위에 표시되도록 설정합니다
  marker.setMap(map);
    }
});
</script>
여기에 확대 축소등 컨트롤을 올려보겠습니다.

<div id="map" style="width:754px;height:341px;"></div>
<script type="text/javascript" src="//apis.daum.net/maps/maps3.js?apikey=발급받은 API KEY를 사용하세요&libraries=services"></script>
<script>
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new daum.maps.services.Geocoder();
// 주소로 좌표를 검색합니다
geocoder.addr2coord('제주특별자치도 제주시 첨단로 242', function(status, result) {
    // 정상적으로 검색이 완료됐으면
     if (status === daum.maps.services.Status.OK) {
        var coords = new daum.maps.LatLng(result.addr[0].lat, result.addr[0].lng);
 
  var mapContainer = document.getElementById('map'), // 지도를 표시할 div
      mapOption = {
          center: coords, // 지도의 중심좌표
          level: 3, // 지도의 확대 레벨
          mapTypeId : daum.maps.MapTypeId.ROADMAP // 지도종류
      };
 
  // 지도를 생성합니다
  var map = new daum.maps.Map(mapContainer, mapOption);
        // 결과값으로 받은 위치를 마커로 표시합니다
        var marker = new daum.maps.Marker({
            map: map,
            position: coords
        });
 
  // 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
  var mapTypeControl = new daum.maps.MapTypeControl();
  // 지도에 컨트롤을 추가해야 지도위에 표시됩니다
  // daum.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
  map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);
  // 지도 확대 축소를 제어할 수 있는  줌 컨트롤을 생성합니다
  var zoomControl = new daum.maps.ZoomControl();
  map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);
 
  // 마커가 지도 위에 표시되도록 설정합니다
  marker.setMap(map);
    }
});
</script>
 
마지막으로 마커를 회사로고등으로 바꿔보겠습니다.
 
 
<div id="map" style="width:754px;height:341px;"></div>
<script type="text/javascript" src="//apis.daum.net/maps/maps3.js?apikey=발급받은 API KEY를 사용하세요&libraries=services"></script>
<script>
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new daum.maps.services.Geocoder();
// 주소로 좌표를 검색합니다
geocoder.addr2coord('제주특별자치도 제주시 첨단로 242', function(status, result) {
    // 정상적으로 검색이 완료됐으면
     if (status === daum.maps.services.Status.OK) {
        var coords = new daum.maps.LatLng(result.addr[0].lat, result.addr[0].lng);
  var mapContainer = document.getElementById('map'), // 지도를 표시할 div
      mapOption = {
          center: coords, // 지도의 중심좌표
          level: 3, // 지도의 확대 레벨
          mapTypeId : daum.maps.MapTypeId.ROADMAP // 지도종류
      };
  // 지도를 생성합니다
  var map = new daum.maps.Map(mapContainer, mapOption);

  // 일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
  var mapTypeControl = new daum.maps.MapTypeControl();
  // 지도에 컨트롤을 추가해야 지도위에 표시됩니다
  // daum.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
  map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);
  // 지도 확대 축소를 제어할 수 있는  줌 컨트롤을 생성합니다
  var zoomControl = new daum.maps.ZoomControl();
  map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);

  var imageSrc = '/img/icon.png', // 마커이미지의 주소입니다
      imageSize = new daum.maps.Size(52, 61), // 마커이미지의 크기입니다
      imageOprion = {offset: new daum.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
  // 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
  var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imageOprion),
      markerPosition = new daum.maps.LatLng(37.54699, 127.09598); // 마커가 표시될 위치입니다

        // 결과값으로 받은 위치를 마커로 표시합니다
        var marker = new daum.maps.Marker({
            map: map,
            position: coords,
            image: markerImage // 마커이미지 설정
        });
  // 마커가 지도 위에 표시되도록 설정합니다
  marker.setMap(map);
    }
});
</script>

저작자표시 비영리 변경금지

'Story > api/연동' 카테고리의 다른 글

네이버 지식쇼핑 EP 3.0 (1)	2016.12.12
hotmail.com 으로 메일 발송이 안될때 (0)	2016.06.10
다음 약도만들기 지도 서비스 (0)	2015.09.23
알리페이 alipay Integration Guide (0)	2015.05.12
Twitter Developers - API Updates for Direct Messages Rules (0)	2015.04.22

Stdio

다음 api 를 이용한 지도 만들기 (사용자 이미지를 이용한 마커 / 컨크롤 올리기)

'Story > api/연동' 카테고리의 다른 글

티스토리툴바

다음 api 를 이용한 지도 만들기 (사용자 이미지를 이용한 마커 / 컨크롤 올리기)

'Story > api/연동' 카테고리의 다른 글

'Story/api/연동' Related Articles

티스토리툴바