다음을 사용하여 WordPress에서 여러 위치가 포함된 지도를 생성하시겠습니까? Elementor 필수 애드온?
도시에 이미 여러 지점이 있는 비즈니스가 있고 해당 지점의 위치를 표시하는 디지털 지도를 만들고 싶다고 가정합니다. WordPress 기반 웹 사이트가 있는 경우 이러한 지도를 쉽게 만들 수 있습니다. 다중 위치 지도를 만드는 데 사용할 수 있는 훌륭한 플러그인이 있습니다. 필수 애드온.
필수 애드온 추가 기능입니다 Elementor 프리미엄이므로 설치도 필요합니다 Elementor 사용하기 전에. 무료 버전의 Elementor를 사용하여 필수 애드온 모듈이 포함된 카드를 만들 수 있습니다.
La Essential Addons의 무료 버전 또한 사용할 수 있습니다. 단, 맵 생성 위젯은 유료 버전에서만 제공됩니다. Essential Addons의 유료 버전을 다운로드할 수 있습니다. 공식 웹 사이트.
Google Maps 플랫폼을 사용하여 Essential Addons를 사용하여 WordPress에 지도를 생성합니다. 시작하기 전에 Elementor 및 Essential Addons를 설치해야 합니다.
필수 애드온 모듈과 Google 지도 통합
필수 애드온으로 Google 지도 지도를 추가하려면 먼저 이를 통합해야 합니다. Google 지도를 Essential Addons 모듈과 통합하려면 API 키가 필요합니다.
먼저 다음을 방문하십시오. 구글 API 콘솔 Google 계정으로 로그인합니다. 상단의 드롭다운 메뉴를 클릭하여 새 프로젝트를 만들고 다음을 클릭합니다. 새 프로젝트.
새 프로젝트에 이름을 지정하고 버튼을 클릭합니다. CREATE .
새 프로젝트가 생성되면 드롭다운 메뉴에서 프로젝트를 선택하고 다음을 클릭합니다. 도서관 왼쪽 패널에서
Google은 Google Maps Platform API를 17가지 유형으로 나눕니다. 링크를 클릭하면 볼 수 있습니다. 모두 표시 섹션에서 장바구니. 수행하려는 작업에 따라 API를 활성화해야 합니다.
발견 : Elementor를 사용하여 WooCommerce에서 사용자 지정 단일 제품 템플릿을 만드는 방법
우리의 경우 필수 애드온을 사용하여 Google 지도에서 지도를 추가하려면 다음 API를 활성화해야 합니다.
- API 방향
- 지오코딩 API
- 지도 자바스크립트 API
- API 시트
API를 활성화하려면 활성화할 API를 선택(클릭)한 후 버튼을 클릭합니다. 활성화.
필요한 API 활성화를 완료하면 Google API 콘솔의 기본 대시보드로 돌아가서 식별자 왼쪽 패널에서 버튼을 클릭 자격 증명 만들기 선택하고 API 키. 나타나는 팝업에서 API 키를 복사합니다.
WordPress 대시보드에 로그인하고 클릭 필수 애드온 왼쪽 패널에서 탭을 클릭하십시오 요소 섹션에서 아래로 스크롤 고급 Google 지도. 클릭 설정 방금 복사한 API 키를 붙여넣습니다.
버튼을 클릭 설정 저장 새로운 변경 사항을 적용합니다.
지도 만들기 시작
Google 지도와 필수 애드온이 통합되면 지도 생성을 시작할 수 있습니다. 이렇게 하려면 새 페이지(페이지 – > 추가 ) 또는 새 항목(아이템 – > 추가) Elementor로 편집하십시오.
페이지를 만들기 전에 왼쪽 하단의 톱니바퀴 아이콘을 클릭하여 설정 패널을 열어 레이아웃을 설정합니다. 드롭다운 메뉴에서 레이아웃을 설정합니다.
편집 상자에서 더하기 버튼을 클릭하여 새 섹션을 만듭니다. 지도의 더 넓은 영역을 확보하려면 단일 열 구조를 선택할 수 있습니다. 위젯 드래그 EA 구글 지도 왼쪽 패널에서 편집 영역으로.
왼쪽 패널로 이동하여 카드 유형을 다중 마커.
섹션 열기 지도 마커 설정 기존 맵 마커를 클릭하여 편집합니다. 지도에 추가하려는 첫 번째 위치의 위도와 경도를 붙여넣습니다. 또한 제목과 설명을 설정하십시오.
위치의 위도와 경도를 얻으려면 Google 지도를 열고 위도와 경도를 얻으려는 위치(장소)를 검색합니다. 찾으면 상황에 맞는 메뉴에 나타나는 숫자를 마우스 오른쪽 버튼으로 클릭하고 왼쪽 클릭으로 클릭하십시오.
따라서 이 작업을 통해 위도(첫 번째 값)와 경도(두 번째 값)를 복사할 수 있습니다.
첫 번째 위치의 위도와 경도 추가가 완료되면 버튼을 클릭합니다. 요소 추가 지도에 다른 위치를 추가합니다.
Google 지도를 다시 열고 지도에 추가하려는 새 위치를 찾은 다음 경도와 경도를 복사하여 위와 같은 해당 필드에 붙여넣습니다. 지도에 더 많은 위치를 추가하려면 위 단계를 반복합니다.
읽기 : Elementor의 게시물 위젯을 사용하는 방법
위치 추가를 마치면 블록을 엽니다. 지도 컨트롤 카드에 제공하려는 명령을 활성화/비활성화합니다. 여기에서 확대/축소 수준을 설정할 수도 있습니다.
블록을 열 수도 있습니다. 맵 테마 사용하려는 Google 지도 테마를 선택합니다.
지금까지 여러 위치가 포함된 지도를 성공적으로 만들었습니다. 탭을 열 수 있습니다. 스타일 지도의 높이와 너비를 정의합니다.
전체 너비 지도를 사용하려면 지도가 포함된 섹션을 전체 너비로 설정하세요. 이렇게 하려면 섹션의 핸들을 클릭합니다.
탭 및 블록에서 레이아웃 콘텐츠 너비를 다음으로 설정 전체 넓이r 및 열 간격 편차 없음
버튼을 클릭 출판됨왼쪽 패널 하단의 ER을 눌러 페이지를 게시합니다.
페이지 또는 게시물에 지도 삽입
어떤 이유로 페이지/게시물(기본 WordPress — Gutenberg로 생성된 페이지/게시물) 편집기에 지도를 삽입하는 것을 선호하는 경우 다음을 사용할 수 있습니다. 워드 프레스 플러그인 구텐베르크용 엘리멘터 블록. 이 플러그인은 Elementor 템플릿을 Gutenberg 블록으로 변환합니다.
방금 만든 맵을 Elementor 템플릿으로 저장하려면 버튼 옆에 있는 화살표 아이콘을 클릭합니다. 게시/업데이트 선택하고 템플릿으로 저장.
모델 이름을 지정하고 버튼을 클릭하십시오. 등록자.
다음으로 새 페이지 또는 게시물을 만듭니다( Elementor 플러그인 구텐베르크를 위한 블록). 새 블록을 추가하고 선택 엘리멘터 라이브러리 방금 만든 템플릿을 선택합니다.
Remarque : 카드를 추가할 때 '개발 전용' 메시지가 표시되면 Google Cloud 결제를 사용 설정해야 합니다. 새로운 Google 정책에 따라 개발자는 결제 계정을 활성화해야 합니다(Google Maps API는 계속 무료로 사용할 수 있음).
지금 Elementor Pro를 받으세요!!!
결론
그래서 ! 여기까지가 Elementor를 사용하여 여러 위치의 지도를 만드는 방법을 보여주는 이 기사의 내용입니다. 거기에 가는 방법에 대해 우려 사항이 있는 경우 commentaires.
그러나 상담 할 수도 있습니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.
그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.
...
