[javascript] 지도에서 커스텀 로드 표시하기

22 Nov 2023

javascript

마크다운 포맷을 사용하여 JavaScript로 지도에서 커스텀 로드 표시하는 방법을 설명합니다.

요구 사항

지도 API를 사용하기 위해 Google Maps JavaScript API 키가 필요합니다.

지도 초기화

먼저, HTML 문서에 지도를 표시하기 위해 <div> 요소를 추가하세요. 이 요소에는 지도가 표시될 공간을 지정할 CSS 스타일을 추가해 주세요.

<div id="map" style="width: 600px; height: 400px;"></div>

그리고 JavaScript에서 아래와 같이 지도를 초기화합니다.

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 37.5665, lng: 126.9780 },
    zoom: 12
  });
}

위의 코드는 initMap 함수를 정의하고, google.maps.Map 생성자를 사용하여 지도 객체를 만듭니다. center 속성은 지도의 초기 중심 좌표를 나타내고, zoom 속성은 지도의 초기 확대/축소 수준을 나타냅니다.

커스텀 로드 만들기

커스텀 로드를 만들기 위해선, google.maps.Polyline 객체를 사용하여 지도상에 선을 그립니다. 아래와 같이 코드를 추가해 주세요.

function createCustomRoad(map) {
  const roadCoordinates = [
    { lat: 37.5575, lng: 126.9820 },
    { lat: 37.5705, lng: 126.9806 },
    { lat: 37.5745, lng: 126.9792 },
    // 추가로 좌표를 입력해 주세요...
  ];

  const road = new google.maps.Polyline({
    path: roadCoordinates,
    geodesic: true,
    strokeColor: "#ff0000",
    strokeOpacity: 0.8,
    strokeWeight: 3
  });

  road.setMap(map);
}

위의 코드에서 roadCoordinates 배열은 로드를 구성하는 점들의 좌표를 포함하고 있습니다. google.maps.Polyline 생성자를 사용하여 로드 객체를 만들고, path 속성을 통해 점들의 좌표를 설정합니다. geodesic 속성은 선이 지구 곡면을 따라 그려지도록 설정하며, strokeColor, strokeOpacity, strokeWeight 속성은 로드의 색상, 투명도, 굵기를 설정합니다.

지도에 로드 표시하기

마지막으로, initMap 함수에서 createCustomRoad 함수를 호출하여 지도상에 커스텀 로드를 표시합니다.

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 37.5665, lng: 126.9780 },
    zoom: 12
  });

  createCustomRoad(map);
}

이제 페이지를 열면, 지도에 지정된 좌표들을 따라 커스텀 로드가 표시됩니다.

위 코드를 사용하여 JavaScript를 사용하여 지도에서 커스텀 로드를 표시하는 방법을 알아보았습니다. 자세한 내용은 구글 맵스 JavaScript API 문서를 참조하세요.

목차

요구 사항

지도 초기화

커스텀 로드 만들기

지도에 로드 표시하기