[JavaScript] 네이버 Map API 커스텀 마커 구현하기

안녕하세요. 이번 게시글에서는 네이버 map api에서 커스텀 마커 구현하는 방법에 대해서 알려드리겠습니다.

우선 네이버 지도를 세팅하는 방법은 아래 게시글을 참고해주세요.

https://stickode.tistory.com/501

[Javascript] 네이버 지도 api를 사용해서 지도 표시 및 마커 찍기

우선 기본으로 제공되는 마커를 사용하는 방법도 있고 이미지로 마커를 나타내는 방법도 있지만 이번엔 HTML 콘텐츠를 마커 아이콘으로 사용할 수 있습니다. 

 

// 마커 생성 및 지도에 추가

var markerOptions = {

position: new window.naver.maps.LatLng(lat, lng),

map: this.map,

icon: {

content: [

`<div style="display: flex; flex-direction: column; align-items: center; width: 50px; height: 50px;">`,

` <div style="display: flex; justify-content: center; align-items: center; width: 50px; height: 50px;">`,

` <img src="../img/example/user" style="width: 50px; background-color: white; height: 50px; border-radius: 50%;"/>`,

` </div>`,

` <div style="text-align: center; background-color: white; border-radius: 10px; ">CustomMarker</div>`,

`</div>`

].join(''),

size: new naver.maps.Size(50, 50),

scaledSize: new naver.maps.Size(50, 50),

origin: new naver.maps.Point(0, 0)

}

};

 

var marker = new naver.maps.Marker(markerOptions);

위와 같이 HTML 컨텐츠를 markerOptions에 추가하면 됩니다.

사용하실땐 html img태그의 src 부분은 본인이 넣고 싶은 이미지 경로를 넣으시면 됩니다.

 

html 로 자유롭게 마커를 커스텀할 수 있다는 것이 해당 기능에 큰 장점인 것 같습니다. 본인의 프로젝트에 맞게 html 콘텐츠로 마커를 커스텀하시면 됩니다.

 

해당 코드를 적용한 예시입니다.