좀 더 빠르게 답변을 드릴 수 있도록 소스를 스크린 샷이 아닌 코드로 첨부해주세요.
저번에 주신 내용을 바탕으로 이미지를 마커 표시하기 예제를 같이 붙인 소스 첨부해드립니다.
비교해서 확인 부탁드립니다.
<div id="map" style="width:100%;height:350px;"></div>
<script>
var mapContainer = document.getElementById('map'), // 지도의 중심좌표
mapOption = {
center: new kakao.maps.LatLng(33.451475, 126.570528), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
var positions = [
{
title: '카카오',
latlng: new kakao.maps.LatLng(33.450705, 126.570677)
},
{
title: '생태연못',
latlng: new kakao.maps.LatLng(33.450936, 126.569477)
},
{
title: '텃밭',
latlng: new kakao.maps.LatLng(33.450879, 126.569940)
},
{
title: '근린공원',
latlng: new kakao.maps.LatLng(33.451393, 126.570738)
}
];
for(let i=0; i < positions.length; i++){
var data = positions[i];
displayMarker(data);
}
var clickedOverlay = null;
var imageSrc = 'http://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);
// 지도에 마커를 표시하는 함수입니다
function displayMarker(data) {
var marker = new kakao.maps.Marker({
map: map,
position: data.latlng,
image: markerImage
});
var overlay = new kakao.maps.CustomOverlay({
yAnchor: 3,
position: marker.getPosition()
});
var content = document.createElement('div');
content.innerHTML = data.title;
content.style.cssText = 'background: white; border: 1px solid black';
var closeBtn = document.createElement('button');
closeBtn.innerHTML = '닫기';
closeBtn.onclick = function () {
overlay.setMap(null);
};
content.appendChild(closeBtn);
overlay.setContent(content);
kakao.maps.event.addListener(marker, 'click', function() {
if(clickedOverlay) {
clickedOverlay.setMap(null);
}
overlay.setMap(map);
clickedOverlay = overlay;
});
}
</script>