구글맵 활용법 - 여러 장소 표시하는 다중마커(Multi marker) 사용

구글맵 활용법 두번째로 구글맵(구글 지도)위에 여러 장소를 표시하는 구글맵 다중마커(Multi marker) 구현 방법에 대해서 알아봅니다.

이전에 소개한 “구글맵 API key 발급방법“에 대한 내용은 아래 포스팅을 참조하세요.

구글맵 활용법 – 구글맵 API key 발급 방법

워드프레스에서 구글맵을 활용하는 다양한 플러그인들이 존재합니다. 훌륭한 기능과 디자인을 가진 유료 플러그인에서부터 간단하면서도 활용도가 높은 플러그인들도 있죠.

저도 여러가지 구글맵 플러그인을 사용해 테스트트 했지만 항상 만족스럽지 않았습니다.

구글맵 플러그인은 API를 불러오고, 조금 더 다양한 기능을 제공하기 때문에 느립니다. 어느 플러그인은 최소 2초이상 지연되기도 했습니다.
전문 구글맵 플러그인들은 기능이 많아서 간단히 사용하기는 너무 번거롭고 쉽지는 않았습니다.
대부분 구글맵 플러그인은 별도 플러그인 UI에서 지도를 만들고 이를 숏코드로 가져오는 방식을 사용합니다. 익숙해지면 나쁘지는 않지만 번거롭고 불편한 방식입니다.

Table of contents 목차 보이기

최소한 구글맵 플러그인 조건

솔직히 블러그에서는 구글맵을 활용하는 방법은 몇가지 없다고 생각해요. 뭐 아주 창의적인 방법으로 사용한다면 이는 다른 차원이 이야기기이고…

여행기나 특정지역을 소개하거나 등등 활용도가 높은 몇가지 기능으로 한정한다면 가벼우면서도, 사용하기 편한 방법은 많이 있다는 생각입니다.

제 경험으로 블로깅 시 사용하기에 괜찮은 솔류션은 다음과 같은 조건을 충족할 수 있다면 좋을 것 같습니다.

생각나는대로 적다보니 요구사항이 많아졌네요. 그렇지만 이정도는 되어야 편하게 구글맵을 사용할 수 있을 것 같습니다.

다른 좋은 플러그인도 많지만 저는 앞으로 워드프레스에서 구텐베르그 편집기가 다른 유명 페이지 빌더이상으로 발전할 것으로 생각합니다.

구텐베르그 편집기가 블럭이란 개념을 도입하면서 어쩌면 불편해 지기도 했지만 일반 편집기의 한계를 뛰어넘는 새로운 솔류션을 제공할 가능성을 높여 주었다고 보고 있습니다.

구텐베르그 편집기 도입한지 1.5년정도 흘렀는데 점점 괜찮은 플러그인들을 발견할 수 있습니다.

이런 플러그인들은 구텐비르스 편집기에서 바로 사용할 수 있고, 그러다보니 구동 속도도 빠릅니다.

위에서 몇가지 조건을 달았지만 이러한 조건을 어느 정도 충족하는 플러그인이 있더군요. 바로 Gutenberg Blocks and Template Library by Otter라는 플러그인입니다.

이 플러그인에서 제공하는 여러 블럭중에서 구글맵 블럭은 당연히 구텐베르그 블럭으로 프로그램되었기 때문에 구텐베르르 편집기 내에서 편집 가능합니다.

또한 여러 장소를 표시할 수 있는 다중마커(Multi marker) 기능을 지원합니다. 또한 각 마커마다 별도 컬러 지정이 가능합니다.

다만 마커마다 위치 표시 플래그는 안되고 마우스 커서를 위에 놓으면 위치 정보가 나타나도록 되어 있습니다.

예를 들어 아래와 같이 일산호수공원과 월드컵공원 그리고 서울숲공원을 표시해보죠.

일산호수공원은 빨간색 마크, 월드컵공원은 파란색 그리고 서울숲공원은 노란색 마크로 표시해보죠. 아래처럼 표시 됩니다.

이 플러그인 사용법은 일반 구텐베르그 블럭 사용법고 같고 구글맵 마커 세팅등도 별다른 어려움은 없기에 따로 디테일한 설명은 생략합니다.

여기 소개하는 Gutenberg Blocks and Template Library by Otter 플러그인에는 또 다른 플러그인들이 무엇이 있는지 보려면 아래 동영상을 참고해 보세요.

저는 이 풀러그엔서 제공하는 여러 기능 중 이 구글맵 블럭이 가장 마음에 들고 이 기능을 사용을 위해 이 플러그인을 사용하고 있도고 해도 과언이 아닐정도 활발하게 사용하고 있습니다.

1️⃣ 주식 등 투자 정보 : 기업 분석, IB 투자의견 등 투자 관련 내용
..... 테슬라 실적 및 IB들의의 테슬라 투자의견
2️⃣ 사례 및 트렌드 : 사례연구와 트렌드 관련 괜찮은 내용
.....유튜브와 경쟁대신 구독 전환한 비디오 플래폼 비메오 사례