어떤 사이트에든 지도 위젯 삽입하기

빌더에서 시작하기 (실제 작업은 이것뿐)

모든 것은 지도 삽입 빌더에서 시작합니다. 지오코딩은 거기서 한 번만 이루어집니다 — 복사하는 코드에는 고정된 좌표가 들어 있어서, 지오코더 장애나 “주소 정규화”가 나중에 핀을 옮기는 일은 없습니다. 주소를 입력하고, 핀이 놓이는 것을 확인한 다음, 복사하기 전에 실제 출입구 위로 끌어다 놓으세요. 그 10초의 드래그가 “맞는 거리”와 “맞는 문”의 차이를 만듭니다.

직접 만들기 전에 완성된 다중 지점 예시를 보고 싶나요? 빌더 데모를 열어 보세요 — 세 지점 샘플 회사가 불러와집니다. 주소, 번호가 붙은 색상 핀, 위치 패널이 미리보기에서 그대로 작동하니 바로 눌러 볼 수 있습니다.

WordPress: 플러그인 숏코드냐, 직접 iframe이냐

두 방법 모두 완전히 같은 위젯으로 끝납니다 — 취향대로 고르세요.

플러그인 방식(권장): whatismylocation-widget.zip 다운로드 → wp-admin ▸ 플러그인 ▸ 새로 추가 ▸ 플러그인 업로드 → 활성화. 그다음 숏코드 블록을 추가하세요:

[whatismylocation_map lat="48.858400" lng="2.294500" name="Acme SARL" address="Champ de Mars, Paris"]

속성 이름은 빌더의 옵션과 같습니다: theme, marker, zoom, height, directions, 그리고 지점용으로 pins="lat,lng,Label~Address|…"와 panel=, motion=(아래 참조 표를 보세요). 빌더의 WordPress 섹션이 완전한 숏코드를 만들어 주므로 직접 입력할 필요가 없습니다.

플러그인 없는 방식: 빌더에서 받은 iframe을 사용자 정의 HTML 블록에 붙여넣으세요. 위젯은 같고 업데이트할 플러그인도 없습니다. 대신 본문 마크업이 길어지고, 나중에 속성으로 손보는 방식은 쓸 수 없습니다.

Squarespace, Shopify, Notion — 그리고 나머지

WordPress 밖에서는 보통 붙여넣기 한 번으로 끝납니다. 쓰는 플랫폼의 HTML/임베드 요소(Wix Embed HTML, Squarespace Code 블록, Webflow Embed)를 추가하고 iframe을 넣으면 됩니다. 지도 위젯은 위치 위젯보다 더 쉬운 점이 하나 있습니다. allow="geolocation" 속성이 필요 없습니다. 방문자에게 아무것도 요청하지 않기 때문입니다. 그래서 페이지 빌더가 HTML을 다시 써도 지켜야 할 민감한 부분이 없습니다.

Squarespace: Code 블록을 추가하고 붙여넣으세요. 미리 알아 둘 점이 하나 있습니다. Code 블록은 Business 플랜 이상에서만 쓸 수 있습니다. Personal 플랜에서는 블록이 코드를 렌더링하지 않고 그냥 텍스트로 보여 줍니다.

Shopify에는 붙여넣기보다 나은 방법이 있습니다: 바로 쓸 수 있는 테마 섹션을 제공합니다. 테마에 파일 하나만 넣으면, 지점을 끌어서 순서를 바꿀 수 있는 블록으로 관리하는 기본 설정 패널이 생깁니다. 앱도 API 키도 필요 없습니다.

Notion과 Google Sites는 HTML이 아니라 URL로 삽입합니다. iframe 코드는 아예 받지 않습니다. 대신 빌더에서 위젯 URL 복사를 누르고, Notion의 /embed 블록이나 Google Sites의 삽입 ▸ URL로에 붙여넣으세요. 위젯은 완전한 독립 페이지이므로 어느 방식으로든 문제없이 표시됩니다.

Salesforce Experience Cloud(공개 커뮤니티 사이트): HTML Editor 컴포넌트에 iframe을 넣으세요. 그다음 관리자가 설정 ▸ 신뢰할 수 있는 URL에서 whatismylocation.ai를 frame-src CSP 지시문과 함께 추가해야 합니다. 그러지 않으면 Salesforce가 아무 알림 없이 프레임을 차단합니다. 코드로 개발하는 팀은 같은 URL을 10줄 정도의 Lightning Web Component로 감쌀 수 있습니다:

<!-- wimlMap.html -->
<template>
  <iframe src={src} width="100%" height="340"
          loading="lazy" title="Map"></iframe>
</template>

// wimlMap.js
import { LightningElement } from 'lwc';
export default class WimlMap extends LightningElement {
  src = 'https://whatismylocation.ai/widget/map?lat=48.858400&lng=2.294500&name=Acme';
}

여러 지점: 위치 패널

삽입 코드 하나에 최대 10곳까지 넣을 수 있습니다. 빌더의 고급 모드에서 핀을 하나씩 배치하고, 이름과 주소를 입력한 뒤 위치 추가를 누르세요. 방문자에게는 위치 패널이 표시됩니다 — 데스크톱에서는 지도 옆 아코디언, 휴대폰에서는 옆으로 넘기는 카드 줄입니다. 핀에는 번호가 붙습니다. 지점을 고르면 지도가 그곳으로 날아가고, 주소와 함께 그 지점의 길찾기 링크가 나타납니다.

• panel=은 레이아웃을 정합니다: auto(기본값 — iframe이 넓으면 옆, 좁으면 카드 줄), side, bottom, 또는 핀과 팝업만 쓰려면 none.
• motion=은 전환 애니메이션을 정합니다: smooth(기본, 부드럽게 이동), fade, lively, none. 시스템에서 “동작 줄이기”를 설정한 방문자는 어떤 값을 골라도 항상 즉시 전환됩니다.
• open=no은 모든 항목을 접은 상태로 시작합니다. 지도는 모든 지점이 보이도록 자동으로 맞추고, zoom은 최대값으로 쓰입니다.

옵션 참조

WordPress 문제 해결

숏코드가 페이지에 그냥 텍스트로 보입니다. 그 블록이 숏코드를 처리하지 않는 것입니다. 블록 편집기에서는 숏코드 블록을 쓰세요(코드나 서식 있는 텍스트 블록이 아닙니다). Elementor에서는 Shortcode 위젯, Divi에서는 Code 모듈을 쓰세요. 클래식 편집기를 쓴다면 비주얼 탭에 일반 텍스트로 입력하세요.

아무것도 나타나지 않습니다. 페이지 소스를 열어 whatismylocation을 찾아보세요. lat/lng가 없다는 HTML 주석이 보이면 좌표가 빠졌거나 잘못된 것입니다. 속성을 직접 입력하지 말고 빌더에서 숏코드 전체를 복사하세요.

저장하면 iframe이 사라집니다(플러그인 없는 방식). WordPress는 unfiltered_html 권한이 없는 사용자 역할이 넣은 iframe을 제거합니다. 멀티사이트에서는 관리자도 기본적으로 여기에 포함됩니다. 일부 보안 플러그인도 같은 일을 합니다. 플러그인 숏코드가 깔끔한 해결책입니다. 내 역할이 원시 iframe 저장을 허용받았는지에 의존하지 않기 때문입니다.

지도가 회색이고 타일이 불러와지지 않습니다. 타일은 tile.openstreetmap.org에서 옵니다. 아주 공격적인 광고 차단기나 회사 네트워크가 이를 막을 수 있습니다(오버레이 카드는 그래도 표시됩니다). 다른 네트워크나 모바일 데이터를 쓰는 휴대폰에서 확인해 보세요.

위치 패널이 보이지 않습니다. 패널은 핀이 2개 이상일 때부터 나타납니다. 위치가 하나면 기존 오버레이 카드가 표시됩니다. panel="none"이 설정되어 있는지도 확인하세요.

전환 애니메이션이 재생되지 않습니다. 거의 항상 방문자(또는 본인)의 운영체제 “동작 줄이기” 설정 때문입니다. 위젯은 이 설정을 의도적으로 존중해 즉시 전환합니다. 버그가 아니며, 다른 방문자에게는 고른 프리셋이 그대로 보입니다.

수정한 내용이 반영되지 않습니다. 캐시 플러그인(또는 호스팅 캐시)이 예전 페이지를 보여 주고 있습니다. 숏코드 속성을 수정한 뒤에는 페이지 캐시를 비우세요. 위젯 자체에는 캐시할 것이 없습니다.