<div id="map" style="width:100%;height:350px;"></div>
<p><em>마커를 클릭해주세요!</em></p>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 마커를 표시할 위치입니다
var position = new kakao.maps.LatLng(33.450701, 126.570667);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: position,
clickable: true // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정합니다
});
// 아래 코드는 위의 마커를 생성하는 코드에서 clickable: true 와 같이
// 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정합니다
//marker.setClickable(true);
// 마커를 지도에 표시합니다.
marker.setMap(map);
// 마커를 클릭했을 때 마커 위에 표시할 인포윈도우를 생성합니다
var iwContent = '<div style="padding:5px;">Hello World!</div>', // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content : iwContent,
removable : iwRemoveable
});
// 마커에 클릭이벤트를 등록합니다
kakao.maps.event.addListener(marker, 'click', function() {
//infowindow.open(map, marker);
});
kakao.maps.event.addListener(map, 'mouseup', function() {
infowindow.open(map, marker);
});
</script>
Map객체는 mouseup, mousedown 이벤트 타입을 지원하지 않기 때문에
문서에 명시되지 않은 이벤트를 사용할 경우 예상과 다른 동작이 일어날 수 있음을 안내드렸습니다.
clickable 옵션 또한 제공하는 click,dbclick 이벤트 발생만 막은 의도된 동작으로 이해해주시면 좋을 것 같습니다.
이와 같다면 mouseup이벤트가 발생하지 않아야 하는데 정확히 발생하고 있습니다.
아래 코드를 실행해 마커를 클릭해 보시면 버그라는 것을 금방 아실 수 있습니다.
API수정작업도 어렵지 않을것이니 적극적으로 검토해 주시면 좋겠습니다.
왜냐면 기존 앱에 marker click와 map mouseup&down 이벤트를 모두 사용하고 있는데 카카오맵은 이것 때문에 좀 골치가 좀 아픔니다.
부탁드립니다!
<div id="map" style="width:100%;height:350px;"></div>
<p><em>마커를 클릭해주세요!</em></p>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 마커를 표시할 위치입니다
var position = new kakao.maps.LatLng(33.450701, 126.570667);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: position,
clickable: true // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정합니다
});
// 아래 코드는 위의 마커를 생성하는 코드에서 clickable: true 와 같이
// 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정합니다
marker.setClickable(true);
// 마커를 지도에 표시합니다.
marker.setMap(map);
// 마커를 클릭했을 때 마커 위에 표시할 인포윈도우를 생성합니다
var iwContent = '<div style="padding:5px;">Hello World!</div>', // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content : iwContent,
removable : iwRemoveable
});
// 마커에 클릭이벤트를 등록합니다
kakao.maps.event.addListener(marker, 'click', function() {
// 마커 click
window.alert('marker click')
});
kakao.maps.event.addListener(map, 'mouseup', function() {
// 지도 mouseup : 이 이벤트는 지도에 등록한 이벤트 이므로 마커를 클릭했을 때 발생하지 않아야 합니다!
window.alert('map mouseup! 이 이벤트는 발생하지 않아야 합니다!')
});
</script>
