반응형

1. 구글맵스에서 원하는 위치값을 찍어서 좌표값 복사
2. 카카오맵의 클릭한 위치 마커찍기 샘플예제의 직접해보기 섹션에 해당 위치값을 붙여넣기
3. 해당 테스트화면의 정밀하게 원하는 지점을 찍고 해당 코드값을 활용

 

구글맵스에서 원하는 위치값을 찍어서 좌표값 복사

 

https://apis.map.kakao.com/web/sample/addMapClickEventWithMarker/

 

카카오맵의 클릭한 위치 마커찍기 샘플예제의 직접해보기 섹션에 해당 위치값을 붙여넣기

 

해당 테스트화면의 정밀하게 원하는 지점을 찍고 해당 코드값을 활용

반응형

안녕하세요

 

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

 

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

 

+ Recent posts