용의자 위치 추적 시스템 - window.open() 지도를 새로운 창으로 띄우기

기존에는 지도를 원래 페이지에서 입력폼 바로 밑에 띄우도록 했다.

            const mapContainer = document.getElementById('map_container');
            if (response.data.map_html) {
                // 새로운 iframe 요소 생성
                const iframe = document.createElement('iframe');
                iframe.srcdoc = response.data.map_html;  // map HTML을 iframe의 srcdoc으로 삽입
                iframe.width = '100%';
                iframe.height = '600px';
                iframe.style.border = 'none';
    
                // 기존 콘텐츠를 지우고 iframe 추가
                mapContainer.innerHTML = '';
                mapContainer.appendChild(iframe);
                console.log("Map successfully loaded into #map-container");
            } else {
                console.error("Map HTML is empty");
            }
            const mapHtml = response.data.map_html;  // Flask에서 반환한 map_html

 

---

이번에는 지도를 새로운 창으로 띄울 수 있도록 한다.

기존에 파이썬에서 map_html을 보내는 부분은 그대로 두고, javascript에서 전달받은 데이터를 처리하는 부분만 수정한다.

javascript에서 새로운 창을 띄우는 것은 window.open을 사용한다.

            const map_html = response.data.map_html;  // Flask에서 반환한 map_html

            // 새로운 작은 창 열기
            const newWindow = window.open('', '', 'width=800,height=600');  // 작은 창 크기 설정
            newWindow.document.write(map_html);  // 지도 HTML을 새 창에 삽입
            newWindow.document.close();  // 문서 닫기 (새 창에 내용이 표시되도록)