(113-115)[Web]25-27일차: KakaoMapStudy

1. 2024.2.8-14(목-수)--날짜 사이 공유일 존재

카카오 개발자 센터(https://developers.kakao.com/)

1. 키 발급받기(로그인필요)

2. 내 어플리케이션>애플리케이션 추가하기

3. 추가된 애플리케이션 선택

4. 플랫폼 설정하기>Web 플랫폼 등록

ㄴhttp://localhost:3306

5. 앱 키> JavaScript 키 복사하기

6. 중심좌표 찾기(37.5565568,126.9195311)

과거에는 오픈되어 있었으나, 지금은.. 찾기 어려움

6.1. 구글맵

ㄴ 방법1) 출발지로 설정 or 목적지로 설정

ㄴ 포인트찍기>오른쪽버튼>주변좌표(복사되지는 않음)

Kakao 지도 Web API Sample(https://apis.map.kakao.com/web/sample/)

F_KakaoMapStudy

ㄴ/KakaoMapApp/WebContent

ㄴㄴMapTest00.html: 지도 생성 기본 내용 관찰

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

<!-- ○ 발급받은 App Key -->
<!-- appkey=ba33ba069d5fdefca8d4c4fce805cbb4 -->
<!-- ○ 지도 중심 좌표 -->
<!-- 37.5565568,126.9195311 -->

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

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

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

<script type="text/javascript">
	var mapContainer = document.getElementById("map");			// 지도를 표시할 div
	var mapOption =
	{
		center : new daum.maps.LatLng(37.5565568,126.9195311),	// 지도의 중심좌표
		level : 3,												// 지도의 확대축소 레벨
	};
	
	// 지도를 표시할 div와 지도 옵션을 활용하여 지도 생성
	var map = new daum.maps.Map(mapContainer, mapOption);
</script>
<!-- 이클립스 최신버전 이슈: ctrl+c, ctrl+v 할때 문제가 있음(지연)  -->
</body>
</html>

ㄴㄴMapTest01.html: 지도 그려지지 않음

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

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

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

<!-- ○ 발급받은 App Key -->
<!-- appkey=ba33ba069d5fdefca8d4c4fce805cbb4 -->
<!-- ○ 지도 중심 좌표 -->
<!-- 37.5565568,126.9195311 -->

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

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

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

</body>
</html>

ㄴㄴMapTest02.html: onload="initialize()

<!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=ba33ba069d5fdefca8d4c4fce805cbb4"></script>

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

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

<!-- ○ 발급받은 App Key -->
<!-- appkey=ba33ba069d5fdefca8d4c4fce805cbb4 -->
<!-- ○ 지도 중심 좌표 -->
<!-- 37.5565568,126.9195311 -->

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

<!-- 지도를 그릴 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 -->
<!-- appkey=ba33ba069d5fdefca8d4c4fce805cbb4 -->
<!-- ○ 지도 중심 좌표 -->
<!-- 37.5565568,126.9195311 -->

<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=ba33ba069d5fdefca8d4c4fce805cbb4"></script>

<script type="text/javascript">
	// 지도를 표시할 div
	var container = document.getElementById("map");
	
	// latitude  : 위도
	// longitude : 경도
	var options=
		{
			//지도의 중심 좌표
			//center: new daum.maps.LatLng(37.5565568,126.9195311),	//-- 구 버전
			center: new kakao.maps.LatLng(37.5565568,126.9195311),	
			
			//지도의 확대축소 레벨
			//(ch, GoogleMap 이나 NaverMap 은 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: Kakao Map 중심 좌표 이동(부드럽게 이동)

- map.setCenter(moveLatLng);

- map.panTo(moveLatLng);

<!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=ba33ba069d5fdefca8d4c4fce805cbb4"></script>

<script type="text/javascript">
	function initialize()
	{
		container = document.getElementById("map");
		options =
		{
			center : new kakao.maps.LatLng(37.5565568, 126.9195311),
			level : 3,
		}

		map = new kakao.maps.Map(container, options);
	}
	function setCenter()
	{
		//alert("확인");

		// 중심을 이동할 위도 경도 위치 생성(라인 프렌즈)
		var moveLatLng = new kakao.maps.LatLng(37.5555563, 126.9216175);

		// 지도 중심 이동
		map.setCenter(moveLatLng);
	}
	function panTo()
	{
		// 중심을 이동할 위도 경도 위치 생성(2번출구 앞 스타벅스)
		var moveLatLng = new kakao.maps.LatLng(37.5572505, 126.923703);

		//map.setCenter(moveLatLng);

		// 지도 중심을 부드럽게 이동
		//-- 이동 과정에서 이동할 거리가 지도에서 표현되는 범위 밖에 있다면
		//	 즉, 이동 거리가 지도 화면보다 크다면
		//	 부드러운 효과가 적용되지 않고 이동하게 한다.
		map.panTo(moveLatLng);
	}
	function panTo2()
	{
		// 중심을 이동할 위도 경도 위치 생성(북창동순두부)
		var moveLatLng = new kakao.maps.LatLng(37.5551864, 126.9210047);

		map.panTo(moveLatLng);
	}
	function panTo3()
	{
		// 중심을 이동할 위도 경도 위치 생성(국회의사당)
		var moveLatLng = new kakao.maps.LatLng(37.5289256, 126.9185075);

		map.panTo(moveLatLng);
	}
	function setCenterBack()
	{
		// 중심을 이동할 위도 경도 생성(풍성빌딩 - 37.5565568,126.9195311)
		var moveLatLng = new kakao.maps.LatLng(37.5565568, 126.9195311);

		// 지도 중심 이동
		map.setCenter(moveLatLng);
	}
</script>

</head>
<body onload="initialize()">
	<!-- ○ 발급받은 App Key -->
	<!-- appkey=ba33ba069d5fdefca8d4c4fce805cbb4 -->
	<!-- ○ 지도 중심 좌표 -->
	<!-- 37.5565568,126.9195311 -->
	<!-- ○ 이동 좌표 -->
	<!-- 라인프렌즈				: 37.5555563,126.9216175 -->
	<!-- 2번출구 앞 스타벅스	: 37.5572505,126.923703 -->
	<!-- 북창동순두부			: 37.5551864,126.9210047 -->
	<!-- 국회의사당				: 37.5289256,126.9185075 -->
	<div>
		<h1>Kakao Map 중심 좌표 이동</h1>
		<ul>
			<li>지도 객체의 메소드를 통해 지도를 원하는 좌표로 이동시킬 수 있다.</li>
			<li>표시되고 있는 영역을 벗어나지 않는 거리 내에서 애니메이션 효과처럼 지도를 부드럽게 이동시킬 수도 있다.</li>
		</ul>
	</div>

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

	<p>
		<button type="button" onclick="setCenter()">중심 좌표 이동</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: Kakao map 레벨 전환

<!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=ba33ba069d5fdefca8d4c4fce805cbb4"></script>

<script type="text/javascript">
	function initialize()
	{
		container = document.getElementById("map");
		options =
		{
			center : new kakao.maps.LatLng(37.5565568, 126.9195311),
			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();
	}
	
	function zoomOut()
	{
		var level = map.getLevel();
		
		map.setLevel(level+1);
		displayLevel();
	}
</script>
</head>
<body onload="initialize()">

	<!-- ○ 발급받은 App Key -->
	<!-- appkey=ba33ba069d5fdefca8d4c4fce805cbb4 -->
	<!-- ○ 지도 중심 좌표 -->
	<!-- 37.5565568,126.9195311 -->

	<div>
		<h1>Kakao map 레벨 전환</h1>
		<hr />
	</div>

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

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

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

</body>
</html>

ㄴㄴMapTest06.html: Kakao Map 지도 정보 얻어내기

<!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=ba33ba069d5fdefca8d4c4fce805cbb4"></script>
	
<script type="text/javascript">
function initialize()
{
	container = document.getElementById("map");
	options = 
	{
		center: new kakao.maps.LatLng(37.5565568,126.9195311),
		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() + ', ' + neLatLng.getLng() + "입니다.";
	
	var typeEl = document.getElementById("mapType");
	typeEl.innerHTML = message;
}
</script>
	
</head>
<body onload="initialize()">
	<!-- ○ 발급받은 App Key -->
	<!-- appkey=ba33ba069d5fdefca8d4c4fce805cbb4 -->
	<!-- ○ 지도 중심 좌표 -->
	<!-- 37.5565568,126.9195311 -->
	
<div>
	<h1>Kakao Map 지도 정보 얻어내기</h1>
	<hr />
</div>

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

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

</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=ba33ba069d5fdefca8d4c4fce805cbb4"></script>
<script type="text/javascript">
	function initialize()
	{
		container = document.getElementById("map");
		options = 
		{
				center: new kakao.maps.LatLng(37.5565568,126.9195311),
				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 -->
	<!-- appkey=ba33ba069d5fdefca8d4c4fce805cbb4 -->
	<!-- ○ 지도 중심 좌표 -->
	<!-- 37.5565568,126.9195311 -->
	
<div>
	<h1>Kakao Map 기본 컨트롤 구성</h1>
	<hr />
</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: 맑은 고딕;border-radius: 5px; } 
.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:hover {opacity: 0.8px}
.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=ba33ba069d5fdefca8d4c4fce805cbb4"></script>

<script type="text/javascript">
	function initialize()
	{
		container = document.getElementById("map");
		options =
		{
			center : new kakao.maps.LatLng(37.5565568, 126.9195311),
			level : 3,
		};
		map = new kakao.maps.Map(container, options);
	}

	// 지도 타입 컨트롤의 타입을 바꾸는 함수 정의
	//-- 지도 타입 컨트롤의 지도 또는 스카이뷰 클릭 시
	//	 호출되어 지도 타입을 전환할 수 있도록 구성
	function setMapType(maptype)
	{
		//alert(maptype);
		
		var roadmapControl = document.getElementById("btnRoadmap");
		var skyviewControl = document.getElementById("btnSkyview");

		var changeMaptype;
		
		if(maptype == 'roadmap')
		{
			roadmapControl.className = 'selected_btn';
			skyviewControl.className = 'btn';
			
			changeMaptype = kakao.maps.MapTypeId.ROADMAP;
		} else if(maptype == 'skyview')
		{
			roadmapControl.className = 'btn';
			skyviewControl.className = 'selected_btn';
			
			changeMaptype = kakao.maps.MapTypeId.SKYVIEW;
		} else {}
		
		map.setMapTypeId(changeMaptype);
	}
	
	function setZoom(btntype)
	{
		var level = map.getLevel();
		if(btntype == 'plus')
		{
			map.setLevel(level-1);
		} else if(btntype == 'minus')
		{
			map.setLevel(level+1);
		} else{}
	}
</script>
</head>
<body onload="initialize()">
	<!-- ○ 발급받은 App Key -->
	<!-- appkey=ba33ba069d5fdefca8d4c4fce805cbb4 -->
	<!-- ○ 지도 중심 좌표 -->
	<!-- 37.5565568,126.9195311 -->

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

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

		<!-- 지도 타입 컨트롤 div -->
		<div class="custom_typecontrol">
			<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="setZoom('plus')"> <img alt="확대"
				src="http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/ico_plus.png" />
			</span> <span onclick="setZoom('minus')"> <img alt="축소"
				src="http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/ico_minus.png" />
			</span>
		</div>

	</div>

</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=ba33ba069d5fdefca8d4c4fce805cbb4"></script>
<script type="text/javascript">
function initialize()
{
	container = document.getElementById("map");
	options = 
	{
			center: new kakao.maps.LatLng(37.5565568,126.9195311),
			level: 3,
			
			// 2) 드래그 막기 방법2: 드래그 & 휠 모두 제한
			draggable: false,
			//-- 『draggable: false』 옵션을 포함하여 지도를 생성할 경우
			//	  지도 생성 시 이동 뿐 아니라 마우스 휠을 이용한
			//	  확대/축 소 기능도 비활성화 된다.
	}
	
	map = new kakao.maps.Map(container, options);
	
	mapTypeControl = new kakao.maps.MapTypeControl();

	// 1) 드래그 막기 방법1: 드래그만 제한
	//map.setDraggable(false);
}

// 지도 이동 기능을 막거나 풀고자 하는 경우 사용
function setDraggalbe(draggable)
{
	//alert(draggable)
	
	// 마우스 드래그로 지도 
	map.setDraggable(draggable);
}
</script>

</head>
<body onload="initialize()">
	<!-- ○ 발급받은 App Key -->
	<!-- appkey=ba33ba069d5fdefca8d4c4fce805cbb4 -->
	<!-- ○ 지도 중심 좌표 -->
	<!-- 37.5565568,126.9195311 -->

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

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

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


</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=ba33ba069d5fdefca8d4c4fce805cbb4"></script>
<script type="text/javascript">
function initialize()
{
	container = document.getElementById("map");
	options = 
	{
		center: new kakao.maps.LatLng(37.5565568,126.9195311),
		level: 3,
	}
	
	map = new kakao.maps.Map(container, options);
	
	mapTypeControl = new kakao.maps.MapTypeControl();
}
function setZoomable(zoomable)
{
	//alert(zoomable);
	
	map.setZoomable(zoomable);
}
</script>
	
</head>
<body onload="initialize()">
	<!-- ○ 발급받은 App Key -->
	<!-- appkey=ba33ba069d5fdefca8d4c4fce805cbb4 -->
	<!-- ○ 지도 중심 좌표 -->
	<!-- 37.5565568,126.9195311 -->
	
<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=ba33ba069d5fdefca8d4c4fce805cbb4"></script>
<script type="text/javascript">
function initailize()
{
	container = document.getElementById("map");
	options = 
	{
		center: new kakao.maps.LatLng(37.5565568,126.9195311),
		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;
		
		//alert(latlng);
		
		var center = map.getCenter();
		
		var msg = "[클릭 위치] <br>"
		msg += "중심좌표: " + center + "<br>"
		msg += "위도: " + center.getLat() + "<br>"
		msg += "경도: " + center.getLng() + "<br>";
		
		var result = document.getElementById("result");
		result.innerHTML = msg;
	});
}
</script>
</head>
<body onload="initailize()">
	<!-- ○ 발급받은 App Key -->
	<!-- appkey=ba33ba069d5fdefca8d4c4fce805cbb4 -->
	<!-- ○ 지도 중심 좌표 -->
	<!-- 37.5565568,126.9195311 -->
	
<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=ba33ba069d5fdefca8d4c4fce805cbb4"></script>
<script type="text/javascript">
function initialize()
{
	container = document.getElementById("map");
	options = 
	{
			center: new kakao.maps.LatLng(37.5565568,126.9195311),
			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; // 프로퍼티**
		
		// 마커 위치를 클릭한 지점으로 이동
		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 -->
<!-- appkey=ba33ba069d5fdefca8d4c4fce805cbb4 -->
<!-- ○ 지도 중심 좌표 -->
<!-- 37.5565568,126.9195311 -->

<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=d97f97c18fe33ef872b95ea371df8978"></script>
<script type="text/javascript">
	function initialize()
	{
		container = document.getElementById("map");
		options =
		{
			center : new kakao.maps.LatLng(37.5565114, 126.9195495), // 풍성 빌딩
			level : 3, // 지도 확대축소 레벨
		};

		map = new kakao.maps.Map(container, options);

		// 마커가 표시될 위치 구성
		// (길 건너 스타벅스 → 37.55687003692692,126.9199849207958)
		markerPosition = new kakao.maps.LatLng(37.55687003692692,
				126.9199849207958);

		// 마커 생성
		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번 출구 롯데시네마에 마커가 표시되도록 설정
	function createMarker()
	{
		// 마커가 표시될 위치설정
		markerPosition = new kakao.maps.LatLng(37.556908912971096, 126.9242855498307), // 홍대입구 8번출구
		
		// 마커 생성
		marker = new kakao.maps.Marker(
		{
			// 구성한 위치
			position : markerPosition,
		});

		// 생성된 마커가 지도에 표시되도록 설정
		marker.setMap(map);
	}
</script>
</head>
<body onload="initialize()">

	<!-- ○ 발급 받은 App Key -->
	<!-- appkey=d97f97c18fe33ef872b95ea371df8978 -->
	<!-- ○ 지도의 중심 좌표 : 풍성빌딩 -->
	<!-- 37.5565114,126.9195495 -->

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

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

	<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>MapTest13.html</title>
<script type="text/javascript"
	src="//dapi.kakao.com/v2/maps/sdk.js?appkey=d97f97c18fe33ef872b95ea371df8978"></script>
<script type="text/javascript">
	function initialize()
	{
		container = document.getElementById("map");
		mapCenter = new kakao.maps.LatLng(37.5565114,126.9195495);
		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 -->
	<!-- appkey=d97f97c18fe33ef872b95ea371df8978 -->
	<!-- ○ 지도의 중심 좌표 : 풍성빌딩 -->
	<!-- 37.5565114,126.9195495 -->

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

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

</body>
</html>

기타: 오프셋?

동일 오브젝트 안에서 오브젝트 처음부터 주어진 요소나 지점까지의 변위차를 나타내는 정수형

(보통 인쇄에서 많이 씀)

https://ko.wikipedia.org/wiki/%EC%98%A4%ED%94%84%EC%85%8B_(%EC%BB%B4%ED%93%A8%ED%84%B0_%EA%B3%BC%ED%95%99)

오프셋 (컴퓨터 과학) - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 컴퓨터 과학에서 배열이나 자료 구조 오브젝트 내의 오프셋(offset)은 일반적으로 동일 오브젝트 안에서 오브젝트 처음부터 주어진 요소나 지점까지의 변위차를

ko.wikipedia.org

ㄴㄴ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=d97f97c18fe33ef872b95ea371df8978"></script>
<script type="text/javascript">
	function initialize()
	{
		container = document.getElementById("map");
		mapCenter = new kakao.maps.LatLng(37.5565114,126.9195495);
		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 = "http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png";//-- 마커 이미지 경로
		imageSrc = "images/markerGif04.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 -->
	<!-- appkey=d97f97c18fe33ef872b95ea371df8978 -->
	<!-- ○ 지도의 중심 좌표 : 풍성빌딩 -->
	<!-- 37.5565114,126.9195495 -->

	<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=d97f97c18fe33ef872b95ea371df8978"></script>
<script type="text/javascript">
function initialize()
{
	container = document.getElementById("map");
	mapCenter = new kakao.maps.LatLng(37.556870,126.919979);
	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'>";
	iwContent += "스타벅스<br>";
	iwContent += "<a href='http://map.kakao.com/link/map/스타벅스,37.556870,126.919979' style='color:blue;' target='_blank'>큰지도보기</a>";
	iwContent += "<a href='http://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 -->
	<!-- appkey=d97f97c18fe33ef872b95ea371df8978 -->
	<!-- ○ 지도의 중심 좌표 : 풍성빌딩 -->
	<!-- 37.5565114,126.9195495 -->

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

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

ㄴㄴMapTest17.html: 마커에 이벤트 등록

ㄴㄴ★★MapTest18.html: 다중 마커 구성★★

풍성빌딩 : 37.5565568,126.9195311

2번출구 앞 스타벅스 : 37.5572505,126.923703

길건너 스타벅스 : 37.556870,126.919979

컴포즈커피 : 37.5562127638299,126.92065901178984

메가커피 : 37.556010240728064,126.92095913809356

이디야커피 : 37.555627131177964,126.9206822674096

소림커피 : 37.55626600368084,126.91944798746093

투썸플레이스 : 37.55639240317804,126.91982981621415

라인프렌즈 : 37.5555563,126.9216175

북창동순두부 : 37.5551864,126.9210047

국회의사당 : 37.5289256,126.9185075

<!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=d97f97c18fe33ef872b95ea371df8978"></script>
<script type="text/javascript">
function initialize()
{
	container = document.getElementById("map");
	options = 
	{
		center: new kakao.maps.LatLng(37.5565114,126.9195495)
		, level: 3
	};
	
	map = new kakao.maps.Map(container, options);
	
	// check~!!!
	// 다중 마커를 등록할 속성 구성
	positions = 
	[
		{
			title: "스타벅스"
			, latlng: new kakao.maps.LatLng(37.5565114,126.9195495)
		}
		, {
			title: "컴포즈커피"
			, latlng: new kakao.maps.LatLng(37.5562127638299,126.92065901178984)
		}
		, {
			title: "메가커피"
			, latlng: new kakao.maps.LatLng(37.556010240728064,126.92095913809356)
		}
		, {
			title: "이디야커피"
			, latlng: new kakao.maps.LatLng(37.555627131177964,126.9206822674096)
		}
		, {
			title: "소림커피"
			, latlng: new kakao.maps.LatLng(37.55626600368084,126.91944798746093)
		}
		, {
			title: "투썸플레이스"
			, latlng: new kakao.maps.LatLng(37.55639240317804,126.91982981621415)
		}
	];
	
	// 마커 이미지 구성
	imageSrc = "http://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 -->
	<!-- appkey=d97f97c18fe33ef872b95ea371df8978 -->
	<!-- ○ 지도의 중심 좌표 : 풍성빌딩 -->
	<!-- 37.5565114,126.9195495 -->
	
	<!-- 
풍성빌딩                : 37.5565568,126.9195311
2번출구 앞 스타벅스     : 37.5572505,126.923703

길건너 스타벅스         : 37.556870,126.919979
컴포즈커피              : 37.5562127638299,126.92065901178984
메가커피                : 37.556010240728064,126.92095913809356
이디야커피              : 37.555627131177964,126.9206822674096
소림커피                : 37.55626600368084,126.91944798746093
투썸플레이스            : 37.55639240317804,126.91982981621415

라인프렌즈               : 37.5555563,126.9216175
북창동순두부          : 37.5551864,126.9210047
국회의사당               : 37.5289256,126.9185075
	 -->
	<div>
		<h1>Kakao Map 다중 마커 구성</h1>
		<hr>
	</div>

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

ㄴㄴMapTest19.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=d97f97c18fe33ef872b95ea371df8978"></script>
<script type="text/javascript">
function initialize()
{
	container = document.getElementById("map");
	mapCenter = new kakao.maps.LatLng(37.5565114,126.9195495);
	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 -->
	<!-- appkey=d97f97c18fe33ef872b95ea371df8978 -->
	<!-- ○ 지도의 중심 좌표 : 풍성빌딩 -->
	<!-- 37.5565114,126.9195495 -->
	
	<div>
		<h1>Kakao Map 교통정보 표시</h1>
		<hr>
	</div>

	<div id="map" style="width: 100%; height: 350px;"></div>
	<div>
		<button type="button" onclick="addTraficInfo()">교통정보 추가</button>
		<button type="button" onclick="removeTraficInfo()">교통정보 제거</button>
	</div>
</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=d97f97c18fe33ef872b95ea371df8978"></script>
<script type="text/javascript">
function initialize()
{
	container = document.getElementById("map");
	mapCenter = new kakao.maps.LatLng(37.5565114,126.9195495);
	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.TRAFFIC);
}
// 로드뷰 도로 정보 지도타입 제거
function removeRoadviewInfo()
{
	map.removeOverlayMapTypeId(daum.maps.MapTypeId.TRAFFIC);
}

</script>
</head>
<body onload="initialize()">
	<!-- ○ 발급 받은 App Key -->
	<!-- appkey=d97f97c18fe33ef872b95ea371df8978 -->
	<!-- ○ 지도의 중심 좌표 : 풍성빌딩 -->
	<!-- 37.5565114,126.9195495 -->
	
	<div>
		<h1>Kakao Map 로드뷰 표시</h1>
		<hr>
	</div>

	<div id="map" style="width: 100%; height: 350px;"></div>
	<div>
		<button type="button" onclick="addRoadviewInfo()">로드뷰 추가</button>
		<button type="button" onclick="removeRoadviewInfo()">로드뷰 제거</button>
	</div>
</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=d97f97c18fe33ef872b95ea371df8978"></script>
<script type="text/javascript">
function initialize()
{
	container = document.getElementById("map");
	mapCenter = new kakao.maps.LatLng(37.5565114,126.9195495);
	options = 
	{
		center: mapCenter
		, 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 -->
	<!-- appkey=d97f97c18fe33ef872b95ea371df8978 -->
	<!-- ○ 지도의 중심 좌표 : 풍성빌딩 -->
	<!-- 37.5565114,126.9195495 -->
	
	<div>
		<h1>Kakao Map 지형도 표시</h1>
		<hr>
	</div>

	<div id="map" style="width: 100%; height: 350px;"></div>
	<div>
		<button type="button" onclick="addTerrainInfo()">지형정보 추가</button>
		<button type="button" onclick="removeTerrainInfo()">지형도 제거</button>
	</div>
</body>
</html>

'📝 배우고 익히기 + > Web' 카테고리의 다른 글

(90)[Web]26일차: ((Bootstrap)) F_BootstrapApp 02~08 (0)	2024.01.04
(89)[Web]25일차: ((Json))((AJAX))((Bootstrap)), F_AjaxJquery05, F_AjaxJquery06,■ 부트스트랩(Bootstrap) ■, F_BootstrapApp (1)	2024.01.03
(88)[Web]24일차: ((Json))((AJAX)), ■ JSON ■, F_JsonApp, F_AjaxJquery04 (3)	2024.01.02
(86-87)[Web]22-23일차: ((AJAX)) ■ AJAX(에이작스) ■, F_AjaxApp, AjaxJquery01, AjaxJquery02 (0)	2023.12.27
(84-85)[Web]20-21일차: ((jQuery)) ■ jQuery(제이쿼리) ■, F_JQueryApp (2)	2023.12.26

🍀보통 기록합니다💭

(113-115)[Web]25-27일차: KakaoMapStudy

1. 2024.2.8-14(목-수)--날짜 사이 공유일 존재

카카오 개발자 센터(https://developers.kakao.com/)

Kakao 지도 Web API Sample(https://apis.map.kakao.com/web/sample/)

F_KakaoMapStudy

ㄴ/KakaoMapApp/WebContent

ㄴㄴMapTest00.html: 지도 생성 기본 내용 관찰

ㄴㄴMapTest01.html: 지도 그려지지 않음

ㄴㄴMapTest02.html: onload="initialize()

ㄴㄴMapTest03.html: 구버전, 최신버전

ㄴㄴMapTest04.html: Kakao Map 중심 좌표 이동(부드럽게 이동)

ㄴㄴMapTest05.html: Kakao map 레벨 전환

ㄴㄴMapTest06.html: Kakao Map 지도 정보 얻어내기

ㄴㄴMapTest07.html: 지도 타입 컨트롤

ㄴㄴMapTest08.html: 사용자 컨트롤 구성

ㄴㄴMapTest09.html: 드래그 제한 및 허용

ㄴㄴMapTest10.html: 확대 및 축소 제한

ㄴㄴMapTest11.html: 클릭 이벤트 등록

ㄴㄴMapTest12.html:지도클릭으로 좌표 확인 및 마커 표시

ㄴㄴMapTest13.html:고정 마커 생성

ㄴㄴMapTest14.html: 이동 가능한 마커 생성

기타: 오프셋?

ㄴㄴMapTest15.html: 다른 형태의 마커 생성

ㄴㄴMapTest16.html: 인포 윈도우 구성

ㄴㄴMapTest17.html: 마커에 이벤트 등록

ㄴㄴ★★MapTest18.html: 다중 마커 구성★★

ㄴㄴMapTest19.html:다중 마커 제어

ㄴㄴMapTest22.html:

'📝 배우고 익히기 + > Web' 카테고리의 다른 글

티스토리툴바

(113-115)[Web]25-27일차: KakaoMapStudy

1. 2024.2.8-14(목-수)--날짜 사이 공유일 존재

카카오 개발자 센터(https://developers.kakao.com/)

Kakao 지도 Web API Sample(https://apis.map.kakao.com/web/sample/)

F_KakaoMapStudy

ㄴ/KakaoMapApp/WebContent

ㄴㄴMapTest00.html: 지도 생성 기본 내용 관찰

ㄴㄴMapTest01.html: 지도 그려지지 않음

ㄴㄴMapTest02.html: onload="initialize()

ㄴㄴMapTest03.html: 구버전, 최신버전

ㄴㄴMapTest04.html: Kakao Map 중심 좌표 이동(부드럽게 이동)

ㄴㄴMapTest05.html: Kakao map 레벨 전환

ㄴㄴMapTest06.html: Kakao Map 지도 정보 얻어내기

ㄴㄴMapTest07.html: 지도 타입 컨트롤

ㄴㄴMapTest08.html: 사용자 컨트롤 구성

ㄴㄴMapTest09.html: 드래그 제한 및 허용

ㄴㄴMapTest10.html: 확대 및 축소 제한

ㄴㄴMapTest11.html: 클릭 이벤트 등록

ㄴㄴMapTest12.html:지도클릭으로 좌표 확인 및 마커 표시

ㄴㄴMapTest13.html:고정 마커 생성

ㄴㄴMapTest14.html: 이동 가능한 마커 생성

기타: 오프셋?

ㄴㄴMapTest15.html: 다른 형태의 마커 생성

ㄴㄴMapTest16.html: 인포 윈도우 구성

ㄴㄴMapTest17.html: 마커에 이벤트 등록

ㄴㄴ★★MapTest18.html: 다중 마커 구성★★

ㄴㄴMapTest19.html:다중 마커 제어

ㄴㄴMapTest22.html:

'📝 배우고 익히기 + > Web' 카테고리의 다른 글

관련글

티스토리툴바