[JavaScript] Google maps Marker Click And Get ID

안녕하세요

 

또 한달만에 작성하는 블로그 입니다.

 

구글 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