본문 바로가기
& Develop

카카오 맵(지도) 손쉽게 구현하기 - 10분만에 뚝딱!

by 코드네임피터 2020. 4. 17.

1. 카카오 개발자 사이트로 이동하여 등록 및 로그인 한다. https://developers.kakao.com/

2. 플랫폼과 사이트 도메인을 등록한다.

3. 내 애플리케이션 > 앱 설정 > 요약 정보로 이동하여 앱키를 복사한다.
   테스트 용이라면 admin을 아니라면 상태에 맞는 키를 복사한다.

4. https://apis.map.kakao.com/로 이동한다. 나의 개발 형태와 맞는 사항을 찾는다.

5. https://apis.map.kakao.com/web/sample/로 이동하여 내가 필요한 형태를 확인한다.

6. 샘플들을 조합하면서 웹페이지로 구현한다.

 

아래는 화면에 지도 열어서 마커넣고, 마커에 레이블 추가한 코드이다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Kakao 지도 시작하기</title>
</head>
<body>
	<div id="map" style="width:650px;height:450px;"></div>
	<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=인증키를 넣으세요"></script>
	<script>
		var container = document.getElementById('map');
		var options = {
			center: new kakao.maps.LatLng(좌표를 찍으세요),
			level: 3
		};

		var map = new kakao.maps.Map(container, options);
		
		
		// 마커가 표시될 위치입니다 
		var markerPosition  = new kakao.maps.LatLng(좌표를 찍으세요); 

		// 마커를 생성합니다
		var marker = new kakao.maps.Marker({
		position: markerPosition
		});

		// 마커가 지도 위에 표시되도록 설정합니다
		marker.setMap(map);
	
		var iwContent = 
			'<div style="padding:5px;"><h2>뭐라 뭐라 쓰세요~</h5></div>', 
		// 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
		iwPosition = new kakao.maps.LatLng(좌표를 찍으세요), 
		//인포윈도우 표시 위치입니다
		iwRemoveable = false; 
		// removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다

		// 인포윈도우를 생성하고 지도에 표시합니다
		var infowindow = new kakao.maps.InfoWindow({
		map: map, // 인포윈도우가 표시될 지도
		position : iwPosition, 
		content : iwContent,
		removable : iwRemoveable
});
      
		// 아래 코드는 인포윈도우를 지도에서 제거합니다
		// infowindow.close();        
	
	
	</script>
</body>
</html>

 

비개발자도 쉽게 할 수 있답니다.

(개발자가 혹시 이런것 가지고 안되네 되네 하면요. 혼내주세요.)

댓글0