(9) 구글 지도 API - 검색 인터페이스 구현

이전 포스팅에서는 특정장소의 정보를 DB에 저장하는 것을 알아보았습니다.

본 포스팅에서는 특정장소의 DB를 불러오는 방법에 대하여 알아봅시다.

이제 여기에서는 웹개발자의 개발방향이나 서비스의 목적이 큰 영향을 미치게 됩니다. DB에 저장된 데이터를 어떠한 식으로 가공하여 (또는 접근하여) 사용자에게 전달하느냐의 영역입니다. 그러나 비록 웹개발자의 취향이 반영된다고 하여도 위치기반 서비스에서 첫번째로 필요한 것은 사용자의 위치와 특정장소의 위치의 상관관계의 정의가 최우선이라고 생각합니다.

예를 들어 길찾기 어플을 이용할 때도 출발지와 목적지가 반드시 필요하듯이 위치기반 서비스도 관심있는 최초의 장소와 주변의 정보가 먼저 제공되어야 합니다. 키워드나 해시태그 검색은 그 이후의 문제라고 생각합니다.

그렇다면 플랫폼을 중심으로 한 사용자 관점에서의 위치기반 서비스의 접근로직은 다음과 같이 작성할 수 있겠습니다.

먼저 사용자는 관심있어 하는 특정장소를 검색합니다. 이 때 구글 지도 API에서는 주소 자동완성을 제공하므로 좀 더 편의성을 제공할 수 있습니다. 예를 들어 어떤 사용자는 서울역 주변의 세미나에 관심이 많습니다. 이 때 다양한 검색옵션을 고려할 수 있겠습니다만, 먼저 필요한 것은 물리적인 거리입니다.

즉, 검색지점으로부터의 거리가 바로 그것입니다.

예를 들어 검색지점으로부터 1km, 5km, 10km 거리에 존재하는 세미나 정보를 제공할 수 있습니다.

DB에는 세미나 장소의 위도와 경도 좌표가 등록되어 있으므로 검색한 지점의 위도 경도 좌표가 있으면 피타고라스 정리 개념을 통해 쉽게 거리를 구할 수 있습니다..

..만!

지구는 둥글고 지표상의 두 지점의 궤적은 곡선을 그리기 때문에 이를 위한 특별한 수학공식이 필요합니다.

바로 하버사인 공식(Harversine Fomula) 입니다.

이 공식을 스크립트로 작성하여 활용하면 두 지점간의 정확한 직선거리에 따른 세미나 정보를 사용자에게 제공할 수 있습니다. 하버사인 공식에 대한 내용은 따로 포스팅에서 다루도록 하겠습니다.

어쨋든 어떠한 조건에 맞는 세미나 정보가 DB에서 지정되면 이를 가져오기 위한 배열(Array) 저장 장소가 필요하며 배열은 구현하는 방법은 다양하지만 본 포스팅에서는 구글에서 권장하는 방법중에 하나인 xml 파일을 이용하도록 하겠습니다.

관련 예제는 아래 링크에 작성되어 있습니다.

https://developers.google.com/maps/documentation/javascript/mysql-to-maps

이를 정리하면 아래 그림과 같습니다.

이를 구현하기 위해 먼저 사용자의 요청을 처리하기 위한 main.jsp가 필요하며 검색조건에 따른 세미나 정보를 보여주기 위한 result.jsp의 두 가지 jsp가 필요합니다.

본 포스팅에서는 먼저 main.jsp에 대한 내용을 작성하도록 하겠습니다.

먼저 main.jsp의 스크립트 입니다.

주소 자동완성 스크립트가 포함되어 있으며 지도 div의 style을 제거하고 주소 검색창은 #pac-input의 div만 구현되어 있습니다. 이후 사용자가 검색한 특정 장소의 위도와 경도를 form 양식을 통해 search.jsp로 전달하도록 된 스크립트 구문입니다. 이 때 YOUR_API_KEY에는 본인이 발급받은 키를 입력하도록 합시다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
 
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<title> Place Search Service Page</title>

<style>

      #pac-input {
        background-color: #fff;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        margin-left: 12px;
        padding: 0 11px 0 13px;
        text-overflow: ellipsis;
        width: 400px;
      }

 </style>
 
 <%-- 구글 지도 위치찾기 스크립트 --%>	

	  <script>
      // This example requires the Places library. Include the libraries=places
      // parameter when you first load the API. For example:
      // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
	
		function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 37.553878, lng: 126.969610},
          zoom: 9
        });
		

        var input = document.getElementById('pac-input');

        var autocomplete = new google.maps.places.Autocomplete(input);

        // Bind the map's bounds (viewport) property to the autocomplete object,
        // so that the autocomplete requests use the current map bounds for the
        // bounds option in the request.
        autocomplete.bindTo('bounds', map);

        autocomplete.addListener('place_changed', function() {

          var place = autocomplete.getPlace();
          if (!place.geometry) {
            // User entered the name of a Place that was not suggested and
            // pressed the Enter key, or the Place Details request failed.
            window.alert("정확한 장소명칭이 아닙니다");
            return;
          }

          // If the place has a geometry, then present it on a map.
          if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);            
          } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17);  // Why 17? Because it looks good.
          }
		  // Googlemap get viewport
		  
		  document.getElementById('center_lat').value = map.getCenter().lat();
		  document.getElementById('center_lng').value = map.getCenter().lng();

        });

      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
        async defer>
    </script>

</head>
<body>
<div>
	<form id = "frm" name = "frm" action="search.jsp" method="post">
		
	<div id="pac-container"> 목적지        				
        <input id="pac-input" type="text" placeholder="Enter a location" name="destination_search" required>
      	<div>
                        
      	<div id="map">
      	</div> 
      					
	<input type="hidden" id="center_lat" name="center_lat" value = "" required> 
	<input type="hidden" id="center_lng" name="center_lng" value = "" required>
					
	<p>
	<input type="submit" name="submit" value ="검색하기"></input>
	</p>

	</div>
				
	</form>
</div>
</body>
</html>

이후 검색결과를 보여주는 search.jsp 에 대한 내용은 다음 포스팅에 작성하도록 하겠습니다.

2022.12.14 - [정보기술] - (10) 번외 - 검색지점 기준 반경거리 계산 (하버사인 공식)

(10) 번외 - 검색지점 기준 반경거리 계산 (하버사인 공식)

2022.12.14 - [정보기술] - (1) 구글 지도 API – 지도 만들기 2022.12.14 - [정보기술] - (2) 구글 지도 API - 단일 마커 표시하기 2022.12.14 - [정보기술] - (3) 구글 지도 API - 다중 마커 표시하기 2022.12.14 - [정보

iftraveler.tistory.com

'정보기술' 카테고리의 다른 글

(11) 구글 지도 API - 좌표 DB 불러오기 (xml 이용) (0)	2022.12.14
(10) 번외 - 검색지점 기준 반경거리 계산 (하버사인 공식) (0)	2022.12.14
(8) 구글 지도 API - 좌표 DB 등록하기 (0)	2022.12.14
(7) 구글 지도 API - 특정 주소의 좌표 확인하기 (0)	2022.12.14
(6) 번외 - 자동완성주소 검색에 관하여 (0)	2022.12.14

당신과 나의 어바웃 라이프

(9) 구글 지도 API - 검색 인터페이스 구현

'정보기술' 카테고리의 다른 글

댓글

티스토리툴바

(9) 구글 지도 API - 검색 인터페이스 구현

'정보기술' 카테고리의 다른 글

관련글

댓글

티스토리툴바