반응형
<html>
<head>
<title>
</title>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 37.5665, lng: 126.9780}
});
function fetchData() {
var url = 'data.csv';
fetch(url)
.then(response => response.text())
.then(csv => parseCSV(csv))
}
function parseCSV(csv) {
var lines = csv.split("\n");
for (var i = 0; i < lines.length; i++) {
var data = lines[i].split(",");
var lat = parseFloat(data[23]);
var lng = parseFloat(data[24]);
var name = data[5];
var marker = new google.maps.Marker({
position: {lat: lat, lng: lng},
map: map
});
const infowindow = new google.maps.InfoWindow({
content: name
});
marker.addListener('click', function(){
if (infowindow.getMap()) {
infowindow.close();
} else {
infowindow.open(map, this);
}
});
}
}
fetchData();
}
</script>
<style>
#map {
height: 1000px;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key= callback=initMap" async defer></script>
</body>
</html>- fetch 함수 사용
- 콜백 함수 에서 '=>'는 외부 컨텍스트에서 this를 상속 즉 마커 객체가 아닌 이벤트 리스너 함수가 속한 객체가 됨
- 따라서 자신만의 this 컨텍스트를 가져서 호출될 때 실행되는 컨텍스트에 따라 this를 결정하는 function() 사용
반응형
'Coding > javascript' 카테고리의 다른 글
| [JS] .CSV 파일 특정 컬럼 데이터 카카오 맵 마커 표기(XMLHttpRequest) (0) | 2024.05.03 |
|---|---|
| [JS] jquery $.ajax 간단한 사용 예제 (0) | 2023.12.15 |
