지도와 로드뷰에 각각 마커와 인포윈도우를 올리고, Kakao 지도와 로드뷰로 이동, 로드뷰를 리셋할 수 있는 버튼을 생성합니다.
var mapContainer = document.getElementById('map'), // 지도를 표시할 div mapCenter = new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심 좌표 mapOption = { center: mapCenter, // 지도의 중심 좌표 level: 4 // 지도의 확대 레벨 }; // 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다 var map = new kakao.maps.Map(mapContainer, mapOption); // 지도에 올릴 마커를 생성합니다. var mMarker = new kakao.maps.Marker({ position: mapCenter, // 지도의 중심좌표에 올립니다. map: map // 생성하면서 지도에 올립니다. }); // 지도에 올릴 장소명 인포윈도우 입니다. var mLabel = new kakao.maps.InfoWindow({ position: mapCenter, // 지도의 중심좌표에 올립니다. content: '스페이스 닷원' // 인포윈도우 내부에 들어갈 컨텐츠 입니다. }); mLabel.open(map, mMarker); // 지도에 올리면서, 두번째 인자로 들어간 마커 위에 올라가도록 설정합니다. var rvContainer = document.getElementById('roadview'); // 로드뷰를 표시할 div var rv = new kakao.maps.Roadview(rvContainer); // 로드뷰 객체 생성 var rc = new kakao.maps.RoadviewClient(); // 좌표를 통한 로드뷰의 panoid를 추출하기 위한 로드뷰 help객체 생성 var rvResetValue = {} //로드뷰의 초기화 값을 저장할 변수 rc.getNearestPanoId(mapCenter, 50, function(panoId) { rv.setPanoId(panoId, mapCenter);//좌표에 근접한 panoId를 통해 로드뷰를 실행합니다. rvResetValue.panoId = panoId; }); // 로드뷰 초기화 이벤트 kakao.maps.event.addListener(rv, 'init', function() { // 로드뷰에 올릴 마커를 생성합니다. var rMarker = new kakao.maps.Marker({ position: mapCenter, map: rv //map 대신 rv(로드뷰 객체)로 설정하면 로드뷰에 올라갑니다. }); // 로드뷰에 올릴 장소명 인포윈도우를 생성합니다. var rLabel = new kakao.maps.InfoWindow({ position: mapCenter, content: '스페이스 닷원' }); rLabel.open(rv, rMarker); // 로드뷰 마커가 중앙에 오도록 로드뷰의 viewpoint 조정 합니다. var projection = rv.getProjection(); // viewpoint(화면좌표)값을 추출할 수 있는 projection 객체를 가져옵니다. // 마커의 position과 altitude값을 통해 viewpoint값(화면좌표)를 추출합니다. var viewpoint = projection.viewpointFromCoords(rMarker.getPosition(), rMarker.getAltitude()); rv.setViewpoint(viewpoint); //로드뷰에 뷰포인트를 설정합니다. //각 뷰포인트 값을 초기화를 위해 저장해 놓습니다. rvResetValue.pan = viewpoint.pan; rvResetValue.tilt = viewpoint.tilt; rvResetValue.zoom = viewpoint.zoom; }); //지도 이동 이벤트 핸들러 function moveKakaoMap(self){ var center = map.getCenter(), lat = center.getLat(), lng = center.getLng(); self.href = 'https://map.kakao.com/link/map/' + encodeURIComponent('스페이스 닷원') + ',' + lat + ',' + lng; //Kakao 지도로 보내는 링크 } //지도 초기화 이벤트 핸들러 function resetKakaoMap(){ map.setCenter(mapCenter); //지도를 초기화 했던 값으로 다시 셋팅합니다. map.setLevel(mapOption.level); } //로드뷰 이동 이벤트 핸들러 function moveKakaoRoadview(self){ var panoId = rv.getPanoId(); //현 로드뷰의 panoId값을 가져옵니다. var viewpoint = rv.getViewpoint(); //현 로드뷰의 viewpoint(pan,tilt,zoom)값을 가져옵니다. self.href = 'https://map.kakao.com/?panoid='+panoId+'&pan='+viewpoint.pan+'&tilt='+viewpoint.tilt+'&zoom='+viewpoint.zoom; //Kakao 지도 로드뷰로 보내는 링크 } //로드뷰 초기화 이벤트 핸들러 function resetRoadview(){ //초기화를 위해 저장해둔 변수를 통해 로드뷰를 초기상태로 돌립니다. rv.setViewpoint({ pan: rvResetValue.pan, tilt: rvResetValue.tilt, zoom: rvResetValue.zoom }); rv.setPanoId(rvResetValue.panoId); }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>로드뷰에 마커와 인포윈도우 올리기</title> <style> .screen_out {display:block;overflow:hidden;position:absolute;left:-9999px;width:1px;height:1px;font-size:0;line-height:0;text-indent:-9999px} .wrap_content {overflow:hidden;height:330px} .wrap_map {width:50%;height:300px;float:left;position:relative} .wrap_roadview {width:50%;height:300px;float:left;position:relative} .wrap_button {position:absolute;left:15px;top:12px;z-index:2} .btn_comm {float:left;display:block;width:70px;height:27px;background:url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/sample_button_control.png) no-repeat} .btn_linkMap {background-position:0 0;} .btn_resetMap {background-position:-69px 0;} .btn_linkRoadview {background-position:0 0;} .btn_resetRoadview {background-position:-69px 0;} </style> </head> <body> <div class="wrap_content"> <div class="wrap_map"> <div id="map" style="width:100%;height:100%"></div> <!-- 지도를 표시할 div 입니다 --> <div class="wrap_button"> <a href="javascript:;" class="btn_comm btn_linkMap" target="_blank" onclick="moveKakaoMap(this)"><span class="screen_out">지도 크게보기</span></a> <!-- 지도 크게보기 버튼입니다 --> <a href="javascript:;" class="btn_comm btn_resetMap" onclick="resetKakaoMap()"><span class="screen_out">지도 초기화</span></a> <!-- 지도 크게보기 버튼입니다 --> </div> </div> <div class="wrap_roadview"> <div id="roadview" style="width:100%;height:100%"></div> <!-- 로드뷰를 표시할 div 입니다 --> <div class="wrap_button"> <a href="javascript:;" class="btn_comm btn_linkRoadview" target="_blank" onclick="moveKakaoRoadview(this)"><span class="screen_out">로드뷰 크게보기</span></a> <!-- 로드뷰 크게보기 버튼입니다 --> <a href="javascript:;" class="btn_comm btn_resetRoadview" onclick="resetRoadview()"><span class="screen_out">로드뷰 크게보기</span></a> <!-- 로드뷰 리셋 버튼입니다 --> </div> </div> </div> <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 사용하세요"></script> <script> var mapContainer = document.getElementById('map'), // 지도를 표시할 div mapCenter = new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심 좌표 mapOption = { center: mapCenter, // 지도의 중심 좌표 level: 4 // 지도의 확대 레벨 }; // 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다 var map = new kakao.maps.Map(mapContainer, mapOption); // 지도에 올릴 마커를 생성합니다. var mMarker = new kakao.maps.Marker({ position: mapCenter, // 지도의 중심좌표에 올립니다. map: map // 생성하면서 지도에 올립니다. }); // 지도에 올릴 장소명 인포윈도우 입니다. var mLabel = new kakao.maps.InfoWindow({ position: mapCenter, // 지도의 중심좌표에 올립니다. content: '스페이스 닷원' // 인포윈도우 내부에 들어갈 컨텐츠 입니다. }); mLabel.open(map, mMarker); // 지도에 올리면서, 두번째 인자로 들어간 마커 위에 올라가도록 설정합니다. var rvContainer = document.getElementById('roadview'); // 로드뷰를 표시할 div var rv = new kakao.maps.Roadview(rvContainer); // 로드뷰 객체 생성 var rc = new kakao.maps.RoadviewClient(); // 좌표를 통한 로드뷰의 panoid를 추출하기 위한 로드뷰 help객체 생성 var rvResetValue = {} //로드뷰의 초기화 값을 저장할 변수 rc.getNearestPanoId(mapCenter, 50, function(panoId) { rv.setPanoId(panoId, mapCenter);//좌표에 근접한 panoId를 통해 로드뷰를 실행합니다. rvResetValue.panoId = panoId; }); // 로드뷰 초기화 이벤트 kakao.maps.event.addListener(rv, 'init', function() { // 로드뷰에 올릴 마커를 생성합니다. var rMarker = new kakao.maps.Marker({ position: mapCenter, map: rv //map 대신 rv(로드뷰 객체)로 설정하면 로드뷰에 올라갑니다. }); // 로드뷰에 올릴 장소명 인포윈도우를 생성합니다. var rLabel = new kakao.maps.InfoWindow({ position: mapCenter, content: '스페이스 닷원' }); rLabel.open(rv, rMarker); // 로드뷰 마커가 중앙에 오도록 로드뷰의 viewpoint 조정 합니다. var projection = rv.getProjection(); // viewpoint(화면좌표)값을 추출할 수 있는 projection 객체를 가져옵니다. // 마커의 position과 altitude값을 통해 viewpoint값(화면좌표)를 추출합니다. var viewpoint = projection.viewpointFromCoords(rMarker.getPosition(), rMarker.getAltitude()); rv.setViewpoint(viewpoint); //로드뷰에 뷰포인트를 설정합니다. //각 뷰포인트 값을 초기화를 위해 저장해 놓습니다. rvResetValue.pan = viewpoint.pan; rvResetValue.tilt = viewpoint.tilt; rvResetValue.zoom = viewpoint.zoom; }); //지도 이동 이벤트 핸들러 function moveKakaoMap(self){ var center = map.getCenter(), lat = center.getLat(), lng = center.getLng(); self.href = 'https://map.kakao.com/link/map/' + encodeURIComponent('스페이스 닷원') + ',' + lat + ',' + lng; //Kakao 지도로 보내는 링크 } //지도 초기화 이벤트 핸들러 function resetKakaoMap(){ map.setCenter(mapCenter); //지도를 초기화 했던 값으로 다시 셋팅합니다. map.setLevel(mapOption.level); } //로드뷰 이동 이벤트 핸들러 function moveKakaoRoadview(self){ var panoId = rv.getPanoId(); //현 로드뷰의 panoId값을 가져옵니다. var viewpoint = rv.getViewpoint(); //현 로드뷰의 viewpoint(pan,tilt,zoom)값을 가져옵니다. self.href = 'https://map.kakao.com/?panoid='+panoId+'&pan='+viewpoint.pan+'&tilt='+viewpoint.tilt+'&zoom='+viewpoint.zoom; //Kakao 지도 로드뷰로 보내는 링크 } //로드뷰 초기화 이벤트 핸들러 function resetRoadview(){ //초기화를 위해 저장해둔 변수를 통해 로드뷰를 초기상태로 돌립니다. rv.setViewpoint({ pan: rvResetValue.pan, tilt: rvResetValue.tilt, zoom: rvResetValue.zoom }); rv.setPanoId(rvResetValue.panoId); } </script> </body> </html>