Colin's Blog
- 자바스크립트 Turbolinks를 이용한 웹 사이트의 지도 검색 기능 구현하기

지도 검색 기능은 웹 사이트에서 많이 사용되는 기능 중 하나입니다. 사용자가 특정 장소나 주소를 검색하고 해당 위치를 지도상에서 확인할 수 있습니다. 이번 글에서는 자바스크립트 Turbolinks를 이용하여 웹 사이트에 지도 검색 기능을 구현하는 방법을 알아보겠습니다.

Turbolinks란?

Turbolinks는 웹 애플리케이션의 페이지 이동을 더 빠르게 처리하는 자바스크립트 라이브러리입니다. 기존의 전체 페이지를 새로 고치는 방식이 아니라, 필요한 부분만을 업데이트하여 페이지 이동을 처리합니다. 이를 통해 사용자 경험을 향상시키고 웹 사이트의 응답 속도를 높일 수 있습니다.

지도 검색 기능 구현하기

  1. 지도 API 키 발급하기: 먼저, 웹 사이트에서 사용할 지도 API 키를 발급받아야 합니다. 대표적인 지도 API 서비스로는 Google Maps API, Kakao Maps API 등이 있습니다. 해당 서비스의 개발자 등록 과정을 거쳐 API 키를 발급받으세요.

  2. HTML 구조 작성하기: 검색 입력란과 지도를 표시할 영역을 담는 div 요소를 HTML에 추가합니다. 예를 들어, 다음과 같이 작성할 수 있습니다.

    <div id="map"></div>
<input type="text" id="search-input" placeholder="장소 또는 주소를 입력하세요">

  3. 자바스크립트 코드 작성하기: Turbolinks를 이용하여 페이지 이동을 처리할 자바스크립트 코드를 작성합니다. 먼저, Turbolinks와 지도 API 스크립트를 로드하는 코드를 작성합니다.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.2.0/turbolinks.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

  4. 지도 초기화하기: 페이지가 로드된 후에 실행될 초기화 함수를 작성합니다. 해당 함수에서는 검색 입력란에 입력된 값을 기반으로 지도를 초기화하고 해당 위치를 표시합니다.

    function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {lat: YOUR_LATITUDE, lng: YOUR_LONGITUDE}
  });
   
  var searchInput = document.getElementById('search-input');
  var searchBox = new google.maps.places.SearchBox(searchInput);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(searchInput);
   
  map.addListener('bounds_changed', function() {
    searchBox.setBounds(map.getBounds());
  });
   
  var markers = [];
   
  searchBox.addListener('places_changed', function() {
    var places = searchBox.getPlaces();
   
    if (places.length === 0) {
      return;
    }
   
    markers.forEach(function(marker) {
      marker.setMap(null);
    });
    markers = [];
   
    var bounds = new google.maps.LatLngBounds();
   
    places.forEach(function(place) {
      if (!place.geometry) {
        console.log("Returned place contains no geometry");
        return;
      }
   
      markers.push(new google.maps.Marker({
        map: map,
        title: place.name,
        position: place.geometry.location
      }));
   
      if (place.geometry.viewport) {
        bounds.union(place.geometry.viewport);
      } else {
        bounds.extend(place.geometry.location);
      }
    });
   
    map.fitBounds(bounds);
  });
}

  5. 이벤트 리스너 등록하기: 페이지가 로드될 때 initMap 함수를 호출하도록 이벤트 리스너를 등록합니다.

    document.addEventListener('turbolinks:load', function() {
  initMap();
});

위의 과정을 통해 자바스크립트 Turbolinks를 이용한 웹 사이트의 지도 검색 기능을 구현할 수 있습니다. 사용자가 검색 입력란에 장소 또는 주소를 입력하면 해당 위치가 지도 상에 표시됩니다. Turbolinks를 이용하여 페이지 이동 속도를 높이면서 웹 사이트의 사용성을 개선할 수 있습니다.

참고 자료:

© 2018 Colin. All rights reserved.