WordPress에서 여러 핀으로 Google지도를 만드는 방법

웹 사이트에지도를 추가하면 방문자가 비즈니스 또는 이벤트 위치를 쉽게 찾을 수 있습니다. 귀하의 비즈니스에 둘 이상의 위치가 있으면 동일한지도에 모든 위치를 보여줄 수 있습니다. Google지도에서 여러 핀을 사용하는 것이 도움이 될 수있는 곳입니다.

귀하의 웹 사이트가 Elementor와 함께 구축 된 경우 Google지도에서 여러 핀을 추가하는 데 많은 번거 로움을 느끼지 않아도됩니다. 대신 원하는만큼 쉽게 추가 할 수 있습니다. 이 과정은 초보자에게도 매우 간단합니다.

이 게시물에서는 WordPress에서 Elementor와 함께 여러 핀으로 Google지도를 만드는 방법에 대한 자세한 자습서를 다룹니다. 그러나 그 전에는 WordPress 웹 사이트에 여러 핀이있는 Google지도를 이유와시기에 대해 몇 단어를 다룰 것입니다.

WordPress 사이트에 여러 핀이있는 Google지도를 사용하는 이유

여러 핀이있는 Google지도를 사용하면 여러 가지 방법으로 웹 사이트가 향상 될 수 있습니다. 위치를 보여주는 것이 아닙니다. 사용자가 신뢰를 구축하고 상점을 쉽게 찾을 수 있기 때문에 사이트를 더 유용하게 만드는 데 도움이 될 수 있습니다. 다음은 고려해야 할 몇 가지 주요 이유가 있습니다.

1. 한 곳에 모든 위치를 보여줍니다

비즈니스에 여러 지점, 상점 또는 사무실이있는 경우 여러 핀이 단일지도에 표시하는 데 도움이 될 수 있습니다. 이를 통해 방문자는 다른 맵이나 페이지를 전환하지 않고도 모든 위치를 한눈에 볼 수 있습니다.

2. 사용자가 가장 가까운 지점을 찾도록 도와줍니다

사용자가 하나의지도에서 모든 위치를 볼 때 가장 가까운 위치를 빠르게 찾을 수 있습니다. 이를 통해 상점을 방문하거나 약속 예약과 같은 경험을 향상시키고 더 빨리 행동 할 수 있습니다.

3. 방문자를위한 시간을 절약하십시오

각 주소를 일반 텍스트로 하나씩 나열하는 대신 핀으로 시각적으로 표시 할 수 있습니다. 이것은 당신과 당신의 방문객 모두에게 시간을 절약합니다. 또한 사이트를보다 전문적이고 현대적으로 보이게 만듭니다.

4. 위치 데이터로 로컬 SEO를 향상시킵니다

Google지도는 웹 사이트의 로컬 SEO를 도울 수 있습니다. 지도에 실제 주소를 추가하면 검색 엔진에 비즈니스 위치에 대해 알려줍니다. 이는 사이트가 로컬 검색 결과에 나타나는 데 도움이 될 수 있습니다. Happyaddons와 함께 지역 SEO를 개선하는 방법을 살펴보십시오.

5. 사이트를보다 대화식으로 만들 수 있습니다

여러 핀이있는 맵은 평범한 텍스트보다 대화식이고 역동적으로 보입니다. 방문객들은 확대하고 핀을 클릭하고지도를 탐색 할 수 있습니다. 이를 통해 사이트를보다 매력적이고 사용자 친화적으로 만듭니다.

6. 서비스 기반 또는 멀티 브랜치 비즈니스에 적합합니다

레스토랑, 클리닉, 상점 또는 배달 지점을 운영하는 경우 여러 핀이 도달 범위를 명확하게 설명하는 데 도움이됩니다. 위에서 이미 말했듯이, 이것은 신뢰를 구축하고 사용자가 가장 가까운 지점을 선택할 수 있도록 도와줍니다.

요소가있는 여러 핀으로 Google지도를 만드는 전제 조건

처음에 한 가지를 명확하게하자. Elementor 에는 Google지도 라는 내장 된 위젯이 있습니다. 그러나 그 기능은 매우 제한적입니다. 이 기본 위젯을 사용하여지도에 여러 핀을 추가 할 수 없습니다. 따라서 그렇게하려면 추가 부가가동이 필요합니다.

좋은 옵션 중 하나는 HappyAddons 입니다. Advanced Google지도 라는 위젯을 제공하므로 번거 로움없이지도에 여러 핀을 쉽게 만들고 추가 할 수 있습니다.

따라서 전체적으로이 튜토리얼을 위해 사이트에 다음 도구가 필요합니다.

• 요소
• Happyaddons
• Happyaddons Pro

Advanced Google지도는 플러그인의 프리미엄 위젯이므로 HappyAddons Pro가 필요합니다. 사이트에 설치 및 활성화되면 아래에 언급 된대로 자습서를 시작하십시오. Happyaddons의 다른 모든 위젯을 탐색하십시오.

WordPress에서 여러 핀으로 Google지도를 만드는 방법 : 단계별 자습서

이 섹션에서는 Elementor 및 Happyaddons 플러그인을 사용하여 WordPress에서 여러 핀으로 Google지도를 만드는 방법을 단계별로 설명합니다. 필요한 스크린 샷으로 도이 섹션을 장식하므로 전체 프로세스를 이해할 수 있습니다. 계속 읽으십시오!

01 단계 : 페이지를 열고 고급 Google지도 위젯을 찾으십시오.

여러 핀으로 Google 맵을 작성하려는 게시물이나 페이지를 엽니 다. Elementor 패널에서 Advance Google지도 위젯을 찾으십시오. 요소 캔버스에 드래그 앤 드롭 .

02 단계 : Google API 키를 얻습니다

위젯이 캔버스에 추가되면 Google 맵을 표시하기위한 자격 증명을 구성하라는 메시지가 표시됩니다. 이를 시작하려면 패널의 일반 설정 섹션에서 자격 증명 옵션을 클릭하십시오 .

웹 사이트의 백엔드에서 Happyaddons의 자격 증명 섹션으로 이동합니다. Google지도 옵션을 찾으십시오. 그런 다음 Get API 키 옵션을 누르십시오 .

Google 클라우드 페이지로 올 것입니다.

이제 'Maps JavaScript API'를 찾아야합니다. 이를 위해 검색 상자에 JavaScript API를 맵핑 하십시오. 옵션이 나타나면 클릭하십시오 .

Maps JavaScript API 페이지에 오면 옵션을 활성화하십시오 .

동의 및 계속 버튼을 누릅니다 . 그 전에는 국가를 선택할 수 있습니다. 우리는 우리의 사건을 위해 그것을 흐리게했습니다.

Google API 키는 기술적으로 무료가 아닙니다. API를 얻으려면 청구 정보를 완료해야합니다.

참고 (무료 방법) : 기술적으로 무료는 아니지만 한 달에 200 달러 에 해당하는 토큰을받을 수 있습니다. 이 토큰을 사용하면 Google지도를 최대 28,000 회 까지로드하거나 볼 수 있습니다. 이 뷰/로드 한계가 교차 된 경우에만 카드가 충전됩니다.

그 후에는 팝업이 제공됩니다. 이지도가 사용될 비즈니스에 대한 정보를 제공해야합니다. 완료되면 팝업의 오른쪽 하단에있는 제출 버튼을 클릭하십시오 .

Google Map API 키가 새로운 팝업으로 화면에 즉시 나타납니다. API 키를 복사하십시오 .

HappyAddons Google API 키 옵션으로 돌아가서 코드를 붙여 넣으십시오 . 결국 저장 변경 버튼을 누르십시오 .

이제 Elementor Canvas에 와서 새로 고침/다시로드하십시오. Google지도는 캔버스에 나타납니다.

요소와 함께 WordPress에서 타임 라인을 만드는 방법을 확인하십시오.

3 단계 :지도에 여러 핀을 추가합니다

기본적으로 맵에는 하나의 핀 만 표시됩니다. 지도에 더 많은 핀을 추가하고 표시하려면 패널의 맵 마커 섹션을 확장하십시오.

맵 마커 섹션이 확장되면 + 항목 추가 버튼을 클릭 하여 원하는만큼 핀을 추가 할 수 있습니다.

이제 위도와 경도에 대한 값을 배치함으로써 각 장소마다 정확하게 핀을 정확하게 설정할 수 있습니다.

단계 04 : 맵 설정을 구성합니다

같은 방식으로 맵 설정 섹션을 확장하십시오 .

이 섹션에서 많은 옵션이 있습니다.

이제, 당신은 그들이 어떻게 작동하는지 확인하여 설계 요구에 맞는 것과 마침내 머무를 수 있도록 각 옵션을 켜고 끄면서 친절하게 탐색합니다.

WordPress에서 자동 스크롤링 이미지 갤러리를 만드는 방법을 알아보십시오.

단계 05 : 고급 Google지도 위젯의 양식화

모든 설정과 컨텐츠 부분이 완료되면 스타일 탭 으로 오십시오. 여기에서 높이, 너비, 테두리 유형, 테두리 반경 및 더 많은 옵션을 사용자 정의 할 수 있습니다.

같은 방식으로 다른 옵션도 확장하고 핀의 모양을 변경하려는 경우 필요한 사용자 정의를 수행하십시오.

단계 06 : 디자인을 미리 봅니다

디자인이 완료되면 온라인으로 게시하기 전에 수정 또는 수정이 필요한지 확인하십시오. 아래에 첨부 된 비디오 클립에서 위젯이 우리의 끝에서 잘 작동한다는 것을 알 수 있습니다.

따라서 요소와 함께 WordPress에 여러 핀이있는 Google지도를 만들 수 있습니다.

여러 핀이있는 Google지도를위한 고급 팁

Google지도에 여러 핀을 추가하면 방문자와 웹 사이트를 위해지도를 더 잘 작동시키기 위해 할 수있는 일이 더 있습니다. 이 고급 팁은지도를보다 전문적으로 보이게하고 사용자 경험을 향상 시키며 지역 SEO 노력을 지원하는 데 도움이됩니다.

1. 아이콘 대신 사용자 정의 이미지를 사용하십시오

기본 레드 핀 대신 각 위치에 맞춤 아이콘이나 이미지를 사용해보십시오. HappyAddons를 사용하면 컨텐츠 탭> 맵 마커 섹션에서이를 수행 할 수 있습니다. 사용자 정의 이미지와 아이콘은지도를 더 시각적으로 명확하고 매력적으로 만들 수 있습니다.

2. 줌 및 중앙 설정

맵의 줌 레벨과 중앙을 조정하여 모든 핀을 올바르게 표시합니다. 일부 핀이 멀리 떨어져 있으면 맵이로드 될 때 줌 레벨이 충분히 넓어 지도록하십시오. 이렇게하면 맵을 수동으로 이동할 필요없이 사용자에게 전체 개요를 제공합니다.

3. 모바일 친화적으로 만드십시오

모바일 장치에서지도가 어떻게 보이는지 항상 확인하십시오. 빠르게로드하고 핀을 클릭 할 수 있으며 작은 화면에서 정보 상자를 읽을 수 있습니다. 데스크탑과 모바일에서 잘 작동하는지도는 더 많은 사용자를 행복하게합니다.

4. 연락처 또는 위치 페이지에지도를 포함시킵니다

한 페이지에지도를 남겨 두지 마십시오. '연락처', '위치'또는 '방문'페이지와 같은 다른 페이지에 동일한 맵을 포함시켜 동일한 맵을 재사용 할 수 있습니다. 이를 통해 사용자는 귀하의 사이트에있는 곳 어디에서나 올바른 장소를 찾는 데 도움이됩니다.

요소와 함께 WordPress에서 동적 웹 페이지를 만드는 방법을 알아보십시오.

결론

여러 핀으로 Google지도를 만드는 것은 웹 디자인에서 간단한 단계 나 일부일 수 있지만 오래 지속되는 인상을 줄 수 있습니다. 방문자가 위치를 찾는 데 도움이 될뿐만 아니라 로컬 SEO 점수를 높이고 웹 사이트를보다 전문적으로 보이게 할 수 있습니다.

Elementor 및 Happyaddons 플러그인의 도움으로 번거 로움없이 웹 사이트에 쉽게 추가 할 수 있습니다. 초보자조차도 위에서 다루는 튜토리얼을 따르면이 작업을 수행 할 수 있습니다. 여전히 답이없는 경우 아래의 의견 상자를 통해 알려주십시오.

우리는 실행 가능한 답변으로 곧 당신에게 돌아갈 것입니다. 끝까지 우리와 함께 해주셔서 감사합니다. 다음 게시물에서 어떤 주제를 다룰 것인지 알려주십시오.