개발/Third-party

[자바스크립트/Javascript] 구글맵(Google Map) API에서 커스텀 마커(Custom Marker) 구현하는 방법 (Add Custom Markers with the Google Maps JavaScript API)

우리는 웹 개발을 하다 보면 구글맵, 구글지도(Google Map)을 다루는 경우가 종종 있습니다. 그때마다 구글맵에 우리가 원하는 위치를 표현하기 위해서 마커를 사용하곤 하죠. 기본적인 마커 구현으로 끝나는 경우도 있지만 구현하는 서비스 특색에 맞게 커스텀 마커를 적용해야 되는 경우가 있습니다. 하지만 구글맵에서 제공하고 있는 API의 마커(Marker)를 활용해서 우리의 서비스에 맞는 커스텀 마커를 구현하기에는 굉장히 어려움이 많습니다. (커스터마이징 하기 너무 까다롭습니다.) 이번 포스팅에서는 Google Map API에서 제공하는 OverlayView 클래스를 활용해서 커스텀 마커(Custom Marker)를 구현해보도록 하겠습니다. 들어가기 전에 저는 이번 포스팅에서 Vue 개발환경에서 구글맵 ..