지도 위치 WordPress 플러그인으로 자세한 Google 지도 호스팅

게시 됨: 2023-03-30

WordPress 웹사이트에서 대화형 Google 지도를 호스팅할 수 있다는 사실을 알고 계셨나요?

iframe 코드를 HTML 블록에 복사하기만 하면 모든 페이지나 게시물에 Google 지도를 삽입할 수 있다는 것을 이미 알고 계실 것입니다. 그러면 지정한 지역의 지도가 표시됩니다. 그러나 HTML Embed 방법의 한계입니다.

Google 지도 위치를 WordPress 사이트의 다른 수준으로 가져오려면 이 기사에서 정확히 방법을 보여 줄 것이므로 계속 기다리십시오.

하지만 먼저 귀하의 사이트에서 Google 지도를 호스팅하기 위해 어떤 잠재적인 용도를 가질 수 있습니까?

예를 들어 핀으로 업체 위치를 표시할 수 있습니다. 또는 이벤트를 계획 중인 경우 방문자가 쉽게 미리 계획할 수 있도록 이벤트 페이지에 정확한 위치를 표시할 수 있습니다. 관광객에게 특정 도시에서 방문하기 좋은 최고의 박물관에 대해 알려주는 여행 웹사이트가 있다고 가정해 보겠습니다. 또는 하이킹 코스를 표시하고 사용자가 하이킹에 대한 메모를 입력하도록 허용할 수 있습니까?

Creative Minds의 Map Locations WordPress 플러그인으로 이 모든 작업을 수행할 수 있습니다. 시작하자!

지도 위치 플러그인으로 고유한 지도 만들기

지도 위치 플러그인을 사용하면 이미지, 동영상, 우편번호 경로, 검색 가능한 마커 등 위치에 대한 특정 정보와 함께 Google 지도에 여러 위치를 배치할 수 있습니다.

Google 지도 통합을 사용하면 여러 지도를 사용하여 매장 위치 시스템을 만들고 위치의 대화형 디렉토리를 만들 수 있습니다. 플러그인을 사용하면 각 위치에 고유한 아이콘을 표시할 수도 있습니다.

Cm Map Locations 플러그인 WordPress 페이지의 스크린샷

또한 플러그인은 다음을 지원합니다.

  • 위치 가져오기 및 내보내기
  • 우편번호로 위치 검색
  • 단축 코드를 사용하여 위치 포함
지도 위치 확인

지도 위치 WordPress 플러그인 시작하기

지도 위치 플러그인은 전체 설정 메뉴를 제공하며 WordPress 관리 대시보드에서 쉽게 액세스할 수 있는 사용자 가이드를 호스팅합니다. 맵을 구성하고 설정하는 몇 가지 중요한 단계가 있습니다. 첫 번째는 사이트에 플러그인을 설치하는 것입니다.

지도 위치 플러그인 설치

WordPress.org 페이지에서 지도 위치 플러그인을 찾아 다운로드할 수 있습니다. 또는 대시보드의 Plugins→Add New 에서 "cm 맵 위치"를 검색할 수 있습니다.

Creative Minds 웹사이트에서 플러그인의 프리미엄 버전 중 하나를 구입할 수도 있습니다.

설치 및 활성화되면 왼쪽 대시보드 메뉴에서 "CM 맵 위치"라는 새 메뉴 항목을 찾을 수 있습니다.

플러그인 구성의 첫 번째 단계는 Google Maps API 키를 입력하는 것입니다. 아직 없는 경우 지금 살펴보겠습니다.

Google 지도 API 키 받기

먼저 Google 계정이 필요합니다. 2018년 7월부터 Google 지도, 경로, 장소 데이터를 사용하려면 Google Cloud에 결제 정보가 있어야 합니다. 그러나 API 키를 만들 때 해당 정보를 추가할 수 있습니다.

CM Map Locations→Settings 아래에 API 키에 대한 필드와 이를 얻을 수 있는 링크가 있습니다(아직 없는 경우).

지도 위치 메뉴의 스크린샷

지도 위치 플러그인을 사용하려면 몇 가지 API 키가 필요합니다.

  • 자바스크립트 API
  • Geolocation API(일부 기능의 경우 HTTPS 필요)
  • 지오코딩 API
  • 장소 API

이 키를 얻으려면 Google Developers 페이지로 이동하세요.

프로젝트로 이동하거나 새 프로젝트를 만듭니다.

Google 개발자 프로젝트 메뉴의 스크린샷

그런 다음 API 및 서비스→라이브러리 로 이동합니다.

목록에서 하나의 API를 선택하거나 검색 창을 사용하여 앞서 언급한 API 중 하나를 찾습니다. API의 메뉴 팝업에서 파란색 활성화 버튼을 클릭합니다. 각 API에 대해 단계를 반복합니다.

모든 API를 사용하도록 설정했으면 키를 가져와야 합니다(하나만 필요함). 사이드바에서 나열된 API 키를 볼 수 있는 자격 증명을 선택합니다. API 키를 클립보드에 복사합니다. 잠시 후 웹사이트에 붙여넣습니다.

먼저 앞서 언급한 대로 Google Cloud에 대한 결제를 활성화해야 합니다. 이는 지도 위치 플러그인이 올바르게 작동하기 위한 중요한 단계입니다. 프로젝트에 로그인한 후 왼쪽 상단의 햄버거 메뉴를 클릭하고 결제를 선택합니다. 결제 계정을 연결 하라는 메시지가 표시됩니다. 해당 버튼을 클릭하고 지시를 따릅니다.

이제 Google API 키를 설정하고 가져오는 모든 단계를 완료했으므로 WordPress 사이트로 돌아갑니다. CM 지도 위치 설정 페이지에서 Google Maps API 키를 붙여넣고 하단의 저장을 클릭합니다. 원하는 경우 오른쪽에 있는 버튼을 사용하여 구성을 테스트할 수 있습니다.

위치 추가

지도 위치 플러그인은 방문자와 사용자 모두를 위한 색인 페이지를 생성합니다. 위치를 추가하면 해당 페이지에 위치가 나열됩니다. 위치를 추가하기 전에 지도에 대한 범주를 하나 이상 만드는 것이 좋습니다.

이는 새 게시물 카테고리를 추가하는 것만큼 간단하지만 지도 위치에만 적용됩니다. CM Map Locations→Categories 아래에서 원하는 만큼 카테고리를 생성합니다. 각 범주에 대한 기본 마커 아이콘을 추가할 수도 있습니다.

지도 위치 메뉴의 스크린샷

범주를 만든 후에는 위치를 추가할 수 있습니다. CM 맵 위치 메뉴를 사용하거나 관리 도구 모음에서 + 새로 만들기를 클릭하고 위치를 선택할 수 있습니다. 새 위치 페이지 편집기에서 원하는 위치와 관련된 위치 이름 및 설명 필드를 입력합니다.

목록에서 적절한 범주를 선택하고 마커 아이콘을 선택합니다. 원하는 경우 자신의 아이콘을 업로드할 수도 있습니다. 다음으로 위치에 대한 이미지나 비디오를 추가할 수 있습니다. 이는 여행 가이드 사이트에 유용할 수 있습니다.

그런 다음 페이지에 표시된 Google 지도까지 아래로 스크롤합니다. 위치를 검색하거나 필요에 따라 지도를 이동합니다. 위치가 보이면 그리기 도구 중 하나를 선택하고 지도에 위치 경계를 그립니다.

Google 지도에서 지도 위치를 생성하는 스크린샷

페이지를 더 아래로 스크롤하면 자동으로 채워진 위치에 대한 정확한 위도, 경도 및 주소 정보가 표시됩니다. 원하는 경우 다음을 추가할 수 있습니다.

  • 전화 번호
  • 웹사이트
  • 이메일 주소
  • URL

저장 버튼을 클릭하면 사이트에서 사용 가능한 위치 목록에 위치가 추가됩니다. 위치를 볼 때 방문자는 깔끔한 형식의 정보와 지도를 볼 수 있습니다.

표시된 산타바바라 지도의 스크린샷

인덱스 페이지 생성

색인 페이지의 목적은 다양한 위치를 나타내는 마커가 포함된 지도를 해당 위치의 사용자 정의 가능한 목록과 함께 표시하는 것입니다.

인덱스 페이지는 다음과 같이 각 위치에 대한 다른 정보를 표시하도록 구성할 수 있습니다.

  • 제목
  • 설명
  • 주소
  • 평가.

사용자는 지도 및 위치 목록과 상호 작용하여 특정 위치를 검색하거나 사용 가능한 모든 옵션을 탐색할 수 있습니다.

색인 페이지에는 우편번호 반경 필터와 같은 기능과 각 위치에 맞춤 URL 또는 방향을 추가하는 기능도 포함될 수 있습니다.

단축 코드를 사용하여 지도 표시

단축 코드는 사용자가 위치가 있는 지도와 같은 동적 기능을 게시물 및 페이지에 추가할 수 있는 WordPress 전용 바로 가기입니다.

위치의 스니펫 표시, 지도에 특정 위치 표시, 범주의 위치가 포함된 지도 표시, 현재 위치 지도 표시 등 다양한 목적을 위해 다양한 단축 코드가 존재합니다.

사용자는 매개변수를 추가하여 지도의 테마, 너비 및 높이를 선택하거나 표시되는 위치 수를 제한하는 등 이러한 단축 코드를 보다 구체적으로 만들 수 있습니다.

다음은 이해하기 쉽게 하기 위한 샘플과 함께 모든 단축 코드 및 해당 매개 변수의 목록입니다.

위치 단축 코드:

  1. 단편
    • 단축 코드: [cmloc-snippet]
    • 사용: 위치의 스니펫을 표시합니다.
    • 필터링 매개변수: id
    • 보기 매개변수: 추천
    • 샘플: [cmloc-snippet id=”487″ feature=”지도”]
  2. 특정 위치 지도
    • 단축 코드: [cmloc-위치-맵]
    • 사용: 지도에 특정 위치를 표시합니다.
    • 필터링 매개변수: id
    • 매개변수 보기: theme, mapheight, mapwidth, width, showtitle, showdate
    • 샘플: [cmloc-location-map id=1767 mapwidth=640 mapheight=480 width=700 showtitle=1 showdate=1]
  3. 여러 위치 지도
    • 단축 코드: [cmloc-locations-map]
    • 사용: 선택한 범주의 위치가 있는 지도를 표시합니다.
    • 필터링 매개변수: showonlybyparams, limit, page, category, taxonomy_key
    • 매개변수 보기: theme, list, mapwidth, width, menu, tooltip, map, usertracking, from_date, to_date
    • 매개변수 가져오기: bgcolor, bgcolor_filter, 시간, time_filter, 식별자, identifier_filter, from_date, to_date, 시간, 경로
    • 샘플 1: [cmloc-locations-map category=”산”]
    • 샘플 2: [cmloc-locations-map list=left limit=4 page=1 category=”111″]
  4. 현재 위치 지도
    • 단축 코드: [cmloc-current-locations-map]
    • 사용: 현재 위치 지도를 표시합니다.
    • 필터링 매개변수: 제한, 페이지
    • 보기 매개변수: 테마, 지도 너비, 너비, 툴팁
    • 샘플: [cmloc-current-locations-map]

단축 코드는 참조용 단축 코드 옵션에서 찾을 수 있습니다.

사용 가능한 단축 코드

CM 맵 위치 지식 기반의 도움말 문서에서 단축 코드를 설정하고 단축 코드를 사용하여 위치를 표시하는 방법에 대한 자세한 지침을 찾을 수 있습니다.

액세스 제어

맵을 대화식으로 만들려면 CM 맵 위치 메뉴에서 액세스 제어를 구성해야 합니다. 액세스에 사용할 수 있는 여러 옵션이 있습니다.

액세스 설정을 통해 관리자는 위치를 보고, 만들고, 업데이트할 수 있는 사람과 이미지를 업로드할 때 미디어 라이브러리를 사용할 수 있는 역할을 제어할 수 있습니다.

관리자는 모든 사람, 로그인한 사용자 또는 관리자, 편집자, 작성자, 기여자 또는 구독자와 같은 특정 사용자 역할과 같은 사전 설정 옵션 중에서 선택할 수 있습니다.

또는 사용자 지정 역할을 만들고 액세스가 허용된 사람들의 기능 이름을 나열할 수 있습니다.

위치 나열

이렇게 하면 위치 색인에 액세스하고 위치를 검색하거나 필터링할 수 있는 사람을 지정할 수 있습니다.

위치 보기

위치 페이지를 표시할 수 있는 사람을 결정합니다.

위치 생성

위치를 만들 수 있는 사람을 선택합니다.

자신의 위치 업데이트

위치를 업데이트할 수 있는 사람을 선택합니다.

미디어 라이브러리를 사용하도록 허용된 역할

구독자에게 upload_files 기능이 있는 경우 위치에 대한 이미지를 업로드할 때 WordPress 미디어 라이브러리 탭을 볼 수 있습니다. 사용자가 웹 사이트의 미디어 라이브러리를 검색하지 못하도록 하려면 특정 역할에 대한 액세스 권한을 취소해야 합니다.

각 범주에 대해 WordPress 코어에 포함된 기본 역할 또는 특정 역할을 지정하는 플러그인에서 제공하는 역할 중에서 선택할 수 있습니다.

추가 기능

지도 위치 플러그인 설정 및 사용에 대한 기본 사항을 다루었지만 더 많은 기능을 사용할 수 있습니다.

테마

사이트에서 위치를 돋보이게 하기 위해 선택할 수 있는 최대 6개의 테마가 있습니다.

타일/레이어

타일 ​​또는 레이어는 맵의 나머지 부분과 별도로 생성되고 표시되는 맵의 섹션입니다.

이러한 타일 또는 레이어는 일반적으로 사전 렌더링되고 서버에 캐시되는 정사각형 이미지이므로 사용자의 브라우저가 한 번에 전체 맵을 로드하지 않고도 맵에 빠르게 표시할 수 있습니다.

타일 ​​또는 레이어는 기본 지도 위에 추가 정보를 표시할 수 있도록 하여 지도의 시각적 표시를 향상시키는 데 사용됩니다. 여기에는 사용자가 지도를 탐색하고 표시되는 영역의 컨텍스트를 이해하는 데 도움이 되는 레이블, 마커 및 기타 데이터가 포함될 수 있습니다.

또한 타일 또는 레이어는 브라우저가 전체 맵을 한 번에 로드하는 대신 현재 보기에 있는 맵의 일부만 로드하도록 하여 맵의 성능을 향상시킬 수도 있습니다.

OpenStreetMap 또는 다른 서비스를 사용하여 교통 주기 표시와 같은 정보에 지도 위에 레이어를 추가할 수 있습니다.

지도의 타일 오버레이 예
지도의 타일 오버레이 예

설정은 지도 섹션 아래의 일반 탭에 있습니다.

  • 기본 지도 보기 – 기본 보기를 선택합니다. 사용자는 언제든지 이를 변경할 수 있습니다.
  • 타일 ​​URL 삽입 - 선택한 타일 서비스의 URL을 추가합니다. 더 많은 예제는 타일 확인 – OpenStreetMap Wiki
맵에서 타일 및 레이어 설정
맵에서 타일 및 레이어 설정

방문자가 지도를 탐색하는 동안 타일을 켜거나 끌 수 있습니다.

타일 ​​버튼을 선택하여 타일을 표시하거나 숨깁니다.
타일 ​​버튼을 선택하여 타일을 표시하거나 숨깁니다.

사용자가 타일을 업로드하도록 허용할 수도 있습니다.

사용자 위치 표시

사용자는 지리적 위치를 공유하고 지도에 표시할 수 있습니다.

REST/API 지원

REST API를 사용하여 다른 사이트 또는 모바일 앱에서 위치를 생성합니다.

디스플레이 템플릿

매장 찾기, 목록 또는 관심 지점을 쉽게 생성할 수 있도록 여러 디스플레이 템플릿을 사용할 수 있습니다.

반경으로 검색

모든 국가의 우편번호에서 정의된 반경을 검색할 수 있습니다.

Waze 및 Google 길찾기

새 위치를 만들면 Wave 및 Google 방향 링크가 목록에 자동으로 추가됩니다.

지도 위치 플러그인 가격

원하는 만큼 많은 WordPress 사이트에서 지도 위치 플러그인을 무료로 설치하고 사용할 수 있습니다. 여기에는 원하는 만큼 위치를 만들고, 설명과 이미지를 추가하고, 고유한 지도에 각 위치를 표시하는 데 필요한 모든 필수 요소가 포함되어 있습니다. 그러나 프리미엄 버전을 구매하면 더 많은 기능에 액세스할 수 있습니다.

필수(프로) 지도 위치 = $39/년

위에 나열된 기본 사항 외에도 디스플레이 템플릿, 가져오기/내보내기, 범주 지원, 날씨 정보, 액세스 제어 등을 하나의 웹 사이트에서 얻을 수 있습니다.

고급 지도 위치 + 경로 관리자 번들 = $69/년

이 계층은 Creative Minds의 Route Manager 플러그인을 추가하고 라이선스를 3개의 웹사이트로 확장합니다.

궁극의 지도 위치 + 지도 경로 + 5개의 애드온 = $119/년

Ultimate 계층은 최대 10개의 웹사이트에 대한 라이센스와 함께 몇 가지 추가 기능과 Map Routes 플러그인을 추가합니다.

각 계층은 1년 지원을 제공하고 30일 환불 보장을 제공합니다.

WordPress 사이트에 대화형 지도 표시

지도 위치 플러그인은 매장 위치 목록을 생성하고, 관광객을 도시로 안내하거나 사용자가 자신의 필요에 맞게 지도를 만들고 조정할 수 있는 기능을 제공합니다. 이것은 Creative Minds의 개발 팀이 제공하는 다양한 제품 중 하나의 플러그인입니다.

지도 위치 플러그인 사용해보기