겹친 마커이미지에서의 마우스클릭

안녕하세요,
커스텀 마커를 이용해 마커를 등록하고
shape :“poly”,
coords: "0,8, 8,0, 12,0, 19,8, 19,13, 10,26, 9,26, 0,13"
처럼 마커 외곽선을 따라 마커의 클릭 또는 마우스오버 가능한 영역을 지정했는데요.
문제는 마커 클릭이 가능한 영역이 노란색 영역에서만 나타납니다.
저는 주황색영역에서도 마커 클릭이 가능하게 하고 싶은데,
해결할 방법은 없을까요?

아래는 소스코드 일부입니다.

	function createMarkerImage(src, size, options) {
	var markerImage = new kakao.maps.MarkerImage(src, size, options);
	
	return markerImage;
}

function createMarker(position, image) {
	var marker = new kakao.maps.Marker({
		position : position,
		image : image
	});

	return marker;
}

function setMarker(storeInfoList, clusterer) {
	for (i = 0; i < 6; i++) {
		if (storeInfoList[i].length !== 0) {
			var src = "/img/marker" + i + ".png", 
				size = new kakao.maps.Size(20, 26), 
				option = {
			        alt: "마커 이미지",
			        shape: "poly",
			        coords: "0,8, 8,0, 12,0, 19,8, 19,13, 10,26, 9,26, 0,13"
				}, 
				markerImage = createMarkerImage(src, size, option);

			// 데이터에서 좌표 값을 가지고 마커를 표시합니다
			// 마커 클러스터러로 관리할 마커 객체는 생성할 때 지도 객체를 설정하지 않습니다
			var markers = $(storeInfoList[i]).map(function(idx, storeInfo) {

				var position = new kakao.maps.LatLng(storeInfo.store_lat, storeInfo.store_lng);
				var marker = new kakao.maps.Marker({
					position : position,
					image : markerImage,
					zIndex : 1
				});
				setCustomOverlay(kakaoMap.map, position, marker, storeInfo); // 커스텀오버레이 등록 함수

				return marker;
			});

			clusterer.addMarkers(markers); // 클러스터러에 마커들을 추가합니다

		}
	}
}

끄응; 현재 API의 구조로는 안 됩니다.
만약 만들고 싶으시면 customoverlay로 마커이미지를 넣어 만드시고
CSS의 clip-path: polygon 스펙을 사용하여 직접 클립영역을 지정하는 형태로 작업하셔야 할 것 같습니다.

위 처럼 해결방식을 아는데도 지원이 힘들다고 말씀드린 것은
범용성을 고려해야 하는 API의 특성상 하위브라우저에서 지원되지 않는 스펙을 사용하기 힘들어서 입니다.
그리고 기존 사용법도 고려를 해야 하므로 빠른 지원은 불가능 할 것으로 예상됩니다.

감안하고 사용하시거나
겹쳤을 때 다른 처리 방식(marker.setZIndex() 함수를 사용하여 마커를 위로 올린다던지, 겹쳤을 때 다른 UX로 푼다던지)을 고려해 보시는 것도 하나의 방법입니다.