본문 바로가기

KakaoMapStudy/KakaoMapApp

● KakaoMapApp

by 닉네임없는 닉네임 2024. 2. 8.

목차

[ KakaoMapApp ]

MapTest00.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest00.html</title>
</head>
<body>

<!-- ○ 발급받은 App Key  -->
<!--  3a5829b4a12381f14f6a539bba3c33ba -->
<!-- ○ 지도의 중심 좌표 -->
<!--  37.5565355,126.9195242 -->

<div>
	<h1>Kakao Map 생성 기본 관찰</h1>
	<p>지도 생성 기본 내용 관찰</p>
	<hr>
</div>

<!-- 지도를 그릴(랜더링 할) div 공간 확보(지정) -->
<div id="map" style="width: 100%; height: 350px;"></div>

<!-- <script type="text/javascript" src="//dpai.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY 사용"></script> -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3a5829b4a12381f14f6a539bba3c33ba"></script>

<script type="text/javascript">
	var mapContainer = document.getElementById("map");	// 지도를 표시할 div
	var mapOption = 
	{
			center: new daum.maps.LatLng(37.5565355,126.9195242),	// 지도의 중심좌표
			level: 3, 												// 지도의 확대축소 레벨
	};
	
	// 지도를 표시할 div 와 지도 옵션을 활용하여 지도 생성
	var map = new daum.maps.Map(mapContainer, mapOption);
</script>

</body>
</html>

▶ 결과 출력

MapTest01.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest01.html</title>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3a5829b4a12381f14f6a539bba3c33ba"></script>

<script type="text/javascript">
	var mapContainer = document.getElementById("map");	// 지도를 표시할 div
	var mapOption = 
	{
			center: new daum.maps.LatLng(37.5565355,126.9195242),	// 지도의 중심좌표
			level: 3, 												// 지도의 확대축소 레벨
	};
	
	// 지도를 표시할 div 와 지도 옵션을 활용하여 지도 생성
	var map = new daum.maps.Map(mapContainer, mapOption);
	
</script>

</head>
<body>

<!-- ○ 발급받은 App Key  -->
<!--  3a5829b4a12381f14f6a539bba3c33ba -->
<!-- ○ 지도의 중심 좌표 -->
<!--  37.5565355,126.9195242 -->

<div>
	<h1>Kakao Map 생성 기본 관찰</h1>
	<p>지도 생성 기본 내용 관찰 → 지도 그려지지 않음~!!! </p>
	<hr>
</div>

<!-- 지도를 그릴(랜더링 할) div 공간 확보(지정) -->
<div id="map" style="width: 100%; height: 350px;"></div>

<!-- check~!!! -->
<!-- 지도가 그려지지 않음~!!! -->

</body>
</html>

▶ 결과 출력

MapTest02.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest02.html</title>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3a5829b4a12381f14f6a539bba3c33ba"></script>

<script type="text/javascript">
	
	function initialize()
	{
		container = document.getElementById("map");
		
		options = 
		{
				center: new kakao.maps.LatLng(37.5565355,126.9195242),	// 지도의 중심 좌표
				lever: 3,												// 지도의 확대축소 레벨
				
		};
		
		// 지도를 그릴 대상 div 와 옵션을 넘겨주며 지도 생성
		map = new kakao.maps.Map(container, options);
	}

</script>

</head>
<body onload="initialize()">

<div>
	<h1>Kakao Map 생성 기본 관찰</h1>
	<p>지도 생성 기본 내용 관찰</p>
	<hr>
</div>

<!-- ○ 발급받은 App Key  -->
<!--  3a5829b4a12381f14f6a539bba3c33ba -->
<!-- ○ 지도의 중심 좌표 -->
<!--  37.5565355,126.9195242 -->


<!-- 지도를 그릴 div 공관 확보(지정) -->
<div id="map" style="width: 100%; height: 350px;"></div>

</body>
</html>

▶ 결과 출력

MapTest03.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest03.html</title>
</head>
<body>

<!-- ○ 발급받은 App Key  -->
<!--  3a5829b4a12381f14f6a539bba3c33ba -->
<!-- ○ 지도의 중심 좌표 -->
<!--  37.5565355,126.9195242 -->

<div>
	<h1>KaKao Map 생성 기본 관찰</h1>
	<p>지도 생성 기본 내용 관찰</p>
	<hr>
</div>

<!-- 지도를 그릴 div 공관 확보(지정) -->
<div id="map" style="width: 300px; height: 300px;"></div>

<!-- 발급받은 key 를 활용하여 리소스 참조 -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3a5829b4a12381f14f6a539bba3c33ba"></script>

<script type="text/javascript">

	// 지도를 표시할 div
	var container = document.getElementById("map");
	
	// latitude : 위도
	// longitude : 경도
	var options =
	{
			// 지도의 중심 좌표
			// center: new daum.maps.LatLng(37.5565355,126.9195242),	//-- 구버전
			center : new kakao.maps.LatLng(37.5565355,126.9195242),	
			
			// 지도의 확대축소 레벨(cf. GoogleMap 은 level 이 아니라 zoom 으로 구성)
			level: 3,
	};
	
	// 지도를 그릴 대상 div 와 관련 옵션을 넘겨주며 지도 생성
	//var map = new daum.maps.Map(container, options);				//-- 구버전
	var map = new kakao.maps.Map(container, options);				
	
</script>

</body>
</html>

▶ 결과 출력

MapTest04.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest04.html</title>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3a5829b4a12381f14f6a539bba3c33ba"></script>
<script type="text/javascript">
	
	function initialize()
	{
		container = document.getElementById("map");
		options =
		{
			center: new kakao.maps.LatLng(37.5565355,126.9195242),
			lever: 3,
		};
		
		map = new kakao.maps.Map(container, options);
		
	}

	function setCenter()
	{
		//alert("확인");
		
		// 중심을 이동할 위도 경도 위치 생성
		var moveLatLng = new kakao.maps.LatLng(37.555515,126.92154);
		
		// 지도 중심 이동
		map.setCenter(moveLatLng);
		
	}
	
	function panTo()
	{
		// 중심을 이동할 위도 경도 위치 생성(2번출구 앞 스타벅스)
		var moveLatLng = new kakao.maps.LatLng(37.5571504,126.9235935);
		
		// 지도 중심 이동
		//map.setCenter(moveLatLng);
		
		// 지도 중심을 부드럽게 이동
		//-- 이동 과정에서 이동할 거리가 지도에서 표현되는 범위 밖에 있다면
		//   즉, 이동 거리가 지도 화면보다 크다면
		//   부드러운 효과가 적용되지 않고 이동하게 된다.
		map.panTo(moveLatLng);
		
	}
	
	function panTo2()
	{
		// 중심을 이동할 위도 경도 위치 생성(홍대입구 북창동 순두부)
		var moveLatLng = new kakao.maps.LatLng(37.5551839,126.9209445);
		
		map.panTo(moveLatLng);
	}
	
	function panTo3()
	{
		// 중심을 이동할 위도 경도 위치 생성(여의도 국회의사당)
		var moveLatLng = new kakao.maps.LatLng(37.5317348,126.9142102);
		
		map.panTo(moveLatLng);
		
	}
	
	function setCenterBack()
	{
		// 중심을 이동할 위도 경도 위치 생성(풍성빌딩 - 37.5565355,126.9195242)
		var moveLatLng = new kakao.maps.LatLng(37.5565355,126.9195242);
		
		// 지도 중심 이동
		map.setCenter(moveLatLng);
	}

	
</script>

</head>
<body onload="initialize()">

<!-- ○ 발급받은 App Key  -->
<!--  3a5829b4a12381f14f6a539bba3c33ba -->
<!-- ○ 지도의 중심 좌표 -->
<!--  37.5565355,126.9195242 -->

<div>
	<h1>KaKao Map 중심 좌표 이동</h1>
	<ul>
		<li>지도 객체의 메소드를 통해 지도를 원하는 좌표로 이동시킬 수 있다.</li>
		<li>표시되고 있는 영역을 벗어나지 않는 거리 내에서
		애니메이션 효과처럼 지도를 부드럽게 이동시킬 수도 있다.</li>
	</ul>
	<hr>
</div>

<!-- 지도 그려질 공간 -->
<div id="map" style="width: 100%; height: 350px;"></div>

<p>
	<button type="button" onclick="setCenter()">중심 좌표 이동</button>
	<!-- <button type="button" onclick="panTo()">중심 좌표 다시 이동</button> -->
	<button type="button" onclick="panTo()">중심 좌표 부드럽게 이동</button>
	<button type="button" onclick="panTo2()">중심 좌표 부드럽게 이동</button>
	<button type="button" onclick="panTo3()">중심 좌표 부드럽게 이동</button>
	<button type="button" onclick="setCenterBack()">원래 위치로</button>
</p>



</body>
</html>

▶ 결과 출력

MapTest05.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest05.html</title>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3a5829b4a12381f14f6a539bba3c33ba"></script>

<script type="text/javascript">
	
	function initialize()
	{
		container = document.getElementById("map");
		options =
		{
			center: new kakao.maps.LatLng(37.5565355,126.9195242), 	// 풍성빌딩
			level: 3,												// 지도 확대축소 레벨
		};
		
		map = new kakao.maps.Map(container, options);
		
		// 지도 레벨 표시 함수 호출
		displayLevel();
	}
	
	// 지도 레벨 표시 함수 정의
	function displayLevel()
	{
		var levelEl = document.getElementById("mapLevel");
		levelEl.innerHTML = "현재 지도 레벨은 " + map.getLevel() + " 레벨 입니다.";
	}
	
	// ※ 지도의 레벨은 지도의 확대축소 수준을 의미한다.
	//    지도의 레벨(1 ~ 14)은 숫자가 작을 수록 지도의 확대 수준이 높다.
	
	// 지도 레벨 -1(낮추기, 확대)
	function zoomIn()
	{
		// 현재의 지도 레벨 얻어오기
		var level = map.getLevel();
		
		// 얻어온 지도의 현재 레벨에서 1 내리기(→ 지도 확대)
		map.setLevel(level -1);
		
		// 지도 레벨 표시 함수 호출
		displayLevel();
	}
	

	// 지도 레벨 +1(높이기, 축소)
	function zoomOut()
	{
		// 현재의 지도 레벨 얻어오기
		var level = map.getLevel();
		
		// 얻어온 지도의 현재 레벨에서 1 올리기(→ 지도 축소)
		map.setLevel(level +1);
		
		// 지도 레벨 표시 함수 호출
		displayLevel();
	}
	
</script>

</head>
<body onload="initialize()">

<!-- ○ 발급받은 App Key  -->
<!--  3a5829b4a12381f14f6a539bba3c33ba -->
<!-- ○ 지도의 중심 좌표 -->
<!--  37.5565355,126.9195242 -->

<div>
	<h1>Kakao Map 레벨 전환</h1>
</div>

<!-- 지도를 그릴 공간 확보(지정) -->
<div id="map" style="width: 100%; height: 350px;"></div>

<br>

<!-- 지도 레벨 확인(출력) -->
<span id="mapLevel"></span>

<p>
	<button type="button" onclick="zoomIn()">지도 레벨 -1(낮추기, 확대)</button>
	<button type="button" onclick="zoomOut()">지도 레벨 +1(높이기, 축소)</button>
</p>

</body>
</html>

▶ 결과 출력

MapTest06.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest06.html</title>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3a5829b4a12381f14f6a539bba3c33ba"></script>

<script type="text/javascript">
	
	function initialize()
	{
		container = document.getElementById("map");
		options =
		{
			center: new kakao.maps.LatLng(37.5565355,126.9195242),
			level: 3,
		};
		
		map = new kakao.maps.Map(container, options);
		
		// 지도 타입 컨트롤 생성
		//-- 일반 지도와 스카이 뷰로 타입 전환
		mapTypeControl = new kakao.maps.MapTypeControl();
		
		// 지도 타입 컨트롤을 지도 위에 올리기(즉, 지도에 표시)
		//map.addControl(mapTypeControl);
		map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
		
		getInfo();
	}
	
	
	function getInfo()
	{
		// 지도의 현재 중심 좌표 얻어오기
		var center = map.getCenter();
		
		// 지도의 현재 레벨 얻어오기
		var level = map.getLevel();
		
		// 지도의 타입 얻어오기
		var mapTypeId = map.getMapTypeId();
		
		// 지도의 현재 영역 얻어오기
		var bounds = map.getBounds();
		
		// 얻어낸 현재 영역의 남서쪽 좌표 얻어오기
		var swLatLng = bounds.getSouthWest();
		
		// 얻어낸 현재 영역의 북동쪽 좌표 얻어오기
		var neLatLng = bounds.getNorthEast();
		
		var message = "지도의 중심 좌표는 " + center + " 입니다.<br> ";
		message += "위도는 " + center.getLat();
		message += ", 경도는" + center.getLng() + " 인거죠~<br>";
		message += "지도 레벨은 " + level + " 이며,";
		message += "지도 타입은 " + mapTypeId + " 입니다.<br>"
		message += "지도의 현재 영역은 " + bounds + " 입니다<br>"
		message += "지도의 남서쪽 좌표는 " +  swLatLng.getLat();
		message += ", " + swLatLng.getLng() + " 이고, <br>";
		message += "지도의 북동쪽 좌표는 " + neLatLng.getLat();
		message += ", " + neLatLng.getLng + " 인거죠~<br>";
		
		var typeEl = document.getElementById("mapType");
		typeEl.innerHTML = message;
	}
	
</script>

</head>
<body onload="initialize()">

<!-- ○ 발급받은 App Key  -->
<!--  3a5829b4a12381f14f6a539bba3c33ba -->
<!-- ○ 지도의 중심 좌표 -->
<!--  37.5565355,126.9195242 -->

<div>
	<h1>Kakao Map 지도 정보 얻어내기</h1>
	<hr>
</div>


<!-- 지도를 그릴 공간 확보(지정) -->
<div id="map" style="width: 100%; height: 350px;"></div>
<br>

<p>
	<button type="button">지도 정보 확인</button>
	<br>
	
	<span id="mapType"></span>

</p>

<body>

</body>
</html>

▶ 결과 출력

MapTest07.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest07.html</title>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3a5829b4a12381f14f6a539bba3c33ba"></script>
<script type="text/javascript">
	
	function initialize()
	{
		container = document.getElementById("map");
		options =
		{
			center: new kakao.maps.LatLng(37.5565355,126.9195242),	// 풍성빌딩
			level: 3,												// 지도 확대축소 레벨
		};
		
		// 지도를 그릴 대상(div)과 옵션(options)을 넘겨주며 지도 생성
		map = new kakao.maps.Map(container, options);
		
		// 지도 타입 컨트롤(지도 or 스카이뷰) 생성
		mapTypeControl = new kakao.maps.MapTypeControl();
		
		// ※ 지도 타입 컨트롤을 생성했다고 해서 
		//    지도에 타입 컨트롤이 보여지는 것은 아니며,
		//    지도에 컨트롤을 추가해야 지도 위에 표시된다. 
		
		// 지도 타입 컨트롤을 지도에 표시
		// → map.addControl();
		map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
		// 『kakao.maps.ControlPosition』은 컨트롤이 표시될 위치를 정의하며,
		// 『TOPRIGHT』는 오른쪽 위를 의미한다.
		// ·TOP : 위 가운데를 의미한다. 컨트롤 추가 시 아래로 쌓인다.
		// ·TOPLEFT : 왼쪽 위를 의미한다. 컨트롤 추가 시 오른쪽으로 쌓인다.
		// ·TOPRIGHT : 오른쪽 위를 의미한다. 컨트롤 추가 시 왼쪽으로 쌓인다.
		// ·LEFT : 왼쪽 위를 의미한다. 컨트롤 추가 시 아래로 쌓인다.
		//			(주의. LEFT 가 왼쪽 중앙을 의미하는 것이 아니다.)
		// ·RIGHT : 오른쪽 위를 의미한다. 컨트롤 추가 시 아래로 쌓인다.
		//			(주의. RIGHT 가 오른쪽 중앙을 의미하는 것이 아니다.)
		// ·BOTTOMLEFT : 왼쪽 아래를 의미한다. 컨트롤 추가 시 오른쪽으로 쌓인다.
		// ·BOTTOM : 아래 가운데를 의미한다. 컨트롤 추가 시 위로 쌓인다.
		// ·BOTTOMRIGHT : 오른쪽 아래를 의미한다. 컨트롤 추가 시 왼쪽으로 쌓인다.
		
		// 줌 컨트롤(확대 or 축소 제어) 생성
		zoomControl = new kakao.maps.ZoomControl();
		
		// 줌 컨트롤 지도에 표시
		map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
	
	}


</script>

</head>
<body onload="initialize()">

<!-- ○ 발급받은 App Key  -->
<!--  3a5829b4a12381f14f6a539bba3c33ba -->
<!-- ○ 지도의 중심 좌표 -->
<!--  37.5565355,126.9195242 -->

<div>
	<h1>Kakao Map 기본 컨트롤 구성</h1>
	<hr>
</div>

<!-- 지도를 그릴 div 공간 확보(지정) -->
<div id="map" style="width: 100%; height: 350px;"></div>



</body>
</html>

▶ 결과 출력

MapTest08.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest08.html</title>

<style type="text/css">
	html, body {width: 100%; height: 100%; margin: 0; padding: 0}
	.map_wrap{position: relative; overflow: hidden; width: 100%; height: 350px;}
	.radius_border{border: 1px solid #919191; border-radius: 5px;}
	.custom_typecontrol
	{
		position: absolute; top: 10px; right: 10px; 
		overflow: hidden; width: 130px; height: 30px;
		margin: 0; padding: 0; z-index: 1; font-size: 12px; font-family: 맑은 고딕;
	}
	.custom_typecontrol span
	{
		display: block; width: 65px; height: 30px;
		float: left; text-align: center; line-height: 30px; cursor: pointer;
	}
	.custom_typecontrol .btn
	{
	  	background: #fff; 
	    background: linear-gradient(#fff, #e6e6e6);
	 }
	.custom_typecontrol .btn:hover
	{
		background: #f5f5f5; 
	    background: linear-gradient(#f5f5f5, #e3e3e3);
	}
	.custom_typecontrol .btn:active
	{
		background: #e6e6e6;
		background: linear-gradient(#e6e6e6, #fff);
	}
	.custom_typecontrol .selected_btn
	{
		color: #fff;
		background: #425470;
		background: linear-gradient(#425470, #5b6d8a);
	}
	.custom_typecontrol .selected_btn:hover {color: #e3e3e3;}
	.custom_zoomcontrol
	{
		position: absolute;
		top: 50px; right: 10px;
		width: 36px; height: 80px;
		overflow: hidden; z-index: 1; background-color: #f5f5f5;
	}
	.custom_zoomcontrol span
	{
		display: block; width: 36px; height: 40px;
		text-align: center; cursor: pointer;
	}
	.custom_zoomcontrol span img
	{
		width: 15px; height: 15px;
		padding: 12px 0;
		border: none;
	}
	.custom_zoomcontrol span:first_child
	{
		border-bottom: 1px solid #bfbfbf;
	}
</style>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3a5829b4a12381f14f6a539bba3c33ba"></script>
<script type="text/javascript">
	
	function initialize()
	{
		container = document.getElementById("map");
		options =
		{
			center: new kakao.maps.LatLng(37.5565355,126.9195242),
			level: 3,
		};
		
		map = new kakao.maps.Map(container, options);
	}
	
	// 지도 타입 컨트롤의 타입을 바꾸는 함수 정의
	//-- 지도 타입 컨트롤의 지도 또는 스카이뷰 클릭 시
	//   호출되어 지도 타입을 전환할 수 있도록 구성
	function setMapType(maptype)
	{
		// 확인
		//alert(mapType);
		
		var roadmapControl = document.getElementById("btnRoadmap");
		var skyviewControl = document.getElementById("btnSkyview");
		
		/* 
		if(maptype == 'roadmap')
			map.setMapTypeId(kakao.maps.MapTypeId.ROADMAP);
		else
			map.setMapTypeId(kakao.maps.MapTypeId.HYBRID);
	 	*/
		
		if(maptype == 'roadmap')
		{
			roadmapControl.className = 'selected_btn';
			skyviewControl.clssName = 'btn';
			map.setMapTypeId(kakao.map.MapTypeId.ROADMAP);
		}	
		else
		{
			skyviewControl.className = 'selected_btn';
			roadmapControl.className = 'btn';
			map.setMapTypeId(kakao.maps.MapTypeId.HYBRID);
		}
			
	}
	
	// 지도 확대, 축소 컨트롤의 확대, 축소 함수
	//-- 확대 버튼을 선택하면 호출되어 지도를 확대하는 함수
	function zoomIn()
	{
		var level = map.getLevel();
		
		map.setLevel(level -1);
		displayLevel(); 
	}
	
	//-- 축소 버튼을 선택하면 호출되어 지도를 축소하는 함수
	function zoomOut()
	{
		map.setLevel(map.getLevel() +1);
		displayLevel();
	}

</script>


</head>
<body onload="initialize()">

<!-- ○ 발급받은 App Key  -->
<!--  3a5829b4a12381f14f6a539bba3c33ba -->
<!-- ○ 지도의 중심 좌표 -->
<!--  37.5565355,126.9195242 -->

<div>
	<h1>Kakao Map 사용자 컨트롤 구성</h1>
	<hr>
</div>

<div class="map_wrap">

	<div id="map" style="width: 100%; height: 100%; position: realtive; overflow: hidden;"></div>

	<!--  지도 타입 컨트롤 div -->
	<div class="custom_typecontrol radius_border">
		<span id="btnRoadmap" class="selected_btn" onclick="setMapType('roadmap')">지도</span>
		<span id="btnSkyview" class="btn" onclick="setMapType('skyview')">스카이뷰</span>
	</div>
	
	<!-- 지도 확대축소 컨트롤 div -->
	<div class="custom_zoomcontrol radius_border">
		<span onclick="zoomIn()">
			<img alt="확대" src="http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/ico_plus.png">
		</span>
		<span onclick="zoomOut()">
			<img alt="축소" src="http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/ico_minus.png">
		</span>
	</div>

</div><!-- close .map_wrap -->

</body>
</html>

▶ 결과 출력

MapTest09.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest09.html</title>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3a5829b4a12381f14f6a539bba3c33ba"></script>
<script type="text/javascript">
	
	function initialize()
	{
		container = document.getElementById("map");
		options =
		{
			center: new kakao.maps.LatLng(37.5565355,126.9195242),
			level: 3,
			draggable: false,
			//-- 함수 정의 및 호출 과정과 달리
			//   『draggable: false』 옵션을 포함하여 지도를 생성할 경우
			//   지도 생성 시 이동 뿐 아니라 마우스 휠을 이용한
			//   확대/축소 기능도 비활성화 된다. 
		};
		
		map = new kakao.maps.Map(container, options);
		
		//map.setDraggable(false);
	}
	
	// 지도 이동 기능을 막거나 풀고자 하는 경우 사용
	function setDraggable(draggable)
	{
		// 확인
		//alert(draggable);
		
		// 마우스 드래그로 지도 이동 가능여부 설정
		map.setDraggable(draggable);
		
	}
	

</script>

</head>
<body onload="initialize()">

<!-- ○ 발급받은 App Key  -->
<!--  3a5829b4a12381f14f6a539bba3c33ba -->
<!-- ○ 지도의 중심 좌표 -->
<!--  37.5565355,126.9195242 -->

<div>
	<h1>Kakao Map 드래그 제한 및 허용</h1>
	<hr>
</div>

<div id="map" style="width: 100%; height: 350px;"></div>
<br><br>

<div>
	<p>
		<button type="button" onclick="setDraggable(false)">드래그 제한</button>
		<button type="button" onclick="setDraggable(true)">드래그 허용</button>
	</p>

</div>

</body>
</html>

▶ 결과 출력

MapTest10.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest10.html</title>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3a5829b4a12381f14f6a539bba3c33ba"></script>
<script type="text/javascript">
	function initialize()
	{
		container = document.getElementById("map");
		options =
		{
			center: new kakao.maps.LatLng(37.5565355,126.9195242),
			level: 3,
		};
		
		map = new kakao.maps.Map(container, options);
	}
	
	// 지도의 확대 및 축소 기능을 막거나 풀고자 하는 경우
	function setZoomable(zoomable)
	{
		//확인
		//alert(zoomable);
		
		map.setZoomable(zoomable);
	}
</script>

</head>
<body onload="initialize()">

<!-- ○ 발급받은 App Key  -->
<!--  3a5829b4a12381f14f6a539bba3c33ba -->
<!-- ○ 지도의 중심 좌표 -->
<!--  37.5565355,126.9195242 -->

<div>
	<h1>Kakao Map 확대 및 축소 제한</h1>
	<hr>
</div>

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

<div>
	<p>
		<button type="button" onclick="setZoomable(false)">확대축소 제한</button>
		<button type="button" onclick="setZoomable(true)">확대축소 허용</button>
	</p>

</div>


</body>
</html>

▶ 결과 출력

MapTest11.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest11.html</title>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3a5829b4a12381f14f6a539bba3c33ba"></script>
<script type="text/javascript">
	
	function initialize()
	{
		container = document.getElementById("map");
		options =
		{
			center: new kakao.maps.LatLng(37.5565355,126.9195242),
			level: 3,
		};
		
		map = new kakao.maps.Map(container, options);
		
		clickAction();
	}
	
	function clickAction()
	{
		// 확인
		//alert("함수 호출 확인~!!!");
		
		// 클릭 등의 이벤트를 리스너에 등록
		//kakao.maps.event.addListener(대상맵, 이벤트, 기능);
		kakao.maps.event.addListener(map, "click", function(mouseEvent)
		{
			//alert("함수 호출 확인~!!!");
			
			// 클릭한 지점에 대한 정보 가져오기(위도, 경도)
			var latlng = mouseEvent.latLng;
			
			var lat = latlng.getLat();		// 위도
			var lng = latlng.getLng();		// 경도
			
			
			var message = "클릭한 위치의 위도는 " + lat + "이고, 경도는 " + lng + "입니다.";		
			
			var result = document.getElementById("result");
			result.innerHTML = message;
		});
	}
	
</script>

</head>
<body onload="initialize()">

<!-- ○ 발급받은 App Key  -->
<!--  3a5829b4a12381f14f6a539bba3c33ba -->
<!-- ○ 지도의 중심 좌표 -->
<!--  37.5565355,126.9195242 -->

<div>
	<h1>Kakao Map 클릭 이벤트 등록</h1>
	<hr>
</div>

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

<p>
	지도 클릭으로 좌표 확인
</p>

<div id="result"></div>

</body>
</html>

▶ 결과 출력

MapTest12.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest12.html</title>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3a5829b4a12381f14f6a539bba3c33ba"></script>
<script type="text/javascript">

	function initialize()
	{
		container = document.getElementById("map");
		options = 
		{
			center: new kakao.maps.LatLng(37.5565355,126.9195242),
			level: 3.
		};
		
		map = new kakao.maps.Map(container, options);
		
		// 지도에 표시할 마커 구성
		//marker = new kakao.maps.Marker();
		marker = new kakao.maps.Marker(
		{
			// 지도 중심 좌표에 마커 생성
			position: map.getCenter(),
		});
		
		// 지도에 마커를 표시할 수 있도록 처리
		marker.setMap(map);
		
		clickAction();
	}
	
	

	function clickAction()
	{
		kakao.maps.event.addListener(map, "click", function(mouseEvent)
		{
			// 클릭한 지점의 위도, 경도에 대한 정보 가져오기
			var latlng = mouseEvent.latLng;
			
			// 마커 위치를 클릭한 지점으로 이동 check~!!!
			marker.setPosition(latlng);
			
			var message = "클릭한 위치의 위도는 " + latlng.getLat();
			message += "이고, 경도는 " + latlng.getLng() + "입니다.";
			
			var resultDiv = document.getElementById("result");
			result.innerHTML = message;
		});
	}
		
</script>

</head>
<body onload="initialize()">

<!-- ○ 발급받은 App Key  -->
<!--  3a5829b4a12381f14f6a539bba3c33ba -->
<!-- ○ 지도의 중심 좌표 -->
<!--  37.5565355,126.9195242 -->

<div>
	<h1>Kakao Map 마커 표시</h1>
	<hr>
</div>

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

<p>
	지도 클릭으로 좌표 확인 및 해당 위치 마커 표시
</p>

<div id="result"></div>

</body>
</html>

▶ 결과 출력

MapTest13.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest13.html</title>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3a5829b4a12381f14f6a539bba3c33ba"></script>
<script type="text/javascript">
	function initialize()
	{
		container = document.getElementById("map");
		options =
		{
			center: new kakao.maps.LatLng(37.5565355,126.9195242),
			lever:3,
		}
		
		map = new kakao.maps.Map(container, options);
		
		// 마커가 표시될 위치 구성
		// (길 건너 스타벅스 → 위도는 37.556788954906324이고, 경도는 126.91999632503입니다.)
		markerPosition = new kakao.maps.LatLng(37.556788954906324, 126.91999632503);
		
		// 마커 생성
		marker = new kakao.maps.Marker(
		{
			// 구성한 위치 마커 생성
			position: markerPosition,
		});
		
		// 생성된 마커가 지도에 표시되도록 설정
		marker.setMap(map);
		//-- 우리가 위에서 생성한 map(line 18)에 마커를 세팅
	}
	
	function removeMarker()
	{
		// 지도 위의 마커 제거
		marker.setMap(null);
	}
	
	/*
	function createMarker()
	{
		// 마커가 지도(map)에 표시되도록 설정
		marker.setMap(map);
	}
	*/
	
	// 홍대입구역 8번 출구 롯데시네마에 마커가 표시되도록 설정( 37.556936325995345이고, 경도는 126.92488535269659)
	function createMarker()
	{
		// 마커가 표시될 위치 구성
		markerPosition = new kakao.maps.LatLng(37.556936325995345, 126.92488535269659);
		
		// 마커 생성
		marker = new kakao.maps.Marker(
		{
			position: markerPosition,
		});
		
		// 마커가 지도에 표시되도록 설정
		marker.setMap(map);
	}

</script>

</head>
<body onload="initialize()">

<!-- ○ 발급받은 App Key  -->
<!--  3a5829b4a12381f14f6a539bba3c33ba -->
<!-- ○ 지도의 중심 좌표 -->
<!--  37.5565355,126.9195242 -->

<div>
	<h1>Kakao Map 고정 마커 생성</h1>
	<hr>
</div>

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


<p>
	<button type="button" onclick="removeMarker()">마커 제거</button>
	<button type="button" onclick="createMarker()">마커 다시 생성</button>
</p>

</body>
</html>

▶ 결과 출력

MapTest14.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest14.html</title>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3a5829b4a12381f14f6a539bba3c33ba"></script>
<script type="text/javascript">
	
	function initialize()
	{
		container = document.getElementById("map");
		mapCenter = new kakao.maps.LatLng(37.5565355,126.9195242);
		options = 
		{
			center: mapCenter,
			level: 3,
		};
		
		map = new kakao.maps.Map(container, options);
		
		// 마커 생성
		marker = new kakao.maps.Marker(
		{
			position: mapCenter,			
		});
		
		// 마커가 지도에 표시될 수 있도록 설정
		marker.setMap(map);
		
		// 마커가 이동이 가능하도록 설정
		marker.setDraggable(true);
		
	}

</script>


</head>
<body onload="initialize()">

<!-- ○ 발급받은 App Key  -->
<!--  3a5829b4a12381f14f6a539bba3c33ba -->
<!-- ○ 지도의 중심 좌표 -->
<!--  37.5565355,126.9195242 -->

<div>
	<h1>Kakao Map 이동 가능한 마커 생성</h1>
	<hr>
</div>

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


</body>
</html>

▶ 결과 출력

MapTest15.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest15.html</title>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3a5829b4a12381f14f6a539bba3c33ba"></script>
<script type="text/javascript">

	function initialize()
	{
		container = document.getElementById("map");
		mapCenter = new kakao.maps.LatLng(37.5565355,126.9195242);
		options =
		{
			center: mapCenter,
			level: 3,
		};
		
		map = new kakao.maps.Map(container, options);
		
		// 마커의 속성 구성
		//imageSrc = "images/markerImg.png";						//-- 마커 이미지 경로
																	//   (또는 웹 상의 주소)
		//imageSrc = "http://localhost:3306/kakaoMapApp/images/markerImg.png";
		//imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png";
		//imageSrc = "images/markerGif04.gif";
		//imageSrc = "images/markerGif05.gif";
		imageSrc = "images/markerGif06.gif";
		imageSize = new kakao.maps.Size(46, 64);					//-- 마커 이미지 크기
		imageOption = {offset: new kakao.maps.Point(23, 64)};		//-- 마커 이미지 오프셋(위와 같은 구조) 
		//-- 마커 이미지에 대한 옵션
		//   마커 좌표와 일치시킬 이미지 내부에서의 좌표 설정
		
		// 마커의 속성을 활용하여 마커 이미지 생성
		markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption);
		//-- 이미지 경로와 크기와 옵션을 전달
		
		// 마커 생성
		marker = new kakao.maps.Marker(
		{
			position: mapCenter,									//-- 마커 좌표 설정
			image: markerImage,										//-- 마커 이미지 설정
		});
		
		// 마커가 지도에 표시될 수 있도록 설정
		marker.setMap(map);
	}

</script>

</head>
<body onload="initialize()">

<!-- ○ 발급받은 App Key  -->
<!--  3a5829b4a12381f14f6a539bba3c33ba -->
<!-- ○ 지도의 중심 좌표 -->
<!--  37.5565355,126.9195242 -->

<div>
	<h1>Kakao Map 이동 가능한 마커 생성</h1>
	<hr>
</div>

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


</body>
</html>

▶ 결과 출력

MapTest16.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest16.html</title>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3a5829b4a12381f14f6a539bba3c33ba"></script>
<script type="text/javascript">
	function initialize()
	{
		container = document.getElementById("map");
		mapCenter = new kakao.maps.LatLng(37.5565355,126.9195242);
		options =
		{
			center: mapCenter,
			level: 3,
		};
		
		map = new kakao.maps.Map(container, options);
		
		// 마커 옵션 구성
		markerCenter = new kakao.maps.LatLng(37.556870033091904, 126.9199792620258);
		
		// 마커 생성
		marker = new kakao.maps.Marker(
		{
			position: markerCenter,
		});
		
		// 마커가 지도에 표시될 수 있도록 설정
		marker.setMap(map);
		
		// 인포 윈도우 옵션 구성
		var iwContent = "<div style='padding:5px;'>";
		iwContent += "스타벅스<br>";
		iwContent += "<a href='https://map.kakao.com/link/map/스타벅스,37.556870,126.919979' style='color:blue;' target='_blank'>큰지도보기</a> ";
		iwContent += "<a href='https://map.kakao.com/link/to/스타벅스,37.556870,126.919979' style='color:blue;' target='_blank'>길찾기</a>";
		iwContent += "</div>";
		
		// 인포 윈도우 구성
		var infowindow = new kakao.maps.InfoWindow(
		{
			//position: markerCenter,
			//content: iwContent,
			position: markerCenter
			, content: iwContent
		});
		
		// 마커에 인포 윈도우가 표시될 수 있도록 설정
		infowindow.open(map, marker);
		//-- 두 번째 파라미터 값(marker)을 설정하지 않을 경우
		//   지도 위에 직접 인포 윈도우를 올려서 사용하는 개념(즉, 지도 위에 직접 표시)
		
	}
</script>

</head>
<body onload="initialize()">

<!-- ○ 발급받은 App Key  -->
<!--  3a5829b4a12381f14f6a539bba3c33ba -->
<!-- ○ 지도의 중심 좌표 -->
<!--  37.5565355,126.9195242 -->

<div>
	<h1>Kakao Map 인포윈도우 구성</h1>
	<hr>
</div>

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


</body>
</html>

▶ 결과 출력

MapTest17.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest17.html</title>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3a5829b4a12381f14f6a539bba3c33ba"></script>
<script type="text/javascript">
	
	function initialize()
	{
		container = document.getElementById("map");
		mapCenter = new kakao.maps.LatLng(37.5565355,126.9195242);
		options =
		{
			center: mapCenter,
			level: 3,
		};
		
		map = new kakao.maps.Map(container, options);
		
		// 마커 옵션 구성
		// - 위치 : 길 건너 스타벅스
		markerCenter = new kakao.maps.LatLng(37.556870, 126.919979);
		
		// 마커 생성
		marker = new kakao.maps.Marker(
		{
			position: markerCenter
		});
		
		// 마커가 지도에 표시될 수 있도록 설정
		marker.setMap(map);
		
		// 인포 윈도우 옵션 구성
		var iwContent = "<div style='padding:5px;'>스타벅스</div>";
		var iwRemovable = true;
		
		// 인포 윈도우 생성
		var infowindow = new kakao.maps.InfoWindow(
		{
			content: iwContent
			, removable: iwRemovable
			//-- 『removable』 속성의 속성값을 『true』로 설정할 경우
			//	 인포 윈도우를 닫을 수 있는 버튼 활성화
		});
		
		// check~!!!
		// 마커에 클릭 이벤트 등록
		kakao.maps.event.addListener(marker, "click", function()
		{
			infowindow.open(map, marker);
		});
		
	}
	
</script>

</head>
<body onload="initialize()">

<!-- ○ 발급받은 App Key  -->
<!--  3a5829b4a12381f14f6a539bba3c33ba -->
<!-- ○ 지도의 중심 좌표 -->
<!--  37.5565355,126.9195242 -->

<div>
	<h1>Kakao Map 마커에 이벤트 등록</h1>
	<hr>
</div>

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


</body>
</html>

▶ 결과 출력

MapTest18.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest18.html</title>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3a5829b4a12381f14f6a539bba3c33ba"></script>
<script type="text/javascript">
	
	function initialize()
	{
		container = document.getElementById("map");
		options =
		{
			center: new kakao.maps.LatLng(37.5565355,126.9195242),
			lever:3,
		}
		
		map = new kakao.maps.Map(container, options);
		
		// check~!!!
		// 다중 마커를 등록할 속성 구성
		positions = 
		[
			{
				title: "스타벅스"
				, latlng: new kakao.maps.LatLng(37.556870, 126.919979)
			}
			, {
				title: "컴포즈커피"
				, latlng: new kakao.maps.LatLng(37.556190, 126.9206477)
			}
			, {
				title: "메가커피"
				, latlng: new kakao.maps.LatLng(37.555949, 126.9209167)
			}
			, {
				title: "이디야커피"
				, latlng: new kakao.maps.LatLng(37.55559, 126.920673)
			}
			, {
				title: "소림커피"
				, latlng: new kakao.maps.LatLng(37.556247, 126.919459)
			}
			, {
				title: "투썸플레이스"
				, latlng: new kakao.maps.LatLng(37.556072, 126.920138)
			}
		];
		
		// 마커 이미지 구성
		imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png";
		imageSize = new kakao.maps.Size(24, 35);
		
		// check~!!
		// 다중 마커 생성 → 반복문 구성
		for (var i = 0; i < positions.length; i++)
		{
			// 마커 이미지 생성
			var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
			
			// 마커 생성
			var marker = new kakao.maps.Marker(		
			{
				map: map 								//-- 마커 표시 지도
				, position: positions[i].latlng 		//-- 마커 표시 위치
				, title: positions[i].title 			//-- 마커 타이틀
				, image: markerImage 					//-- 마커 이미지
			});
			
		}
	}

</script>

</head>
<body onload="initialize()">

<!-- ○ 발급받은 App Key  -->
<!--  3a5829b4a12381f14f6a539bba3c33ba -->
<!-- ○ 지도의 중심 좌표 -->
<!--  37.5565355,126.9195242 -->

<div>
	<h1>Kakao Map 마커에 이벤트 등록</h1>
	<hr>
</div>

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


</body>
</html>

▶ 결과 출력

MapTest19.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest19.html</title>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3a5829b4a12381f14f6a539bba3c33ba"></script>
<script type="text/javascript">
	
	function initialize()
	{
		container = document.getElementById("map");
		mapCenter = new kakao.maps.LatLng(37.5565355,126.9195242);
		options =
		{
			center: mapCenter
			, level: 3
		};
		
		map = new kakao.maps.Map(container, options);
		
		// 다중 마커 객체들을 포함하고 있을 배열
		markers = [];
		
		// 마커 추가 전용 함수 호출
		addMarker(mapCenter);
		
		// 지도를 클릭했을 경우
		// 해당 위치에 마커를 추가할 수 있도록 이벤트 등록
		kakao.maps.event.addListener(map, "click", function(mouseEvent)
		{
			// 클릭한 위치에 마커 표시
			addMarker(mouseEvent.latLng);
		})
	}
	
	// 마커 추가 전용 함수 정의
	function addMarker(position)
	{
		// 마커 생성
		marker = new kakao.maps.Marker(
		{
			position: position
		});
		
		// 마커가 지도에 표시되도록 설정
		marker.setMap(map);
		
		// 생성된 마커를 markers 자료구조에 추가
		markers.push(marker);
	}
	
	// 배열에 추가된 마커들을 지도에 표시하거나 삭제하는 함수
	function setMarkers(map)
	{
		for (var i = 0; i < markers.length; i++)
		{
			markers[i].setMap(map);
		}
	}
	
	// 마커 숨기기 버튼 클릭 시 호출되는 함수
	function hideMarkers()
	{
			setMarkers(null); 
	}
	
	function showMarkers()
	{
			setMarkers(map);
	}
	
</script>

</head>
<body onload="initialize()">

<!-- ○ 발급받은 App Key  -->
<!--  3a5829b4a12381f14f6a539bba3c33ba -->
<!-- ○ 지도의 중심 좌표 -->
<!--  37.5565355,126.9195242 -->

<div>
	<h1>Kakao Map 다중 마커 제어</h1>
	<hr>
</div>

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

<p>
	<button type="button" onclick="hideMarkers()">마커 숨기기</button>
	<button type="button" onclick="showMarkers()">마커 보이기</button>
</p>

</body>
</html>

▶ 결과 출력

MapTest20.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest20.html</title>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3a5829b4a12381f14f6a539bba3c33ba"></script>
<script type="text/javascript">
	function initialize()
	{
		container = document.getElementById("map");
		mapCenter = new kakao.maps.LatLng(37.5565355,126.9195242)
		options =
		{
			center: mapCenter
			, level: 3
		};
		
		map = new kakao.maps.Map(container, options);
		
		// check~!!!
		// 교통정보 지도타입 표시
		//map.addOverlayMapTypeId(daum.maps.MapTypeId.TRAFFIC);
		
	}
	
	// 교통정보 지도 타입 추가
	function addTraficInfo()
	{
		map.addOverlayMapTypeId(daum.maps.MapTypeId.TRAFFIC);
	}
	
	// 교통정보 지도 타입 제거
	function removeTraficInfo()
	{
		map.removeOverlayMapTypeId(daum.maps.MapTypeId.TRAFFIC);
	}
	
</script>

</head>
<body onload="initialize()">

<!-- ○ 발급받은 App Key  -->
<!--  3a5829b4a12381f14f6a539bba3c33ba -->
<!-- ○ 지도의 중심 좌표 -->
<!--  37.5565355,126.9195242 -->

<div>
	<h1>Kakao Map 교통정보 표시</h1>
	<hr>
</div>

<div id="map" style="width: 100%; height: 350px;"></div>
<br><br>

<p>
	<button type="button" onclick="addTraficInfo()">교통정보 추가</button>
	<button type="button" onclick="removeTraficInfo()">교통정보 제거</button>
</p>


</body>
</html>

▶ 결과 출력

MapTest21.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest21.html</title>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3a5829b4a12381f14f6a539bba3c33ba"></script>
<script type="text/javascript">
	function initialize()
	{
		container = document.getElementById("map");
		mapCenter = new kakao.maps.LatLng(37.5565355,126.9195242)
		options =
		{
			center: mapCenter
			, level: 3
		};
		
		map = new kakao.maps.Map(container, options);
		
		// check~!!!
		// 로드뷰 지도타입 표시
		//map.addOverlayMapTypeId(daum.maps.MapTypeId.ROADVIEW);
		
	}

	// 지도에 로드뷰 정보가 있는 도로를 표시하여 지도타입 추가
	function addRoadviewInfo()
	{
		map.addOverlayMapTypeId(daum.maps.MapTypeId.ROADVIEW);
	}
	
	// 로드뷰 도로 정보 지도타입 제거
	function removeRoadviewInfo()
	{
		map.removeOverlayMapTypeId(daum.maps.MapTypeId.ROADVIEW);
	}
	
	
</script>

</head>
<body onload="initialize()">

<!-- ○ 발급받은 App Key  -->
<!--  3a5829b4a12381f14f6a539bba3c33ba -->
<!-- ○ 지도의 중심 좌표 -->
<!--  37.5565355,126.9195242 -->

<div>
	<h1>Kakao Map 로드뷰 표시</h1>
	<hr>
</div>

<div id="map" style="width: 100%; height: 350px;"></div>
<br><br>

<p>
	<button type="button" onclick="addRoadviewInfo()">로드뷰 추가</button>
	<button type="button" onclick="removeRoadviewInfo()">로드뷰 제거</button>
</p>


</body>
</html>

▶ 결과 출력

MapTest22.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MapTest22.html</title>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3a5829b4a12381f14f6a539bba3c33ba"></script>
<script type="text/javascript">
	function initialize()
	{
		container = document.getElementById("map");
		mapCenter = new kakao.maps.LatLng(37.5565355,126.9195242)
		options =
		{
			center: mapCenter
			//, level: 3
			, level: 7
		};
		
		map = new kakao.maps.Map(container, options);
		
		// check~!!!
		// 지도에 지형정보를 표시하도록 지도타입 추가
		//map.addOverlayMapTypeId(daum.maps.MapTypeId.TERRAIN);
		
	}
	 
	 //지도에 지형정보를 표시하도록 지도타입 추가
	function addTerrainInfo()
	{
		map.addOverlayMapTypeId(daum.maps.MapTypeId.TERRAIN);
	}
	
	//추가한 지형정보 지도타입 제거
	function removeTerrainInfo()
	{
		map.removeOverlayMapTypeId(daum.maps.MapTypeId.TERRAIN);
	}
	
</script>

</head>
<body onload="initialize()">

<!-- ○ 발급받은 App Key  -->
<!--  3a5829b4a12381f14f6a539bba3c33ba -->
<!-- ○ 지도의 중심 좌표 -->
<!--  37.5565355,126.9195242 -->

<div>
	<h1>Kakao Map 지형도 표시</h1>
	<hr>
</div>

<div id="map" style="width: 100%; height: 350px;"></div>
<br><br>

<p>
	<button type="button" onclick="addTerrainInfo()">지형정보 표시</button>
	<button type="button" onclick="removeTerrainInfo()">지형정보 제거</button>
</p>


</body>
</html>

▶ 결과 출력

티스토리툴바