안녕하세요
또 한달만에 작성하는 블로그 입니다.
구글 API를 사용하여 Marker를 여러개 세팅하고 클릭하면 해당 ID를 가져와서 해당 마커의 대한 데이터를 가져오려고
만든 소스 입니다.
다른 분들도 필요할지 모르겠지만..
map = new google.maps.Map(document.getElementById('google_map'), {
center: {
lat: 37.551073,
lng: 126.987893
},
zoom: 10,
//zoomControl: false, 줌 컨트롤
streetViewControl: false, //로드뷰 아이콘 on/off
mapTypeControl : false //맵 타입 on/off (지도 , 위성)
});
//Marker 위치 세팅 (label , 경도 , 위도 , 아이디)
var locations = [
['서울역', 37.5546788, 126.9706069,'idtest1'],
['서울특별시청', 37.5668260, 126.9786567, 'idtest2'],
['을지로입구역', 37.5660373, 126.9821930, 'idtest3'],
['덕수궁', 37.5655638, 126.974894, 'idtest4'],
];
//var infowindow = new google.maps.InfoWindow();
var marker, i;
//위치를 세팅 시켜줍니다.
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
id: locations[i][3]
});
//Marker를 찍었을 때 클릭 이벤트
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
alert(this.id); //아이디 가져오기
////중심 위치를 클릭된 마커의 위치로 변경
//map.setCenter(this.getPosition());
////마커 클릭 시의 줌 변화
//map.setZoom(14);
//마커 클릭 시 label 및 데이터 보여주기
//infowindow.setContent(locations[i][0]);
//infowindow.open(map, marker);
}
})(marker, i));
}
해당 건은 여러개의 블로그를 보고 만들었습니다.
감사합니다 :D