[국비지원무료교육][빅데이터 개발자 과정] 프로젝트 중, 내 위치 좌표 가져오기: GeoLocation(2)

- 본 글은 스마트 인재개발원 서포터즈 활동으로 작성한 글입니다

 

위의 구글 지오로케이션을 완성도 했고 이해도 쫌 했다!

 

이게 어느 순간 하나씩 보다가 어! 하고 느낌이 왔고, 하나 하나 차근 차근 완성했는데, 엄청 재미있었다!

구글 지오로케이션으로 하나씩 기능을 만들어서 해보는데 시간이 부족해서 그렇지 다시 말하지만 정말 재밌었다ㅎㅎ 화면에 지도로 구현이 되고 하니까, 맨 처음 웹에 글자 쓰던 느낌!? 여튼 시작해보자! 

0. 미리 알아둬야 하는 내용!

구글 maps api 설명에 있었던 말이다. 한편으론 당연한 말이지만,

 

해당 'api를 사용하기 위해 작성해야 하는 객체나, 컴포넌트가 있다.' 라는 내용이다. 부트 스트랩 프레임워크처럼 엄격하게 규칙을 따르는 것은 아닌지만, api 에서 제공하는 기능이 있고, 그 기능을 사용하기 위해서는 그것을 위핸 객체를 양식에 맞게 선언하고, 연관된 컴포넌트를 이용해 개발해야 하는 것이다. 

 

- 컴포넌트: 마커나 글상자 같이 해당 api 에서 제공하는 구성품 같은것 

 

 

1. 우선 지도를 켠다! 

참참, 지도를 켜기로 했다... 그건 음.. 다음에 안 켜는 것을 도전하기로 했고,

이번에는 지도를 켜서 화면에서 수정할 수 있도록 바꿨다! 유기동물 제보를 한다고 해도 좀 움직이고 할 수도 있고, 

조금 멀리서 봤을 수도 있고 ㅇㅇ.. .

let map

function initMap() {
		// 기본 샘플 주소 값: 스인개
		let smhrd = {lat: 35.14972, lng: 126.91987};
	
		// 지도 켜기 
		// 지도 중괄호 속성
		map = new google.maps.Map(document.getElementById("map"),{
			center: smhrd,
		    zoom: 15,
		    zoomControlOptions: {
		      position: google.maps.ControlPosition.LEFT_CENTER,
		    },
		    scaleControl: true,
		    fullscreenControl: true,
		    mapTypeControl: false,
		    streetViewControl: false,
		 });
     }

 

google maps 는 지도 시작 함수로 initMap() 이란 이름을 쓴다.

이것이 1번인 이유는 maps api 의 경우, 지도를 켜고 그 이후에 지도 안에서 활용하는 경우가 대부분이기 때문에, 이 함수 안에 객체를 생성하고, 콜백함수 형태로 기능을 수행해야 한다. 다시말해서 이 함수는 기능이 많아질수록 안에 객체를 많이 써주게 된다. 위의 지도 불러오는 함수는 이런 저런 속성을 직접 설정하여 길어져서 14줄 정도인데, 내가 짠 코드에서는 initMap 안에서만 45줄 정도된다. 

 

html body에 <div id='map'> 이 있고, 구글 api 키를 받아서 작성해 놓았다는 전제 하에 위 코드가 있으면 실행시 지도가 켜진다. 그리고 지도의 중앙 위치는 위에서 설정해놓은 좌표값 위도 lat(latitude), 경도 lng(longitude) 로 나타나게 된다. 이 위치는 스마트인재개발원 충장캠퍼스라서 학원에서 쓰는 smhrd 영문 약자를 써보았다.

 

 

2. 지도를 클릭하면 클릭한 자리에 마커 만들기!

let map, marker;

function initMap() {
		// 기본 샘플 주소 값: 스인개
		let smhrd = {lat: 35.14972, lng: 126.91987};
	
		// 지도 켜기 
		// 지도 중괄호 속성
		map = new google.maps.Map(document.getElementById("map"),{
			center: smhrd,
		    zoom: 15,
		    zoomControlOptions: {
		      position: google.maps.ControlPosition.LEFT_CENTER,
		    },
		    scaleControl: true,
		    fullscreenControl: true,
		    mapTypeControl: false,
		    streetViewControl: false,
		 });

	       // 지도에 원하는 부분 클릭하면 새 마커 나오게 하기
		google.maps.event.addListener(map, 'click', function(event) {
			addMarker(event.latLng);
		});

	}


	// 새 마커 작성하기
	function addMarker(pos) {
		marker = new google.maps.Marker({
		    position: pos,
		    map: map,
		});
	}

 

위에 선언한 변수가 추가되었고, initMaps 내부에 콜백함수가 추가되었다. 초보자 용으로 간단히 말하면 콜백함수는 클릭과 같은 이벤트가 주어졌을 때 그것에 반응해서 나타나는 함수를 말한다. 클릭하면 새 마커 나오게 하기라고 작성하였고, 그 안에 addMarker라는 함수를 실행시켜라고 작성했다. 그리고 initMap 밖에 addMarker라는 함수를 작성했다. 이를 통해 지도에서 어느 위치를 클릭하면 그 이후에( back) 바깥에 작성한 addMarker 함수가 호출(call) 되어 기능하는 것이다. 

 

google.maps.event.addListener(map, 'click', function(event) {
			deleteMarkers();  // 기존 마커 지우기
			infoWindow.close();  // 기존 설명창 닫기 
			searchedCoords(event.latLng);  // 이벤트 위치 변수 저장
			addMarker(event.latLng);  // 새 마커 만들기
			geocodeLatLng(geocoder, map, infoWindow);  // 마커 위치 역지오코딩 하기 
		});

내 프로젝트에서는 지도를 클릭하면 위 처럼 작동하도록 만들었다. 물론, 해당하는 함수들은 initMap 밖에 선언해두어야 작동한다. 

 

 

3. 지오로케이션 함수 추가!  

let map, marker, infoWindow;

function initMap() {
		// 기본 샘플 주소 값: 스인개
		let smhrd = {lat: 35.14972, lng: 126.91987};
	
		// 지도 켜기 
		// 지도 중괄호 속성
		map = new google.maps.Map(document.getElementById("map"),{
			center: smhrd,
		    zoom: 15,
		    zoomControlOptions: {
		      position: google.maps.ControlPosition.LEFT_CENTER,
		    },
		    scaleControl: true,
		    fullscreenControl: true,
		    mapTypeControl: false,
		    streetViewControl: false,
		 });
         
		// 지도에 원하는 부분 클릭하면 새 마커 나오게 하기
		google.maps.event.addListener(map, 'click', function(event) {
		addMarker(event.latLng);
		});
        
		// infoWindow 객체 생성: 주로 위치 풍선 보여줌
		infoWindow = new google.maps.InfoWindow();
        
        // 위치 검색할 버튼 만들기
		const locationButton = document.createElement("button");
		
 	 	locationButton.textContent = "위치 검색";
 		locationButton.classList.add("custom-map-control-button");
 		map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton);
 		// 위치 검색 버튼 눌리면 Geolocation 실행
 		locationButton.addEventListener("click", () => {
 			doGeolocation(); 
 		});
    }		
		

    // 지오로케이션 함수
	function doGeolocation() {
 		if (navigator.geolocation) {
		      navigator.geolocation.getCurrentPosition(  
		        (position) => {
		          const pos = {
		            lat: position.coords.latitude,
		            lng: position.coords.longitude,
		          };
				  // 
		          infoWindow.setPosition(pos);
		          infoWindow.open(map);
		  	      map.setZoom(17);
		  		  map.setCenter(pos);

		        },
		        () => {
		          handleLocationError(true, infoWindow, map.getCenter());
		        }
		      );
		    } else {
		      // if Browser doesn't support Geolocation
		      handleLocationError(false, infoWindow, map.getCenter());
		    }
	}
    
    //지오로케이션과 같이 사용하는 에러처리 함수
    function handleLocationError(browserHasGeolocation, infoWindow, pos) {
	  infoWindow.setPosition(pos);
	  infoWindow.setContent(
	    browserHasGeolocation
	      ? "Error: The Geolocation service failed."
	      : "Error: Your browser doesn't support geolocation."
	  );
	  infoWindow.open(map);
	}
    
    // 새 마커 작성하기
	function addMarker(pos) {
		marker = new google.maps.Marker({
		    position: pos,
		    map: map,
		});
	}

initMap 바깥에 doGeolocation이라는 함수를 만들었다. 그리고 지도에서 위치 검색이라는 버튼도 만들었다. 이 버튼을 클릭하면 바깥에 doGeolocation 함수가 실행되고, 해당하는 위치에 말풍선(infoWindow) 이 뜨면서 좌표 값을 알려줄 것이다. 

(이전 글에서 구글의 샘플 코드는 지오로케이션 코드가 initMap() 안에 들어가 있었다. 그건 아마 샘플 코드가 짧아서 기능을 나눌 필요를 못 느껴서 인 것 같다.) 

 

이런 식으로 기능을 하나씩 늘리면서 바깥에 함수 추가, 안에는 콜백함수 작성이 중첩되어서 코드가 길어지게 된다. 참고로 지금 마커를 지우는 코드도 안 넣었기 때문에 마커가 끝없이 생성만 가능한 상태이다. 이것을 참고해서 흥미를 붙이고 구글 maps api에 도전하고 활용해보시길 추천드린다. 영어 번역기 같이 돌리면서 읽어가면서 차근차근 하나씩 튜토리얼을 해나가면 너무너무 재밌다 ㅎㅎ 

 

지오로케이션은 여기까지만!

 

 

 

 

- 스마트인재개발원 홈페이지 https://www.smhrd.or.kr/
- 스마트인재개발원 네이버블로그 https://blog.naver.com/jang0_0yw

스마트인재개발원 : 네이버 블로그

스마트인재개발원