매뉴얼

친절한 상담, 빠른 답변

견적문의, 기능상담 등 모든 궁금증을 해결해 드립니다.

Page : Home 고객지원 매뉴얼

총 11건, 1/2 페이지

[지도API] 오시는길(약도)을 구글지도 API 연동 방법 / 정확한 위치에 마크 표시하는 방법

아래소스를 원하는 위치에 붙여 넣으면 주소기준으로 구글지도를 출력 할 수 있습니다.

 

 

<script type="text/javascript">google_map_addr('아싸닷컴', '부산광역시 해운대구 우동 1459 퍼스트인센텀 501호', '100%', '100%', 16);</script>

 

자세한 사용법은 매뉴얼 참고 바랍니다.  http://manual.good-web.co.kr/page/basic1_07

 

이렇게 주소만 가지고도 구글 지도를 출력 할수 있지만, 경우에 따라서는 정확하게 위치를 찾지 못하는경우가 많습니다.

이런경우 아래와 같이 처리 하시면 됩니다.

 

1. [기본정보관리 > 사이트정보 설정 > 기본정보설정] 에서 아래와 같이 주소 입력 후 [지도 확인]을 클릭 합니다.

 

 

2. 정확한 위치를 클릭 하세요.

 

 

3. 소스를 아래와 같이 수정해주세요.

 

 

<script type="text/javascript">google_map_xy('{$shop_base[company_name]}', {$shop_base[google_map_x]},{$shop_base[google_map_y]}, '100%', '100%', 16);</script>

 

 

위  $shop_base 관련 설명은 매뉴얼 참고 바랍니다.  (  http://manual.good-web.co.kr/page/basic1_01b  )

 

 

[지도API] 네이버 지도 사용하는 방법

1. https://developer.naver.com 에 회원 가입합니다.

 

 

2.  https://developer.naver.com/openapi/register.nhn 에서 아래와 같이 지도 API 키를 발급합니다.

발급된 키를 복사 합니다. (Ctrl + C)

 

 

3. 굿웹에이전시 솔루션의 관리자 모드로 로그인 후  [프로그램샵 > 프로그램 추가 설치]에서 [외부 API 연동]을 설치 합니다.

 

 

4. 설치하게 되면 [프로그램 SHOP > 프로그램 환경설정 > 외부 API 연동]메뉴가 활성화 됩니다.

위에서 복사했던 네이버 지도 API 키를 아래와 같이 붙여 넣습니다.

여기까지 작업 했다면 모든 설정은 끝났습니다.

 

5. 홈페이지에 네이버 지도를 출력해 보도록 하겠습니다.

원하는 위치에 아래와 같이 소스를 추가해보시기 바랍니다.

 

<script type="text/javascript">              naver_map('세종특별자치시 도움','600','600');   </script>

 

 

 

결과 화면 : http://wdev.good-web.co.kr/page/b_addr

 

간단하게 네이버 지도 사용법에 대해서 알아봤습니다.

 

 

 

 

[지도API] [구글 지도2.0] 사용방법 (구글지도에서 세종시 검색되게 하는 방법)

구글 지도에 대해서 잠깐 설명드리고 넘어갈 부분이 있습니다.

구글지도는 속도 및 기능면에서 탁월하지만 치명적인 문제가 하나 있습니다.

현제 API로 제공되는 지도에서는 "세종시"가 검색되지 않는다는 문제가 있습니다.

 

굿웹에이전시 솔루션에서는 이러한 문제점을 보안하기 위해 네이버 지도 API와 상호 연동하여 세종시가 정상적으로 검색되도록 구현 되어 있습니다.

네이버 API연동 방법은 http://wdev.good-web.co.kr/bbs/faq/3566 를 참고 하여 설정 해주시기 바랍니다. (설정만 하면 자동으로 연동되므로 추가 작업 할 부분은 없습니다.)

 

1. 구글 지도를 사용하려면 아래와 같이 소스를 추가하시면 됩니다.

 

<script type="text/javascript">   google_map_addr('{$shop_base[shop_name]}','세종특별자치시 도움','600','600',13);   </script>

 

 

 

 

[지도API] [구글 지도3.0] 위치 (마크) 여러개 표시 방법

* 구글지도 3.0은 익스플로어10 미만 에서는 정상 작동 되지 않을수 있으니 유념하시기 바랍니다.

* 익스프로어10 이상 이라 하더라도, [호환성보기]모드인 경우 정상 작동 되지 않습니다. 확인해보려면 인스플로어에서 F12 키를 누르면 우측 상단 - 브라우져 모드에서 확인 가능 합니다.

* 문서 모드가  쿼크모드인 경우 작동되지 않습니다. 관리자 모드 [디자인관리 > 고급 디자인 관리 > 전체 화면 구성]에서 DOCTYPE이 XHTML1.0 또는 HTML5인 경우에만 정상 작동 됩니다.

 

 

 * 지도 출력 은 기본적으로 phpx 문법을 아시면 더욱 유연하게 커스터마이징 하실 수 있습니다.
 * 원문 출처 : https://developers.google.com/maps/documentation/javascript/examples/event-closure
 

 

<load target="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true">

{@
$marker_array = array();
$marker_array[] = array(-25.363882, 131.044922, "우리집");
$marker_array[] = array(-26.363882, 132.044922, "판타지아");
$marker_array[] = array(-27.363882, 133.044922, "치킨집");
@}

<script>
function initialize() {
 var mapOptions = {
  zoom: 4,
  center: new google.maps.LatLng(-25.363882, 131.044922)
 };

 var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
 marker_chk(map);
}

function marker_chk(map){
 
 <!--@foreach($marker_array as $k => $v)-->
  var position = new google.maps.LatLng({$v[0]}, {$v[1]});
  var marker{$k} = new google.maps.Marker({
   position: position,
   map: map
  });
  var infowindow{$k} = new google.maps.InfoWindow({
   content: "{$v[2]}"
  });
  infowindow{$k}.open(marker{$k}.get('map'), marker{$k});
  google.maps.event.addListener(marker{$k}, 'click', function() {
   infowindow{$k}.open(marker{$k}.get('map'), marker{$k});
  });
 <!--@end-->
 
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div id="map-canvas" style="width:100%;height:400px"></div>

 

 

 

결과 화면 : http://wdev.good-web.co.kr/page/g_multi

 

[지도API] 주소를 위성 좌표로 변환 하기

회사 위치를 지도에 표시하려면 위성 좌표가 있어야지만 지도에 위치를 표시할수 있습니다.

하지만 우리는 위성좌표를 알수 없으므로, 아래와 같이 주소를 위성 좌표로 변환 작업을 해줘야 합니다.

 

1. 아래 매뉴얼 참고하셔서 네이버 인증키를 발급 받습니다.

http://wdev.good-web.co.kr/bbs/faq/3566

 

 

2.  관리자 모드  [디자인관리 > 고급 디자인 관리 > 추가 페이지 관리] 에서 테스트 페이지 생성 후 아래와 같이 소스를 삽입합니다.

 

{@$addr = "부산시 해운대구 우동 1459"; // 소스상에 인증키를 입력하지 않은경우, [프로그램샵 > 프로그램 환경설정 > 외부 API 연동]에서 입력한 값으로 대체 됩니다.$gecode_arr = naver_geocode($addr,' 네이버 인증 Key 값 ' );

 

echo " 주소 : $addr<br>";
echo " x : $gecode_arr[latlng_x]<br>";
echo " y : $gecode_arr[latlng_y]<br>";
@}

 

 

 

 

 

결과 화면  : http://wdev.good-web.co.kr/page/geocode

 

[지도API] [구글 지도 3.0] 오시는 길 표시 방법

* 구글지도 3.0은 익스플로어10 미만 에서는 정상 작동 되지 않을수 있으니 유념하시기 바랍니다.

* 익스프로어10 이상 이라 하더라도, [호환성보기]모드인 경우 정상 작동 되지 않습니다. 확인해보려면 인스플로어에서 F12 키를 누르면 우측 상단 - 브라우져 모드에서 확인 가능 합니다.

* 문서 모드가  쿼크모드인 경우 작동되지 않습니다. 관리자 모드 [디자인관리 > 고급 디자인 관리 > 전체 화면 구성]에서 DOCTYPE이 XHTML1.0 또는 HTML5인 경우에만 정상 작동 됩니다.

 

애니빌들 솔루션 이용시 기본적으로 [기본정보관리 > 사이트정보 설정 > 기본정보설정]에서 입력한 각종 정보를 바로 불러올수 있도록 되어 있습니다.

ps. 기본 정보에 있는 변수 안내 :  http://manual.good-web.co.kr/page/basic1_01b

 

여기에 입력한 주소를 기준으로  "오시는 길"을 만들어 보겠습니다.

 

 

 

 

<load target="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true">
{@
// 네이버 API 키값을 별도로 받으셔야 합니다. 참고 매뉴얼 : http://wdev.good-web.co.kr/bbs/faq/3566
$gecode_arr = naver_geocode("$shop_base[addr1] $shop_base[addr2]",'xxxxxxxxxxxxxxxxxxxxxxxxxxx');

$marker_array = array();
$marker_array[] = array($gecode_arr[latlng_x], $gecode_arr[latlng_y], $shop_base[company_name] );
@}
<script>
function initialize() {
 var mapOptions = {
  zoom: 14,
  center: new google.maps.LatLng({$gecode_arr[latlng_x]}, {$gecode_arr[latlng_y]})
 };

 var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
 marker_chk(map);
}


function marker_chk(map){
 
 <!--@foreach($marker_array as $k => $v)-->
  var position = new google.maps.LatLng({$v[0]}, {$v[1]});
  var marker{$k} = new google.maps.Marker({
   position: position,
   map: map
  });
  var infowindow{$k} = new google.maps.InfoWindow({
   content: "{$v[2]}"
  });
  infowindow{$k}.open(marker{$k}.get('map'), marker{$k});
  google.maps.event.addListener(marker{$k}, 'click', function() {
   infowindow{$k}.open(marker{$k}.get('map'), marker{$k});
  });
 <!--@end-->
 
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div id="map-canvas" style="width:100%;height:400px"></div>

 

 

완성화면 : http://wdev.good-web.co.kr/page/g_addr

 

[지도API] Naver 지도 api JavaScript 2.0 시작하기

※ 네이버 지도를 사용하기 위해서는 네이버 api 센터에서 발급받은 키값이 필요합니다. [네이버 지도 api 센터 키 발급/관리 페이지]

※ 네이버 지도키값은 등록된 도메인 기준으로 인식하기 때문에 서브도메인을 사용하실경우 해당 서브도메인이 반드시 등록이 되어 있어야 합니다. [중요!]

 

 

 

{@
    $marker_array = array();
    $marker_array[] = array(35.1738395, 129.1288500, "아싸닷컴", "아싸닷컴의 내용입니다.");
    $marker_array[] = array(35.1581446, 129.1583542, "해운대해수욕장", "해운대 해수욕장의 내용입니다.");
    $marker_array[] = array(35.0967247, 129.0311102, "자갈치시장", "자갈치 시장의 내용입니다.");
@}
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=#여기에 네이버에서 발급받은 키값을 입력하세요"></script>
<div id="map" style="border:1px solid #000;"></div>
<script type="text/javascript">
var oPoint = new nhn.api.map.LatLng(35.1738395, 129.1288500);
var oMap = new nhn.api.map.Map(document.getElementById('map'), {
    point : oPoint,
    zoom :7,
    enableWheelZoom : true,
    enableDragPan : true,
    enableDblClickZoom : true,
    mapMode : 0,
    activateTrafficMap : false,
    activateBicycleMap : false,
    activateRealtyMap : true,
    minMaxLevel : [ 1, 14 ],
    size : new nhn.api.map.Size(866, 800)
});
// 줌 컨트롤러
var oSlider = new nhn.api.map.ZoomControl();
oMap.addControl(oSlider);
oSlider.setPosition({ top:15, left:15 });
//아래는 위에서 지정한 좌표에 마커를 표시하는 소스 입니다.
var oSize = new nhn.api.map.Size(28, 37);
var oOffset = new nhn.api.map.Size(14, 37);
var oIcon = new nhn.api.map.Icon('http://static.naver.com/maps2/icons/pin_spot2.png', oSize, oOffset);
//icon 이미지를 바꿔서 사용할 수 있습니다.


//########################## 마커 추가 부분 ##########################
var oPointArray = [];
var oContentArray = {};

 <!--@foreach($marker_array as $k => $v)-->
var oPoint{$k} = new nhn.api.map.LatLng({$v[0]}, {$v[1]});
oPointArray.push(oPoint{$k});
oContentArray['{$v[2]}'] = '{$v[3]}';

oMarker = new nhn.api.map.Marker(oIcon, { title : '{$v[2]}' }); //마커 제목 생성
oMarker.setPoint(oPoint{$k}); // 마커 표시할 좌표 선택
oMap.addOverlay(oMarker); //마커를 지도위에 표시

//마커 라벨 출력
oLabel = new nhn.api.map.MarkerLabel(); //마커 라벨 선언
oMap.addOverlay(oLabel); //마커 라벨 지도에 추가, 기본은 보이지 않는 상태로 추가됨
oLabel.setVisible(true, oMarker); //마커 라벨 보이기
<!--@end-->


//########################## 마커 추가 부분 ##########################
  
  
//########################## 마커 클릭 부분 ##########################
  
var mapInfoTestWindow = new nhn.api.map.InfoWindow(); // - info window 생성
mapInfoTestWindow.setVisible(false); // - infowindow 표시 여부 지정.
oMap.addOverlay(mapInfoTestWindow);     // - 지도에 추가.
 
oMap.attach('click', function(oCustomEvent) {
    var oPoint = oCustomEvent.point;
    var oTarget = oCustomEvent.target;
    
    mapInfoTestWindow.setVisible(false);
    if (oTarget instanceof nhn.api.map.Marker) {
        
        var oMarkerId = oCustomEvent.target.getTitle();

        oMap.setCenter(oPoint);

        
        mapInfoTestWindow.setContent("<div style='background:#FFF; width:auto; height:auto; padding:5px; white-space: nowrap !important; border-top:1px solid; border-bottom:2px groove black; border-left:1px solid; border-right:2px groove black;'>"+oContentArray[oMarkerId]+"</div>");
        mapInfoTestWindow.setPoint(oTarget.getPoint());
        mapInfoTestWindow.setVisible(true);

        mapInfoTestWindow.setPosition({right : 15, top : 50});
        mapInfoTestWindow.autoPosition();
        return;
    }
});
  
//########################## 마커 클릭 부분 ##########################
  
  
//########################## 컨트롤 추가 ############################

 var oBicycleGuide = new nhn.api.map.BicycleGuide(); // - 자전거 범례 선언
oBicycleGuide.setPosition({
    top : 10,
    right : 10
}); // - 자전거 범례 위치 지정
oMap.addControl(oBicycleGuide);// - 자전거 범례를 지도에 추가.

var oTrafficGuide = new nhn.api.map.TrafficGuide(); // - 교통 범례 선언
oTrafficGuide.setPosition({
    bottom : 30,
    left : 10
});  // - 교통 범례 위치 지정.
oMap.addControl(oTrafficGuide); // - 교통 범례를 지도에 추가.

var trafficButton = new nhn.api.map.TrafficMapBtn(); // - 실시간 교통지도 버튼 선언
trafficButton.setPosition({
    bottom:10, 
    right:150
}); // - 실시간 교통지도 버튼 위치 지정
oMap.addControl(trafficButton);

//###############################################################  
  
  
  
//########################## 폴리라인 ##############################
  
  //var Polyline = new nhn.api.map.Polyline(oPointArray);
  //oMap.addOverlay(Polyline); 

//########################## 폴리라인 ##############################

</script>

 

 

 

그럼 네이버의 위도 경도는 어떻게 구할까요?

[네이버지도] 페이지로 가셔서 해당 지역을 검색한 후 마커를 클릭해보면 아래 그림과 같은 팝업이 뜹니다.

 

URL 복사를 클릭하면 아래와 같이 주소가 적힌 프롬프트 창이 뜨는데요. 그 주소안에 파라미터 x는 경도 값, y는 위도 값입니다.

 

 

완성화면 : http://wdev.good-web.co.kr/page/n_addr

네이버 지도 api 메뉴얼 http://developer.naver.com/wiki/pages/Tutorial_JavaScript

 

[지도API] Naver 지도 api Javascript 2.0 폴리라인

※ 네이버 지도를 사용하기 위해서는 네이버 api 센터에서 발급받은 키값이 필요합니다. [네이버 지도 api 센터 키 발급/관리 페이지]

※ 네이버 지도키값은 등록된 도메인 기준으로 인식하기 때문에 서브도메인을 사용하실경우 해당 서브도메인이 반드시 등록이 되어 있어야 합니다. [중요!]

 

 

 

<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=#여기에 네이버에서 발급받은 키값을 입력하세요"></script>
<div id="map" style="border:1px solid #000;"></div>
<script type="text/javascript">
    var oSeoulCityPoint = new nhn.api.map.LatLng(35.179816, 129.0750223);
    var defaultLevel = 11;
    var oMap = new nhn.api.map.Map(document.getElementById('map'), {
        point : oSeoulCityPoint,
        zoom : 7,
        enableWheelZoom : true,
        enableDragPan : true,
        enableDblClickZoom : false,
        mapMode : 0,
        activateTrafficMap : false,
        activateBicycleMap : false,
        minMaxLevel : [ 1, 14 ],
        size : new nhn.api.map.Size((866, 800)           });
    var oSlider = new nhn.api.map.ZoomControl();
    oMap.addControl(oSlider);
    oSlider.setPosition({
        top : 10,
        left : 10
    });

    var oMapTypeBtn = new nhn.api.map.MapTypeBtn();
    oMap.addControl(oMapTypeBtn);
    oMapTypeBtn.setPosition({
        bottom : 10,
        right : 80
    });

    var oThemeMapBtn = new nhn.api.map.ThemeMapBtn();
    oThemeMapBtn.setPosition({
        bottom : 10,
        right : 10
    });
    oMap.addControl(oThemeMapBtn);

    var oBicycleGuide = new nhn.api.map.BicycleGuide(); // - 자전거 범례 선언
    oBicycleGuide.setPosition({
        top : 10,
        right : 10
    }); // - 자전거 범례 위치 지정
    oMap.addControl(oBicycleGuide);// - 자전거 범례를 지도에 추가.

    var oTrafficGuide = new nhn.api.map.TrafficGuide(); // - 교통 범례 선언
    oTrafficGuide.setPosition({
        bottom : 30,
        left : 10
    });  // - 교통 범례 위치 지정.
    oMap.addControl(oTrafficGuide); // - 교통 범례를 지도에 추가.

    var trafficButton = new nhn.api.map.TrafficMapBtn(); // - 실시간 교통지도 버튼 선언
    trafficButton.setPosition({
        bottom:10,
        right:150
    }); // - 실시간 교통지도 버튼 위치 지정
    oMap.addControl(trafficButton);

    var oSize = new nhn.api.map.Size(28, 37);
    var oOffset = new nhn.api.map.Size(14, 37);
    var oIcon = new nhn.api.map.Icon('http://static.naver.com/maps2/icons/pin_spot2.png', oSize, oOffset);

    var oInfoWnd = new nhn.api.map.InfoWindow();
    oInfoWnd.setVisible(false);
    oMap.addOverlay(oInfoWnd);

    oInfoWnd.setPosition({
        top : 20,
        left :20
    });

    var oLabel = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언.
    oMap.addOverlay(oLabel); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.

    oInfoWnd.attach('changeVisible', function(oCustomEvent) {
        if (oCustomEvent.visible) {
            oLabel.setVisible(false);
        }
    });

    var oPolyline = new nhn.api.map.Polyline([], {
        strokeColor : '#f00', // - 선의 색깔
        strokeWidth : 5, // - 선의 두께
        strokeOpacity : 0.5 // - 선의 투명도
    }); // - polyline 선언, 첫번째 인자는 선이 그려질 점의 위치. 현재는 없음.
    oMap.addOverlay(oPolyline); // - 지도에 선을 추가함.

    oMap.attach('mouseenter', function(oCustomEvent) {

        var oTarget = oCustomEvent.target;
        // 마커위에 마우스 올라간거면
        if (oTarget instanceof nhn.api.map.Marker) {
            var oMarker = oTarget;
            oLabel.setVisible(true, oMarker); // - 특정 마커를 지정하여 해당 마커의 title을 보여준다.
        }
    });

    oMap.attach('mouseleave', function(oCustomEvent) {

        var oTarget = oCustomEvent.target;
        // 마커위에서 마우스 나간거면
        if (oTarget instanceof nhn.api.map.Marker) {
            oLabel.setVisible(false);
        }
    });

    oMap.attach('click', function(oCustomEvent) {
        var oPoint = oCustomEvent.point;
        var oTarget = oCustomEvent.target;
        oInfoWnd.setVisible(false);
        // 마커 클릭하면
        if (oTarget instanceof nhn.api.map.Marker) {
            // 겹침 마커 클릭한거면
            if (oCustomEvent.clickCoveredMarker) {
                return;
            }
            // - InfoWindow 에 들어갈 내용은 setContent 로 자유롭게 넣을 수 있습니다. 외부 css를 이용할 수 있으며,
            // - 외부 css에 선언된 class를 이용하면 해당 class의 스타일을 바로 적용할 수 있습니다.
            // - 단, DIV 의 position style 은 absolute 가 되면 안되며,
            // - absolute 의 경우 autoPosition 이 동작하지 않습니다.

            return;
        }
        var oMarker = new nhn.api.map.Marker(oIcon, { title : '마커 : ' + oPoint.toString() });
        oMarker.setPoint(oPoint);
        oMap.addOverlay(oMarker);

        var aPoints = oPolyline.getPoints(); // - 현재 폴리라인을 이루는 점을 가져와서 배열에 저장.
        aPoints.push(oPoint); // - 추가하고자 하는 점을 추가하여 배열로 저장함.
        oPolyline.setPoints(aPoints); // - 해당 폴리라인에 배열에 저장된 점을 추가함
    });
</script>

 

 

 

 

완성화면 : http://wdev.good-web.co.kr/page/n_polyline

네이버 지도 api 메뉴얼 http://developer.naver.com/wiki/pages/Tutorial_JavaScript

[지도API] Daum 지도 api 시작하기

※ 다음 지도 api를 사용하기 위해서는 API Key를 발급받아야 합니다.

 http://apis.map.daum.net/ 여기를 먼저 방문해서 key를 발급받으시기 바랍니다.

 

콘솔 탭에서 지도 api key를 발급 받을 앱을 생성합니다

 

생성된 앱 화면에서 API Key 등록버튼을 누릅니다.

 

REST/JS API 추가 버튼을 누르고 팝업 창이 뜨면 플랫폼을 선택합니다. 저는 브라우저 용을 쓸것이라 웹브라우저 탭을 선택했습니다.

Referer 입력 란에 사용할 도메인 주소를 http:// 를 붙여서 입력합니다.

 

API Key 발급이 완료되었습니다 API 키를 드래그 해서 복사해주세요

 

 

 

 

<!-- 로드뷰를 표시할 div 입니다 -->
<div id="daum_map" style="width:100%;height:800px;"></div>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 API Key를 여기 입력하세요"></script>

<script>

var container = document.getElementById('daum_map'); //지도를 표시할 div
var options = {
 center: new daum.maps.LatLng(35.17969, 129.07564),
 level: 3
};

var map = new daum.maps.Map(container, options); //지도 생성

//마커 옵션
var markerPosition  = new daum.maps.LatLng(35.17969, 129.07564);
var marker = new daum.maps.Marker({
    position: markerPosition
});

marker.setMap(map); //마커 생성

// 마커 위에 표시할 인포윈도우를 생성한다
var infowindow = new daum.maps.InfoWindow({
 content : '<div style="padding:5px;">부산시청입니다</div>' // 인포윈도우에 표시할 내용
});

// 인포윈도우를 지도에 표시한다
infowindow.open(map, marker);

// 마커에 클릭 이벤트를 등록한다 (우클릭 : rightclick)
daum.maps.event.addListener(marker, 'click', function() {
 alert('마커를 클릭했습니다!');
});

//맵 컨트롤 생성
var mapTypeControl = new daum.maps.MapTypeControl();
map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);
var zoomControl = new daum.maps.ZoomControl();
map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);

</script>

 

 

완성화면 : http://wdev.good-web.co.kr/page/d_addr

다음 지도 API 메뉴얼 http://apis.map.daum.net/web/guide/

다음 지도 API 마법사 http://apis.map.daum.net/web/wizard/

[지도API] Daum 지도 로드뷰 만들기

※ 다음 지도 api를 사용하기 위해서는 API Key를 발급받아야 합니다.

 http://apis.map.daum.net/ 여기를 먼저 방문해서 key를 발급받으시기 바랍니다.

 

 

 

 

<!-- 로드뷰를 표시할 div 입니다 -->
<div id="roadview" style="width:100%;height:800px;"></div>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 API Key를 여기 입력하세요"></script>

<script>
var roadviewContainer = document.getElementById('roadview'); //로드뷰를 표시할 div
var roadview = new daum.maps.Roadview(roadviewContainer)
var roadviewClient = new daum.maps.RoadviewClient();

var position = new daum.maps.LatLng(35.17969, 129.07564);

//로드뷰 생성
roadviewClient.getNearestPanoId(position, 100, function(panoId) {
    roadview.setPanoId(panoId, position);
});
</script>

 

 

 

완성화면 : http://wdev.good-web.co.kr/page/d_loadview

다음 지도 API 메뉴얼 http://apis.map.daum.net/web/guide/

다음 지도 API 마법사 http://apis.map.daum.net/web/wizard/