[javascript] 지도에 이미지 추가하기

22 Nov 2023

javascript

지도에 이미지를 추가하는 것은 웹 애플리케이션에서 많이 사용되는 기능 중 하나입니다. 이 기능을 구현하기 위해서는 JavaScript와 지도 API를 사용해야 합니다. 이번 포스트에서는 JavaScript와 Kakao 지도 API를 사용하여 지도에 이미지를 추가하는 방법에 대해 알아보겠습니다.

Kakao 지도 API 등록

먼저, Kakao 개발자 사이트에서 자신의 애플리케이션을 등록해야 합니다. 등록한 애플리케이션에서 발급받은 JavaScript 키를 사용하여 API를 호출할 수 있습니다.

HTML 파일 작성

다음으로, HTML 파일을 작성하여 Kakao 지도를 표시할 영역을 생성합니다. Kakao 지도 API 스크립트를 불러오는 script 태그와 지도를 표시할 div 요소를 추가합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>지도에 이미지 추가하기</title>
    <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=YOUR_APP_KEY"></script>
    <style>
        #map {
            width: 500px;
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
</body>
</html>

JavaScript 코드 작성

이제 JavaScript 코드를 작성하여 지도에 이미지를 추가할 수 있습니다. Kakao 지도 API에서 제공하는 Marker 클래스를 사용하여 마커를 생성하고, MarkerImage 클래스를 사용하여 이미지를 지정해줍니다. 마지막으로, 마커를 지도 위에 표시합니다.

var map = new kakao.maps.Map(document.getElementById('map'), {
    center: new kakao.maps.LatLng(37.5665, 126.9780),
    level: 13
});

var markerImage = new kakao.maps.MarkerImage(
    '이미지_URL',
    new kakao.maps.Size(50, 50)
);

var markerPosition = new kakao.maps.LatLng(37.5665, 126.9780);
var marker = new kakao.maps.Marker({
    position: markerPosition,
    image: markerImage
});

marker.setMap(map);

위 코드에서 이미지_URL 부분은 추가하고자 하는 이미지의 URL을 입력해야 합니다.

실행 결과 확인

이제 작성한 HTML 파일을 웹 브라우저로 열어 실행해보면, 지도 위에 이미지가 추가된 마커가 표시될 것입니다.

위와 같은 방법으로 JavaScript와 Kakao 지도 API를 사용하여 지도에 이미지를 추가할 수 있습니다. 사용자는 마커 이미지를 원하는 이미지로 변경하고, 마커의 위치를 원하는 위치로 설정할 수 있습니다. Kakao 지도 API의 다양한 기능과 메소드를 활용하여 지도에 다양한 컨텐츠를 추가해보세요.