[스크립트] google map api 반경표시 (by 주소검색)

google map geocoder and circle

구글맵 circle 과 geocoder 구현

구글맵 API에서 circle를 지도상에 표시하려고한다.

표시하기위해 구글맵API geocoder를 사용하여 장소검색을 한후 반경을 표시하는 기능을 구현해보자.

추후 반경좌표정보를 DB에 저장하고 해당 반경안에 사물/또는 사람이 진입/진출 확인도 가능하다.

https://developers.google.com/maps/documentation/javascript/examples/places-placeid-geocoder#maps_places_placeid_geocoder-javascript

Place ID Geocoder | Maps JavaScript API | Google for Developers

Send feedback Place ID Geocoder Stay organized with collections Save and categorize content based on your preferences. The Place ID Geocoder sample uses the Place Autocomplete widget to allow a user to search for a place. After it retrieves the place detai

developers.google.com

구글지도API로 주소검색과 반경표시하기

1.우선 지도상에 장소검색을 할수있는 입력폼을 구현한다.

2.이후 검색된 좌표값을 가지고 반경을 표시한다.

3.반경을 표시하고 만약 반경을 드래그 또는 확대/축소 할경우 변경된 좌표값을 가져올수 있다.

| HTML+CSS

<body>
    <div>
        <div style="display: none">
            <input id="pac-input" class="controls" type="text" placeholder="Enter a location"/>
        </div>
        <div id="areaMap" style="width:100%; height:500px;"></div>
    </div>
</body>

<style>
.controls {
    background-color: #fff;
    border-radius: 2px;
    border: 1px solid transparent;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    font-family: Roboto;
    font-size: 15px;
    font-weight: 300;
    height: 29px;
    margin-left: 17px;
    margin-top: 10px;
    outline: none;
    padding: 0 11px 0 13px;
    text-overflow: ellipsis;
    width: 400px;
}

.controls:focus {
    border-color: #4d90fe;
}
</style>

| script

<script async defer src="https://maps.googleapis.com/maps/api/js?key={본인API키값}&region=kr&callback=initMap&libraries=places&v=weekly"></script>

<script>
var g_map;
var g_circle = null;
var g_geocoder = null;
function initMap(){
    var mapOptions = {
        center: new google.maps.LatLng(36.3504119, 127.384847),
        zoom: 8,
        minZoom: 3,
        maxZoom: 18,
    };
    g_map = new google.maps.Map(document.getElementById("areaMap"), mapOptions);
    g_geocoder = new google.maps.Geocoder();
    
    const input = document.getElementById("pac-input");
    const autocomplete = new google.maps.places.Autocomplete(input, {
        fields: ["place_id", "geometry", "name", "formatted_address"],
    });

    autocomplete.bindTo("bounds", g_map);
    g_map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
    
    autocomplete.addListener("place_changed", () => {
        const place = autocomplete.getPlace();

        if (!place.place_id) {
            return;
        }

        g_geocoder.geocode({ placeId: place.place_id }).then(({ results }) => {
            fn_MapClear();                   //초기화하기
            
            g_map.setZoom(13);
            g_map.setCenter(results[0].geometry.location);
            
            geo_place = place.name;          //장소명
            place.place_id;                  //장소고유아이디
            results[0].formatted_address;    //장소주소
            	
            var circleOptions = {
                strokeColor: '#001054',
                strokeOpacity: 0.8,
                strokeWeight: 3,
                fillColor: '#B5B2FF',
                fillOpacity: 0.3,
                map: g_map,
                center: results[0].geometry.location, //장소좌표값
                radius: 1000,
                editable: true,
                draggable: true,
            };
            g_circle = new google.maps.Circle(circleOptions);
			
            if(g_circle != null){
                fn_circle_latlng(g_circle);
            }
	 		
            google.maps.event.addListener(g_circle, 'center_changed', function (e) {
                fn_circle_latlng(g_circle);
            });
           	
            google.maps.event.addListener(g_circle, 'radius_changed', function (e) {
                fn_circle_latlng(g_circle);
            });
           	
        }).catch((e) => window.alert("Geocoder failed due to: " + e));
    });
}

function fn_MapClear(){
    if(g_circle != null){
        g_circle.setMap(null);
        g_circle = null;
    }
	
    $("#pac-input").val("");	
    g_map.setZoom(8);
    g_map.setCenter(new google.maps.LatLng(36.3504119, 127.384847));
}
</script>

저작자표시 비영리 변경금지

'개발 > 기타' 카테고리의 다른 글

[Json] 배열형태의값을 서버로 전달 (Jquery by Spring) (0)	2023.07.18
[jQuery] Ajax 데이터 <-> Spring 컨트롤러 주고받기 (0)	2023.06.28
[스크립트] 개인정보 범위와 마스킹예제 (이름/주민번호 등) (0)	2023.06.23
[RTSP] nodejs로 rtsp 실시간 스트리밍 서버구축 (0)	2023.05.04
[JQuery] select2 jquery 플러그인 사용하기 (1)	2023.04.24