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

Updated on 2020-05-30 by

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

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

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

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

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

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

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

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

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

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

  1. 구텐베르그 편집기에서 바로 사용 가능하도록 블럭 편집기 지원
  2. 여러 장소를 표시할 수 있는 다중마커(Multi marker) 지원
  3. 마커마다 별도 컬러 지정 등 다른 마커와 차이를 둘 수 있는 방법 존재
  4. 키워드만으로도 위치를 찾을 수 있는 사용 편리성(생각보다 이런 간단한 사용 편의성을 제공하지 않는 플러그인등이 존재)
  5. 장소 표시 플래그 표시

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

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

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

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

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

다중마커가 가능한 Otter 플러그인, Gutenberg Blocks and Template Library by Otter

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

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

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

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

  • 구텐베르그 블럭 지원
  • 다중마커(Multi marker) 기능 지원
  • 마커별 별도 컬러 지정 가능
  • 키워드 또는 주소 입력 또는 위/경도 입력으로 위치 검색 가능
  • 구글맵 표시 크기 설정
  • 구글맵 확대 축소 기능
  • 구글맵 스타일 선택

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

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

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

구텐베르그 편집기 지원 Gutenberg Blocks and Template Library by Otter 플러그인의 블럭들 모습
구텐베르그 편집기 지원 Gutenberg Blocks and Template Library by Otter 플러그인의 블럭들 모습
구텐베르그 편집기 지원 Gutenberg Blocks and Template Library by Otter 플러그인의 구글맵 마케 만들기
구텐베르그 편집기 지원 Gutenberg Blocks and Template Library by Otter 플러그인의 구글맵에서 위치 찾기

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

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

서울에 생긴 Vultr 서버 100$ 프로모션 안내

안녕하세요?
새로운 사이트 구축을 위한 신규 서버를 고민하신다면 , 서울 리젼이 생겨 더욱 빨라진 Vultr 서버를 Vultr 100$ 프로모션으로 이용해 보세요.

아래 프로모션 코드 링크를 통해 Vultr에서 서버 구축 후 1달 이상 사용 및 $25이상 결제 時 추가 100$을 주는 프로모션을 진행 中입니다.

아래 이미지를 클릭해 등록할 수 있습니다.

Vultr는 서울에도 리젼이 있어 매우 빠르고, 아마존 웹 서비스(AWS)보다 성능이 높으며 가장 가성비가 뛰어납니다.

거기다 사용자 UI도 좋고, 15개까지 스냅샷을 무료로 제공하기 때문에 관리하기 좋습니다. 그리고 지금 100$ 프로모션처럼 가격적인 메리트도 있습니다.

저는 2016년부터 Vultr 서버를 사용했는데요. 지금까지 잘 사용해 오고 있습니다. 아래 사용기도 참고해 보세요.

도쿄 리젼과 비교해 본 Vultr 서울 리젼 사용기

가성비가 뛰어난 Vultr 가상서버호스팅(클라우드호스팅,VPS) 사용기

Vultr 가상서버호스팅의 새상품 High Frequency 사용기

가상 서버를 운영하고픈 勇者에게 전하는 가상 서버 운영 입문 노하우 – Vultr 가상서버호스팅(VPS)를 중심으로

해외 가상서버호스팅(VPS)이 국내 호스팅보다 빠르다? – 아이비호스팅과 해외 가상서버호스팅 VULTR간 비교

사이트 운영을 위한 안내 – 웹서버 세팅에서 워드프레스 설치까지(우분투 17.10, NGINX 1.13.6, Marian DB 10.2, PHP7.2)

워드프레스 최적화를 위한 18개월간의 고민, 그 노하우를 담다.

20년간 FGCG 마케팅과 전자제품 상품기획 경험을 기반으로 다양한 분야의 마케팅 및 경영 사례 분석에 관심을 가지고 있습니다. 아울러 IT 등 트렌드 분석과 빠르게 변화하는 뉴스에서 얻을 수 있는 인사이트를 분석해 나누고 싶습니다. 개인적으로 사진에 관심에 많아 소소한 일상의 따뜻함을 담고 있습니다.

0 Comments
Inline Feedbacks
View all comments