<div id="map" style="width:100%;height:600px;"></div>
   
 
 
<script>
    var MARKER_ICON_URL = '<?php echo $board_skin_url ?>/img/mapicon001.png';
    var MARKER_HIGHLIGHT_ICON_URL = '<?php echo $board_skin_url ?>/img/mapicon002.png';
    
    var MARKER_SPRITE_POSITION = {
	
		<?php for ($i=0; $i<count($list); $i++) {
	$yti=($list[$i][subject]);		
	$ylink="<a href='{$list[$i]['href']}'>{$yti}</a>";
	$ylat=($list[$i][wr_23]);
	$ylng=($list[$i][wr_24]);
	?>
	<?php if ($list[$i]['subject']){ ?>
	"<?php echo $yti?>": [<?php echo $ylat?>, <?php echo $ylng?>,"<?php echo $ylink?>"]
	<?php }?>
	<?php if ($i==count($list)-1) continue; ?>
	<?php if ($list[$i]['subject']){ ?>
	,
	<?php } ?>
	<?php } ?>
 
    };
 
    var position = new naver.maps.LatLng(37.387451, 126.961792);
	
	var mapOptions = {
		zoom: 6,
		center: position,
		mapTypeControl: true,
		mapTypeControlOptions: {
			style: naver.maps.MapTypeControlStyle.BUTTON,
			position: naver.maps.Position.TOP_LEFT
		},
		zoomControl: true,
		zoomControlOptions: {
			style: naver.maps.ZoomControlStyle.SMALL,
			position: naver.maps.Position.BOTTOM_RIGHT
		},
		scaleControl: true,
		scaleControlOptions: {
			position: naver.maps.Position.RIGHT_CENTER
		},
		logoControl: true,
		logoControlOptions: {
			position: naver.maps.Position.TOP_LEFT
		},
		mapDataControl: true,
		mapDataControlOptions: {
			position: naver.maps.Position.BOTTOM_LEFT
		}
	};
 
	var map = new naver.maps.Map(document.getElementById('map'),mapOptions);
	
	var bounds = map.getBounds(),
    southWest = bounds.getSW(),
    northEast = bounds.getNE(),
    lngSpan = northEast.lng() - southWest.lng(),
    latSpan = northEast.lat() - southWest.lat();
	
	var markers = [], infoWindows = [];
 
    var recognizer = new MarkerOverlappingRecognizer({
        highlightRect: false,
        tolerance: 15
    });
    recognizer.setMap(map);
 
    function highlightMarker(marker) {
        var icon = marker.getIcon();
 
        if (icon.url !== MARKER_HIGHLIGHT_ICON_URL) {
            icon.url = MARKER_HIGHLIGHT_ICON_URL;
            marker.setIcon(icon);
        }
 
        marker.setZIndex(1000);
    }
 
    function unhighlightMarker(marker) {
        var icon = marker.getIcon();
 
        if (icon.url === MARKER_HIGHLIGHT_ICON_URL) {
            icon.url = MARKER_ICON_URL;
            marker.setIcon(icon);
        }
 
        marker.setZIndex(100);
    }
	
	
 
    for (var key in MARKER_SPRITE_POSITION) {
		
		var position = new naver.maps.LatLng(MARKER_SPRITE_POSITION[key][0], MARKER_SPRITE_POSITION[key][1]);
 
        var marker = new naver.maps.Marker({
            map: map,
            position: position,
            title: key,
            icon: {
                url: MARKER_ICON_URL,
                size: new naver.maps.Size(50, 50),
                anchor: new naver.maps.Point(25, 25),
                origin: new naver.maps.Point(0, 0)
            },
            
            zIndex: 100
        });
		
		var infoWindow = new naver.maps.InfoWindow({
        content: '<div style="width:100px;text-align:center;padding:5px;">'+ MARKER_SPRITE_POSITION[key][2] +'</div>'
    	});
	
		markers.push(marker);
		infoWindows.push(infoWindow);
 
		marker.addListener('mouseover', function(e) {
			highlightMarker(e.overlay);
		});
	
		marker.addListener('mouseout', function(e) {
			unhighlightMarker(e.overlay);
		});
	
		recognizer.add(marker);
		window.MARKER = marker;
	};
	
	naver.maps.Event.addListener(map, 'zoom_changed', function() {
		updateMarkers(map, markers);
	});
	
	naver.maps.Event.addListener(map, 'dragend', function() {
		updateMarkers(map, markers);
	});
 
	function updateMarkers(map, markers) {
		var mapBounds = map.getBounds();
		var marker, position;
		for (var i = 0; i < markers.length; i++) {
			marker = markers[i]
			position = marker.getPosition();
			if (mapBounds.hasLatLng(position)) {
				showMarker(map, marker);
			} else {
            	hideMarker(map, marker);
			}
 
		}
	}
 
	function showMarker(map, marker) {
		if (marker.setMap()) return;
		marker.setMap(map);
	}
 
	function hideMarker(map, marker) {
		if (!marker.setMap()) return;
		marker.setMap(null);
	}
	
	function getClickHandler(seq) {
		return function(e) {
			var marker = markers[seq],
			infoWindow = infoWindows[seq];
			if (infoWindow.getMap()) {
				infoWindow.close();
			} else {
				infoWindow.open(map, marker);
			}
		}
	}
 
	for (var i=0, ii=markers.length; i<ii; i++) {
		naver.maps.Event.addListener(markers[i], 'click', getClickHandler(i));
	}
 
 
    var overlapCoverMarker = null;
 
    naver.maps.Event.addListener(recognizer, 'overlap', function(list) {
        if (overlapCoverMarker) {
            unhighlightMarker(overlapCoverMarker);
        }
 
        overlapCoverMarker = list[0].marker;
 
        naver.maps.Event.once(overlapCoverMarker, 'mouseout', function() {
            highlightMarker(overlapCoverMarker);
        });
    });
 
    naver.maps.Event.addListener(recognizer, 'clickItem', function(e) {
        recognizer.hide();
 
        if (overlapCoverMarker) {
            unhighlightMarker(overlapCoverMarker);
 
            overlapCoverMarker = null;
        }
    });
 
    map.setZoom(7);
</script>