Introduction

google map을 vue2에서 사용할 수 있게 해주는 라이브러리

• 지원 Component List: https://github.com/xkjyeah/vue-google-maps?tab=readme-ov-file#officially-supported-components 
  • 그외 gmap Component는 별도로 만들어서 사용해야 한다.
    예시) https://github.com/xkjyeah/vue-google-maps/blob/vue2/examples/overlay.html 
    참고: https://developers.google.com/maps/documentation/javascript/groundoverlays 
• Web Examples: https://xkjyeah.github.io/vue-google-maps/ 

GroundOverlay Custom Component 구조 설명

위에 https://github.com/xkjyeah/vue-google-maps/blob/vue2/examples/overlay.html  링크를 보면 조금 난해하다.

https://github.com/xkjyeah/vue-google-maps?tab=readme-ov-file#adding-your-own-components  여기에 다른 컴포넌트이긴 하지만 주석이 달려 있으니 이 2개를 참고하면 된다.

먼저 GroundOverlay 컴포넌트에 대해 살펴봐야 하는데 https://developers.google.com/maps/documentation/javascript/reference/image-overlay#GroundOverlay  를 봐보면, GroundOverlay는 (url, bounds [, opts])를 파라미터로 받는 것을 확인할 수 있다.

그래서 ctrArgs 항목이 아래와 같이 되는 것이다.

ctrArgs: (options, {source, bounds}) => [source, bounds, options],