[javascript] 자바스크립트를 활용하여 Mapbox지도에서 자동 완성 검색 기능 구현하기

22 Nov 2023

javascript

지도 서비스를 개발할 때 사용되는 자동 완성 검색 기능은 많은 사용자들에게 편의성을 제공합니다. 이번 포스트에서는 자바스크립트를 활용하여 Mapbox 지도에서 자동 완성 검색 기능을 구현하는 방법을 알아보겠습니다.

Mapbox 자동 완성 검색 기능 구현하기

Mapbox는 지도 및 위치 기능을 제공하는 도구로, 자동 완성 검색 기능도 포함되어 있습니다. 자동 완성 검색 기능을 사용하기 위해 Mapbox GL Geocoder 라이브러리를 활용할 수 있습니다.

1. Mapbox 계정 생성 및 액세스 토큰 발급

먼저, Mapbox 계정을 생성하고 액세스 토큰을 발급받아야 합니다. Mapbox 홈페이지에 접속하여 회원 가입 후 액세스 토큰을 발급받으세요.

2. HTML 파일에 Mapbox 지도 추가하기

다음으로, HTML 파일에 Mapbox 지도를 추가해야 합니다. <body> 태그 안에 <div id="map"></div>를 추가하고, <script> 태그를 이용하여 Mapbox를 초기화해주세요.

<!DOCTYPE html>
<html>
<head>
    <title>Mapbox 자동 완성 검색</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet" />
</head>
<body>
    <div id="map"></div>

    <script>
        mapboxgl.accessToken = 'YOUR_ACCESS_TOKEN';

        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [longitude, latitude],
            zoom: 12
        });
    </script>
</body>
</html>

여기서 YOUR_ACCESS_TOKEN은 앞서 발급받은 액세스 토큰으로 대체해야 합니다. 또한, longitude와 latitude는 원하는 지도의 중심 좌표로 설정해야 합니다.

3. Mapbox GL Geocoder 추가하기

자동 완성 검색 기능을 구현하기 위해 Mapbox GL Geocoder 라이브러리를 추가해야 합니다. <script> 태그를 이용하여 라이브러리를 가져온 후, map.addControl() 메소드를 이용하여 Geocoder를 지도에 추가합니다.

<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.0/mapbox-gl-geocoder.css' type='text/css' />

<script>
    map.addControl(
        new MapboxGeocoder({
            accessToken: mapboxgl.accessToken,
            mapboxgl: mapboxgl
        })
    );
</script>

4. 완성!

위의 코드를 HTML 파일에 추가하고 브라우저에서 확인하면, Mapbox 지도에 자동 완성 검색 기능이 구현된 것을 확인할 수 있습니다. 사용자는 검색 창에 원하는 장소명을 입력하면 관련된 결과가 자동 완성되어 보여집니다.

마무리

이렇게 자바스크립트를 활용하여 Mapbox 지도에서 자동 완성 검색 기능을 구현하는 방법을 알아보았습니다. 이를 활용하여 지도 서비스에 더 많은 편의성을 제공할 수 있을 것입니다. Mapbox의 다양한 기능과 라이브러리를 활용하여 원하는 지도 서비스를 개발해보세요!

참고: