안녕하세요. 린치핀소프트 한광희입니다.

 

이번에 소개하는 내용은 “구글맵 마커를 Font Awesome ICON”으로 지정하는 방법에 대해서입니다. 구글맵이나 마커를 지정하는 방법은 구글맵 API 가이드에 친절히 잘 설명되어 있습니다. 최근 구글맵을 활용한 웹앱을 제작하다가 마커에 대한 이슈가 발생하였습니다.

그래서 Fontawesome 과 같은 라이브러리에서 제공하는 폰트를 구글맵의 마커로 지정하는 방법을 찾다가 GitHub에 오픈되어 있는 프로젝트를 찾게되었습니다.

Github 저장소 : https://github.com/nathan-muir/fontawesome-markers 에서 프로젝트를 확인 할 수 있습니다.

 

이 라이브러리의 장점은 Font Awesome에서 제공하는 많은 폰트를 마커로 활용할 수 있으며, 색,크기,투명도,stroke를 쉽게 지정할 수 있다는 점입니다.

screenshot-2016-04-28 23-16-11 screenshot-2016-04-28 23-14-44 screenshot-2016-04-28 23-24-59

위의 화면은 위 “fontawesome-markers” 라이브러리를 활용하여 여러 폰트를 마커로 지정한 것을 캡춰하였습니다.

 

var marker = new google.maps.Marker({
  position: tempLng,
  icon : {
    path: fontawesome.markers.BUS,
    scale: 0.5, 
    strokeWeight: 0.1, 
    strokeColor: 'white',
    strokeOpacity: 1,
    fillColor: '#ED473D',
    fillOpacity: 0.88,
  }, 
  animation: google.maps.Animation.DROP
});

깃허브 프로젝트 저장소에 다운로드 받은 프로젝트에서 “fontawesome-markers.min.js” 파일을 페이지에서 로드합니다.

이후에 구글맵의 마커를 생성하는 부분에서 위처럼 “icon”항목에 path/scale/strokeWeight/fillColor 등을 지정하여 줍니다. 이때 path에 들어가는 항목이 FontAwesome에서 제공하는 폰트입니다.

 

마커의 특성에 따라 각기 상이하게 path를 지정해주면 마커별로 다른 폰트를 지정할 수도 있습니다.

 

간단하고 사용법이 쉬운 라이브러리로 FontAwesome의 폰트를 구글맵의 마커로 이용하고 싶은 분들께 좋은 라이브러리라고 생각이 듭니다.