var imageSrc = ‘https://cdn-icons-png.flaticon.com/512/4598/4598615.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),
markerPosition = new kakao.maps.LatLng(37.529737386604815, 127.07152362775753); // 마커가 표시될 위치입니다
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: markerPosition,
image: markerImage, // 마커이미지 설정
clickable: true
});
marker.setMap(map);
var content = '<div class="wrap">' +
' <div class="info">' +
' <div class="title">' +
' 구의역' +
' <div class="close" onclick="closeOverlay()" title="닫기"></div>' +
' </div>' +
' <div class="body">' +
' <div class="img">' +
' <img src="https://cfile181.uf.daum.net/image/250649365602043421936D" width="73" height="70">' +
' </div>' +
' <div class="desc">' +
' <div class="ellipsis">제주특별자치도 제주시 첨단로 242</div>' +
' <div class="jibun ellipsis">(우) 63309 (지번) 영평동 2181</div>' +
' <div><a href="https://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>';
// 마커 위에 커스텀오버레이를 표시합니다
// 마커를 중심으로 커스텀 오버레이를 표시하기위해 CSS를 이용해 위치를 설정했습니다
var overlay = new kakao.maps.CustomOverlay({
content: content,
position: marker.getPosition()
});
// 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
kakao.maps.event.addListener(marker, 'click', function() {
overlay.setMap(map);
});
// 커스텀 오버레이를 닫기 위해 호출되는 함수입니다
function closeOverlay() {
overlay.setMap(null);
}
//건대역
// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption),
marker1Position = new kakao.maps.LatLng(37.5449, 127.0426); // 마커가 표시될 위치입니다
// 마커를 생성합니다
var marker1 = new kakao.maps.Marker({
position: marker1Position,
image: markerImage, // 마커이미지 설정
clickable: true
});
marker1.setMap(map);
var content1 = '<div class="wrap">' +
' <div class="info">' +
' <div class="title">' +
' 건대역' +
' <div class="close" onclick="closeOverlay()" title="닫기"></div>' +
' </div>' +
' <div class="body">' +
' <div class="img">' +
' <img src="https://cfile181.uf.daum.net/image/250649365602043421936D" width="73" height="70">' +
' </div>' +
' <div class="desc">' +
' <div class="ellipsis">제주특별자치도 제주시 첨단로 242</div>' +
' <div class="jibun ellipsis">(우) 63309 (지번) 영평동 2181</div>' +
' <div><a href="https://www.kakaocorp.com/main" target="_blank" class="link">홈페이지</a></div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>';
// 마커 위에 커스텀오버레이를 표시합니다
// 마커를 중심으로 커스텀 오버레이를 표시하기위해 CSS를 이용해 위치를 설정했습니다
var overlay1 = new kakao.maps.CustomOverlay({
content: content1,
position: marker1.getPosition()
});
// 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
kakao.maps.event.addListener(marker1, 'click', function() {
overlay1.setMap(map);
});
// 커스텀 오버레이를 닫기 위해 호출되는 함수입니다
function closeOverlay() {
overlay1.setMap(null);
}
건대역 오버레이는 닫히는데 구의역 오버레이를 닫으면 건대역 오버레이가 닫혀요,
찾아보니까 dom 형식으로 해야한다고 하는데 dom으로 표현을 어떻게 해야 할지 몰라서요ㅜㅜ
위 코드처럼 그냥 하나 하나로 여러개 할수 있나요,?