Semantic-UI 모달 띄워서 구글맵 보여주는데 모달이 하나만 뜨네요.

Question

안녕하세요. 직업학교에서 공부하고 있는 사람입니다.현재 작은 프로젝트를 진행 중인데 막히는 부분 질문 드립니다.JSP로 SNS를 구현하고 있는데요. Semantic-UI(시맨틱 UI) 프론트엔드 프레임워크를 적용 중입니다.인스타그램과 유사한 걸 만들고 있다고 생각하시면 될 것 같습니다. 이처럼 새 포스트 페이지에서 사진과 글을 쓸 수 있구요.위치를 누르면 구글맵이 떠서 주소를 가져옵니다. 이런 식이죠. 그리고 글을 작성하면, 이렇게 뉴스피드에 카드 형식으로 등록이 됩니다.그리고 카드에 들어있는 주소를 클릭하면 모달창이 떠서 위치를 확인할 수 있게 만들고 있는데요.여기서 문제가 발생합니다.최초에 작성한 맨 아랫 글만 모달창이 뜨고 있습니다. 가장 하단 오른쪽의 '대구광역시 ~' 텍스트를 클릭하면, 잘 나옵니다. 그런데, 다른 카드의 글자를 누르면 모달창이 뜨지도 않습니다.

<% for(String key : map.keySet()) { %>

14h

<% if(map.get(key).getProfile_img() == null) { %> <% } else { %> "> <% } %> "><%= map.get(key).getUser_id() %>

<% if(map.get(key).getAddress() == null || map.get(key).getAddress().equals("null")) { %> 주소 없음 <% } else { %> _a_show_map"><%= map.get(key).getAddress() %> <%} %>

">

<% if(map.get(key).getImage_path() == null) { %>
<% } else { %> ">
<% } %>

like"> <%if(map.get(key).getLike_state().equals("unlike")){ %> <%=map.get(key).getLike_count() %> <%}else{ %> <%=map.get(key).getLike_count() %> <%} %> <%=map.get(key).getComment_count() %>

<%} %>

카드를 뿌려주는 코드이구요.dto에서 DB에 저장된 내용을 가져옵니다.

모달 구역 코드입니다.모달 안의

여기에 구글맵이 들어갑니다. /* 구글 맵 시작 */ <%for(String key : map.keySet()){ %> var key = "<%=key%>"; function initMap() { var map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 14, center: {lat: 40.731, lng: -73.997} }); var geocoder = new google.maps.Geocoder(); document.getElementById(key+'_a_show_map').addEventListener('click', function() { geocodeAddress(geocoder, map); $('.ui.modal').modal('show').modal('refresh'); }) }); } function geocodeAddress(geocoder, resultsMap) { var address = document.getElementById(key+'_a_show_map').innerText; geocoder.geocode({'address': address}, function(results, status) { if (status === 'OK') { resultsMap.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: resultsMap, position: results[0].geometry.location }); } else { alert('Geocode was not successful for the following reason: ' + status); } }); }; // $("#"+key+"_a_show_map").click(function(e) {// e.preventDefault();// $('.ui.modal').modal('show').modal("refresh"); // }) <% } %>/* 구글 맵 끝 */구글맵 코드입니다. var address = document.getElementById(key+'_a_show_map').innerText;이 부분이 주소를 인식하는 부분입니다.구글맵에서는 주소만 텍스트로 써 주면 검색할 수 있도록 작성하였기 때문에 .innerText를 이용하여 한글로 쓰여진 주소 그대로를 타고 가는 겁니다. // $("#"+key+"_a_show_map").click(function(e) {// e.preventDefault();// $('.ui.modal').modal('show').modal("refresh");// })처음에는 제일 아래에 주석 처리한 이 부분을 페이지 로딩하면 작동하도록 $(document).ready(function() 에 넣어서 썼는데모달은 잘 뜨는데, 아까 말씀드린대로 구글맵의 주소가 가장 최초에 작성한 글의 주소로만 뜨는 문제가 생기더군요.모달창만 뜨고 기능은 동작하지 않는 겁니다.그래서 아예 구글맵 script 안의 addEventListener click 코드에 적용을 시켰는데, 모달창까지 뜨지 않네요 ㅎㅎ 어떻게 하면 모달창도 작동하면서, 각각의 카드의 주소를 가져올 수 있을지... 감이 잘 안오네요.

kiroki · Answer

이벤트 바인딩할 때 첫번째 카드의 글자에만 바인딩되고 이후에는 바인딩 안되서 그런게 아닐까요?아이디로 이벤트를 바인딩 하지 마시고 name 프로퍼티를 주신 후에그 name에 동적으로 바인딩 시키시면 다른 카드에도 이벤트가 바인딩 될 것 같습니다

gredo · Answer

&#64;kiroki 답변 감사합니다:)저도 구글링 해보니 비슷한 설명이 있더군요. id가 고유한 값이라서 그렇다는 말도 있고요.지금 방법은 a 태그에 id값을 바인딩했는데, name 프로퍼티를 쓰려면 a 태그 말고 다른 걸 사용해야 될까요?그리고 바인딩하는 코드를 어디에 넣어야 될지도 아직 잘 모르겠습니다. 계속 연구해 보겠습니다.

Semantic-UI 모달 띄워서 구글맵 보여주는데 모달이 하나만 뜨네요.

2개의 답변

#semantic-ui 목록