JavaScript에서 마커 클러스터링 Google 지도

이 짧은 튜토리얼에서는 JavaScript로 Google Maps에 Marker Clustering을 구현하는 방법을 보여드리겠습니다.

Google Maps JavaScript SDK 추가

index.html에 다음 Google Maps API JavaScript SDK를 추가합니다.

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=[YOUR_API_KEY]"></script>

[YOUR_API_KEY]를 실제 Google Maps API 키로 바꾸십시오.

없는 경우 계속 진행하고 Create an API Key from Google Cloud Console .

Google 지도 개체 만들기

브라우저 창에서 전체 화면으로 Google 지도 보기를 만들어 봅시다.

map이라는 ID로 간단한 div HTML 요소를 만듭니다.

<div id="map"></div>

div 내부의 지도가 나중에 전체 화면으로 표시되도록 div를 전체 화면으로 만드는 CSS 규칙을 정의합니다.

html,
body {
    height: 100%;
    margin: 0;
}

#map {
    width: 100%;
    height: 100%;
    background: red;
    border: 5px solid red;
    box-sizing: border-box;
}

Learn a few ways to make a div full screen on the browser.

마지막으로 원하는 지리적 좌표로 지도 개체를 선언합니다.

이 경우 오타와를 사용했습니다.

const map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: {
        lat: 45.424721,
        lng: -75.695000
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

주변 검색 요청을 사용하여 장소 가져오기

이제 Nearby Search Request를 사용하여 지도에 마커를 가져옵니다.

다음은 Google Maps Places API의 일부인 주변 검색 요청 URL입니다.

const URL = "https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=45.424721,-75.695000&type=restaurant&radius=1000&key=[YOUR_API_KEY]";

fetch(URL)
.then(response => {
    return response.json();
}).then(response => {
    console.log(response.results)

}).catch(error => {
    console.log(error);
});

프런트엔드 앱에서 Places API에 HTTP 요청을 하면 이 보기 흉한 CORS 오류가 발생합니다.



CORS 오류를 제거하려면 기본 URL에 프록시 URL을 추가하십시오.

const URL = "https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=45.424721,-75.695000&type=restaurant&radius=1000&key=[YOUR_API_KEY]";

그러면 CORS 오류가 제거됩니다.

Learn more ways to fix CORS error.

때때로 프록시 URL 사용 제한으로 인해 403 금지 오류가 발생할 수 있습니다.

아래 URL로 이동하여 임시 액세스 권한을 요청하면 수정할 수 있습니다.

https://cors-anywhere.herokuapp.com/corsdemo

요청이 성공하면 처음 20개 장소에 대한 데이터를 받게 됩니다.

지도에 장소 마커 표시

이제 장소 데이터가 있으므로 마커를 사용하여 Google 지도에 표시해 보겠습니다.

응답 데이터를 반복하고 여기에서 위도 및 경도 값을 가져옵니다. 각 루프에서 마커 개체를 인스턴스화하여 위도 및 경도 값을 전달하고 매핑합니다.

response.results.forEach(place => {
    const lat = place.geometry.location.lat;
    const lng = place.geometry.location.lng;
    let marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lng),
        map: map
    });
})

Google 지도의 마커 클러스터링

마커에 클러스터링 기능을 추가하려면 index.html에 마커 클러스터링 JavaScript 라이브러리를 포함해야 합니다.

<script src="https://unpkg.com/@googlemaps/[email protected]/dist/index.min.js"></script>

마지막으로 markerClusterer 개체를 인스턴스화하고 표시해야 하는 위치에 지도와 마커를 전달합니다.

모든 마커를 배열에 누적하려면 fetch() 요청 외부에서 마커라는 배열을 정의하고 각 마커를 forEach 루프 내부의 마커 배열에 푸시합니다.

const markers = [];

fetch(URL)
.then(response => {
    return response.json();
}).then(response => {

    response.results.forEach(place => {
        const lat = place.geometry.location.lat;
        const lng = place.geometry.location.lng;
        let marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat, lng),
            map: map
        });
        markers.push(marker);
    });

    new markerClusterer.MarkerClusterer({
        map,
        markers
    });

}).catch(error => {
    console.log(error);
});

당신은 그것을 가지고 있습니다.

마커 클러스터링에 대한 질문이나 제안 사항이 있는 경우 아래에 댓글을 달아 주시면 최대한 빨리 연락드리겠습니다.

즐거운 코딩하세요!