<div class="wrap mb-5">
	<section>
	<div id="s11_05" class="s11_05 mt-262" >	
				<article class="peb container-1400 text-center mt-262">				
					<h3 class="article_title text-center led-line-140" style="margin-bottom: 0px;"><strong>MAP</strong></h3>
					<div class="main_sub_box" style="margin-top:80px">


					<div class="row">
        	<div class="col">
			<p></p>
				<ul class="nav">
					<li class="nav-item" onclick="myMap('제주특별자치도 제주시 첨단로 242' ,'본사');">
					본사
					</li>
					<li class="nav-item" onclick="myMap('수원시 장안구 영화동 428-12', '공장');">
						공장
					</li>
				</ul>
    



			</div>
      </div>

					</div>
				</article>


			<div class="tab-content main_bottom_banner">

				<div class="tab-pane fade show active" id="qwe">					
					<div id="map" style="width:100%;height:682px;"></div>
				</div>



				<div class="tab-pane fade" id="asd">
						
				</div>

			</div>

	
			
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=키값&libraries=services"></script>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=10e391dff9214f0485d162ce659e971c&libraries=services,clusterer,drawing"></script>
<script>
var marker=null;
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
	    mapOption = {
	        center: new kakao.maps.LatLng(37.57060, 126.97668), // 지도의 중심좌표
	        level: 4, // 지도의 확대 레벨
	        mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
	    }; 
	// 지도를 생성한다 
	var map = new kakao.maps.Map(mapContainer, mapOption); 

	// 주소-좌표 변환 객체를 생성합니다
	var geocoder = new kakao.maps.services.Geocoder();



	// 지도 타입 변경 컨트롤을 생성한다
	var mapTypeControl = new kakao.maps.MapTypeControl();
	// 지도의 상단 우측에 지도 타입 변경 컨트롤을 추가한다
	map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);	
	// 지도에 확대 축소 컨트롤을 생성한다
	var zoomControl = new kakao.maps.ZoomControl();
	// 지도의 우측에 확대 축소 컨트롤을 추가한다
	map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
	// 지도 중심 좌표 변화 이벤트를 등록한다
	kakao.maps.event.addListener(map, 'center_changed', function () {
		//console.log('지도의 중심 좌표는 ' + map.getCenter().toString() +' 입니다.');
	});
	// 지도 확대 레벨 변화 이벤트를 등록한다
	kakao.maps.event.addListener(map, 'zoom_changed', function () {
		//console.log('지도의 현재 확대레벨은 ' + map.getLevel() +'레벨 입니다.');
	});
	// 지도 영역 변화 이벤트를 등록한다
	kakao.maps.event.addListener(map, 'bounds_changed', function () {
		var mapBounds = map.getBounds(),
			message = '지도의 남서쪽, 북동쪽 영역좌표는 ' +
						mapBounds.toString() + '입니다.';
		//console.log(message);	
	});
	// 지도 시점 변화 완료 이벤트를 등록한다
	kakao.maps.event.addListener(map, 'idle', function () {
		var message = '지도의 중심좌표는 ' + map.getCenter().toString() + ' 이고,' + 
						'확대 레벨은 ' + map.getLevel() + ' 레벨 입니다.';
		//console.log(message);
	});
	// 지도 클릭 이벤트를 등록한다 (좌클릭 : click, 우클릭 : rightclick, 더블클릭 : dblclick)
	kakao.maps.event.addListener(map, 'click', function (mouseEvent) {
		//console.log('지도에서 클릭한 위치의 좌표는 ' + mouseEvent.latLng.toString() + ' 입니다.');
	});	
	// 지도 드래깅 이벤트를 등록한다 (드래그 시작 : dragstart, 드래그 종료 : dragend)
	kakao.maps.event.addListener(map, 'drag', function () {
		var message = '지도를 드래그 하고 있습니다. ' + 
						'지도의 중심 좌표는 ' + map.getCenter().toString() +' 입니다.';
		//console.log(message);
	});
	// 지도에 마커를 생성하고 표시한다
	// var marker = new kakao.maps.Marker({
	//     position: new kakao.maps.LatLng(37.56860, 126.97643), // 마커의 좌표
	//     map: map // 마커를 표시할 지도 객체
	// });

function myMap(myPosition, positionName){

	// 주소로 좌표를 검색합니다
	geocoder.addressSearch(myPosition, function(result, status) {
		

		// 정상적으로 검색이 완료됐으면 
		if (status === kakao.maps.services.Status.OK) {

			var coords = new kakao.maps.LatLng(result[0].y, result[0].x);


			var imageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png', // 마커이미지의 주소입니다    
    		imageSize = new kakao.maps.Size(64, 69), // 마커이미지의 크기입니다
    		imageOption = {offset: new kakao.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
      
			// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
			var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption),
				markerPosition = new kakao.maps.LatLng( result[0].y, result[0].x); // 마커가 표시될 위치입니다
					
				// 결과값으로 받은 위치를 마커로 표시합니다
				// marker = new kakao.maps.Marker({
				// 	map: map,
				// 	position: coords
				// });

		
				// 마커를 생성합니다
				marker = new kakao.maps.Marker({
					position: markerPosition, 
					image: markerImage // 마커이미지 설정 
				});

				


				// 인포윈도우로 장소에 대한 설명을 표시합니다
				 var infowindow = new kakao.maps.InfoWindow({
				 	content: '<div style="width:150px;text-align:center;padding:6px 0; border:3px solid #EB6868;font-size:16px;font-weight:bold">'+positionName+'</div>'
				 });
				 infowindow.open(map, marker);

				
				// 마커가 지도 위에 표시되도록 설정합니다
				marker.setMap(map);  

				// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
				map.setCenter(coords);
				// 마커를 결과값으로 받은 위치로 옮긴다.
				marker.setPosition(coords);	
		} 
	}); 

}


myMap("제주특별자치도 제주시 첨단로 242", "본사");

</script>





	</div>
</section>
</div>