[업무 지식]/Crawling
[geocode] GeoJSON의 내용을 출력하는 HTML
by 에디터 윤슬
2025. 1. 2.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>한국의 박물관</title>
<style>
html, body, #map { height: 100%; margin: 0; padding: 0; }
h2 { margin: 0; font-size: 16px; }
div { font-size: 14px; }
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
// 지도를 초기화합니다.
const map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 37.5665, lng: 126.9780 }, // 서울 중심 좌표
zoom: 10 // 확대 수준
});
// InfoWindow 객체 생성
const infowindow = new google.maps.InfoWindow();
// GeoJSON 파일 로드 및 지도에 추가
map.data.loadGeoJson('./museums.geojson');
// 마커 클릭 이벤트 등록
map.data.addListener('click', function(e) {
const name = e.feature.getProperty('name');
const address = e.feature.getProperty('address');
const rating = e.feature.getProperty('rating');
// InfoWindow 내용 설정
const content = `
<div>
<h2>${name}</h2>
<p>주소: ${address}</p>
<p>평점: ${rating || '정보 없음'}</p>
</div>
`;
infowindow.setContent(content);
// InfoWindow 위치 설정 및 표시
infowindow.setPosition(e.feature.getGeometry().get());
infowindow.setOptions({ pixelOffset: new google.maps.Size(0, -30) });
infowindow.open(map);
});
}
</script>
<!-- Google Maps JavaScript API -->
<!-- API 키 입력 -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=api_key&callback=initMap"></script>
</body>
</html>
!python -m http.server
http://localhost:8000/korea_museum.html
