<html>
<head>
    <meta charset="UTF-8">
    <title>간단한 지도 표시하기</title>
    <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=6msw8dshkf"></script>
</head>
<body>
<div id="map" style="width:100%;height:700px;"></div>

<script>
//	맵 초기화
var mapOptions = {
    center: new naver.maps.LatLng(37.3595704, 127.105399),
    zoom: 10
};
var map = new naver.maps.Map('map', mapOptions);


//	데이터 초기화
var datas = new Array();
{% for value in values %}
	var data = {
		name : '{{ value.name }}',
		loc : {{ value.loc }},
		addr : '{{ value.addr }}',
		remain_stat : '{{ value.remain_stat }}'
	}
	datas.push(data);
{% endfor %}


//	데이터 출력용 샘플
//	for (var i = 0; i < datas.length; i++) {
//		console.log(datas[i].loc);
//	}

for (var i = 0; i < datas.length; i++) {
	//	이정표 등록
	var markerOptions = {
	    position: new naver.maps.LatLng(datas[i].loc[0], datas[i].loc[1]),
	    map: map
	};
	var marker = new naver.maps.Marker(markerOptions);
	
	//	이정표 내용 등록
	var infoWindow = new naver.maps.InfoWindow({
		content: '<div style="width:150px;text-align:center;padding:10px;">현 위치는 <br><b>"'+ datas[i].name +'"</b>.<br>재고량 : "' + maskInfo(datas[i].remain_stat) +'"</div>'
	});
	
	//	클릭에 대한 이벤트
	naver.maps.Event.addListener(marker, 'click', getClickHandler(marker, infoWindow));
}

//	클릭에 대한 이벤트
function getClickHandler(marker, infoWindow) {
    return function(e) {
        if (infoWindow.getMap()) {
            infoWindow.close();
        } else {
            infoWindow.open(map, marker);
        }
    }
}

function maskInfo(value) {
	if (value == "plenty") {
		return "충분";
    } else if (value == "some") {
     	return "보통";
    } else if (value == "few") {
      	return "부족";
    } else if (value == "empty") {
      	return "품절";
    } else {
    	return "정보없음";
    }
}
</script>
</body>
</html>
