구글맵 반경(원) 그리기/삭제, 반경중앙에 마커 추가/삭제(google map circle draw/delete)

/**
 * 반경 그리기
 * @param : xy 좌표, 반경사이즈
 */
var circle;
function drawCircleOnMap(x, y, radius){ //반경중앙좌표, 반경(단위: m)
 
    circle = new google.maps.Circle({
        strokeColor: '#FF0000', //원 바깥 선 색
        strokeOpacity: 0.8, // 바깥 선 투명도
        strokeWeight: 1, //바깥 선 두께
        fillColor: '#FF0000', //선안의 색
        fillOpacity: 0.2,// 토명도
        center: {lat: y, lng: x}, //위치 좌표
        radius: Number(radius) // 반경, 단위: m
    });
 
    circle.setMap(map);// 반경을 추가할 map에 set
 
}
 
/**
 * 반경 중앙 마커그리기
 */
var circleMarker;
function addCircleMarkerOnMap(obj){ // 마커 정보 obj
 
 circleMarker = new google.maps.Marker({
        position: new google.maps.LatLng(obj.y , obj.x), // 마커가 위치할 위도,경도(반경중좌표)
        icon: {
         url :obj.img, // 마커로 사용할 이미지
         scaledSize : new google.maps.Size(obj.width, obj.height)//이미지 사이즈 조정
        },
        clickable : false,
        label:{ // 라벨 글씨 크기 및 css지정
         text: obj.label,
         fontSize : "9px",
         fontFamily : "Dotum",
         fontWeight : "bold"
        }
 });
 
 circleMarker.setMap(map);
}
 
 
/**
 * 반경 삭제, 반경중앙 마커 삭제
 */
function deleteCircle(){
 if(typeof circle !== 'undefined'){
  circle.setMap(null);
 }
 
 if(typeof circleMarker !== 'undefined'){
  circleMarker.setMap(null);
 }
}
 

반경중앙에 마커는 중앙을 표시하기 위해 따로 추가한 내용이다.

마커의 icon 의 옵션 scaledSize를 사용하면 이미지의 크기를 지정할수 있다.

마커의 label 은 중앙에 글씨를 표현해준다.

반경(원) 과 마커를 같이 그렸으니 같이 삭제해준다.

출처 : https://henrymin.tistory.com/4