[coding-diary] kakao map API 적용하기

naver map api 기간이 종료되면서 kakao map api로 바꾸게 되었다.

 

 

기존에 작업 되어있는 소스들이 있어서 조금만 수정했다.

 

 

기본 가이드는 공식 페이지에서 확인해서 그대로 따라하면 된다.

http://apis.map.kakao.com/web/guide/

테스트를 할때는 카카오맵 계정에 플랫폼 지정이 되어있어야 한다.

나는 웹이고, 내가 확인해야 하는 페이지는 테스트 서버이기 때문에 실서버, 테스트 서버 url을 모두 등록하였다.

 

 

원하는 곳의 지도를 center로 잡아야 하는데 그렇게 하기 위해서는 위경도 좌표가 필요하다.

구글맵을 이용한다. 아래 블로그 참고하였다.

https://blog.naver.com/coding-/221409899687

 

 

이렇게

	<div id="kakaoMap1" style="width:500px;height:400px;"></div>
	<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey={{자바스크립트key}}"></script>
	<script>
		var container = document.getElementById('kakaoMap1');
		var options = {
			center: new kakao.maps.LatLng({{위도}}, {{경도}}),
			level: 4
		};

		var map = new kakao.maps.Map(container, options);
	</script>

페이지 상에 카카오맵이 여러 개 들어가야 해서 적용한 소스.

	<div id="kakaoMap1" style="width:500px;height:400px;"></div>
	<div id="kakaoMap2" style="width:500px;height:400px;"></div>
	<div id="kakaoMap3" style="width:500px;height:400px;"></div>
	<div id="kakaoMap4" style="width:500px;height:400px;"></div>
	<div id="kakaoMap5" style="width:500px;height:400px;"></div>
	<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."></script>
	<script type="text/javascript">
		function initMap(mapid, lat, lang, mapTitle) {
			var mapContainer = document.getElementById(mapid), // 지도를 표시할 div 
				mapCenter = new kakao.maps.LatLng(lat, lang),// 지도의 중심좌표
				mapOption = {
					center : mapCenter,	
					level: 3// 지도의 확대 레벨
				};
			var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
			// 마커를 생성합니다
			var marker = new kakao.maps.Marker({
				position: mapCenter,
				title: mapTitle
			});
			// 마커가 지도 위에 표시되도록 설정합니다
			marker.setMap(map);			
			// 아래 코드는 지도 위의 마커를 제거하는 코드입니다
			// marker.setMap(null);   			
		}
		function initMain(mapNum) {//탭버튼 클릭시 지도가 노출되는 경우 해당 버튼의 index를 인수로 받도록 합니다.
			var mapsInfo = [ // 페이지에 들어갈 지도 정보들
				{
					id: 'kakaoMap1', 
					lat: 33.450701,
					lang: 126.570667,
					title: '위치 이름'
				}, { 
					id: 'kakaoMap2', 
					lat: 33.450701,
					lang: 126.570667,
					title: '위치 이름'
				}, { 
					id: 'kakaoMap3', 
					lat: 33.450701,
					lang: 126.570667,
					title: '위치 이름'
				}, { 
					id: 'kakaoMap4', 
					lat: 33.450701,
					lang: 126.570667,
					title: '위치 이름'
				}, { 
					id: 'kakaoMap5', 
					lat: 33.450701,
					lang: 126.570667,
					title: '위치 이름'
				}
			];
			if(mapNum == undefined){
				for(i=0; i<mapsInfo.length; i++){
					initMap(mapsInfo[i].id, mapsInfo[i].lat, mapsInfo[i].lang, mapsInfo[i].title);			
				}		
			}else{
				var x = mapNum - 1;
				initMap(mapsInfo[x].id, mapsInfo[x].lat, mapsInfo[x].lang, mapsInfo[x].title);			
			}	
		}
		initMain();
	</script>

 

탭버튼 클릭시 지도가 노출되는 형태로 되어있는데,

탭버튼 클릭해서 지도 영역이 display none에서 block으로 될 때 지도를 감싸는 영역의 사이즈가 바뀌는 것이기 때문에 지도를 다시 호출해주어야 한다.

window resize에는 자동으로 반응한다.

 

 

기타 다른 옵션 추가를 원한다면 아래 경로에서 확인할 수 있다.

 

http://apis.map.kakao.com/web/sample/