iFrame API
프로젝트 하나를 내 웹사이트에 실시간 지도로 표시하고, 사이트에 맞는 단위, 지도 스타일, 테마를 선택하세요.
iFrame API는 프로젝트의 지도를 내 웹 페이지에 표시합니다. 방문자는 계정 없이, 내 사이트를 벗어나지 않고 측정값이 표시된 위성 지도를 보고 이동할 수 있습니다. 프로젝트, 단위, 지도 스타일, 색상 테마는 직접 선택합니다.
시작하기 전에#
- 라이브 API 키와 임베드된 지도 접근 권한. API 키를 참고하세요.
- 방문자가 볼 수 있는 프로젝트: 내 프로젝트이든 다른 계정의 프로젝트이든 보기 전용 또는 공개으로 공유된 것이어야 합니다. 비공개 프로젝트는 다른 계정의 것이고 소유자가 나를 승인한 경우에만 표시됩니다(고객의 비공개 프로젝트 참고). 내 비공개 프로젝트는 표시되지 않습니다. 임베드할 수 있는 프로젝트를 참고하세요.
- 선택 사항으로 키의 웹사이트 제한: 임베드가 내 사이트에서만 작동하도록 합니다. API 키를 참고하세요.
임베드 코드 만들기#
개발자 > 지도 임베드는 라이브 키로 코드를 대신 만들어 줍니다. 프로젝트를 선택하고, 테마, 단위, 지도 유형, 크기를 고르고, **실시간 미리보기**를 확인한 다음 **임베드 코드**를 복사하세요. 프로젝트가 비공개이면 섹션에 그렇다고 표시되고 보기 전용으로 설정를 제안합니다. 각 단계는 임베드 코드 가져오기를 참고하세요.
코드에는 키가 들어 있으므로 키를 교체할 때까지 계속 작동합니다. 키가 **임베드된 지도**보다 많은 일을 할 수 있는 경우에는 누구나 페이지 소스에서 키를 읽을 수 있으므로 섹션에서 경고하며, 키에 웹사이트 제한이 없을 때도 경고합니다. **실시간 미리보기**만 수명이 짧은 토큰을 사용합니다. 키 또는 토큰을 참고하세요.
임베드 주소#
임베드는 주소가 https://app.measuremaponline.com/iframe_api로 시작하고 그
뒤에 다음 매개변수가 붙는 <iframe>입니다.
| 매개변수 | 필요 여부 | 값 |
|---|---|---|
pid |
필수 | 프로젝트의 ID: 앱에서 프로젝트 주소의 /p/ 뒤에 오는 부분입니다. 소유자는 프로젝트 개요 끝에서 복사할 수 있으며, 임베드 지도에서 프로젝트 이름을 클릭해도 복사됩니다. |
key |
key 또는 token |
API 키. |
token |
key 또는 token |
서버에서 받은 토큰(아래 참고). |
ms |
선택 | 단위: metric 또는 imperial. 지정하지 않으면 미국 방문자는 야드파운드법, 그 외 모든 방문자는 미터법 단위를 봅니다. |
maptype |
선택 | satellite(기본값), map, hybrid, terrain. |
theme |
선택 | auto(기본값: 방문자의 시스템 설정을 따름), light, dark. |
최소 예제#
<iframe src="https://app.measuremaponline.com/iframe_api?pid=YOUR_PROJECT_ID&key=YOUR_API_KEY&maptype=satellite&theme=auto"
title="YOUR_PROJECT_NAME" width="500" height="500" style="border:0" allow="fullscreen"></iframe>
YOUR_PROJECT_ID, YOUR_API_KEY, YOUR_PROJECT_NAME을 바꾸고(title은
화면 낭독기가 읽어 줍니다) 너비와 높이를 페이지에 맞게 설정하세요.
키 또는 토큰#
key를 사용하면 지도 임베드 섹션이 제공하는 코드처럼
키가 유효한 한, 키의 제한이 허용하는 웹사이트에서 임베드가 계속 작동합니다.
이 경우 키가 페이지 소스에 노출되므로 다음을 지키세요.
- 임베드된 지도 접근 권한만 있는 키를 사용하세요.
- 키를 내 웹사이트로 제한하세요.
- 키를 교체하면 이전 키가 계속 작동하는 24시간 안에 페이지를 업데이트하세요 (접근 설정이 생기기 전에 만든 키는 안내받은 날짜까지 작동합니다).
token을 사용하면 키가 서버에 남아 있습니다. 서버가 방문마다 페이지에
임베드를 써 넣는 경우에 적합합니다. 페이지를 보여 주기 전에 서버가 REST
API에 토큰을 요청하고 iframe 주소에 넣습니다.
- 키를
Authorization헤더에 넣어POST https://api.measuremaponline.com/api/v2/auth/iframe/token을 호출하면 60분 동안 유효한token을 반환합니다. POST https://api.measuremaponline.com/api/v2/auth/token도 같은 일을 하며 최대 24시간까지 초 단위의duration을 받습니다. 응답에 토큰이 만료되는 시점이 나옵니다.
계정은 한 시간에 최대 600개의 토큰을 받을 수 있습니다. 라이브 키를 사용하세요. 임베드는 라이브 프로젝트만 표시하므로 샌드박스 키로 만든 토큰으로는 지도가 열리지 않습니다. API 레퍼런스를 참고하세요.
방문자가 할 수 있는 일#
방문자는 지도를 이동하고 확대/축소하고, 도형의 측정값을 읽고, 프로젝트의 댓글을 읽을 수 있습니다. 프로젝트가 모든 사람의 댓글을 허용하는 경우에는 댓글을 추가할 수 있으며, 프로젝트 이름을 클릭하면 ID가 복사됩니다. 그 밖의 것은 변경할 수 없습니다. 프로젝트의 접근 수준과 관계없이 임베드 안에서는 편집이 꺼져 있습니다. 유일한 예외는 Open Guest 플랜의 Open Guest 프로젝트로, 방문자가 직접 측정합니다.
지도가 나타나지 않을 때#
대부분의 경우 지도에 이유를 알려 주는 메시지가 표시됩니다. 지도에 메시지가 표시될 때를 참고하세요. 다음을 순서대로 확인하세요.
- 주소에 있는
token이 만료되었습니다. 서버가 더 길게 요청하지 않았다면 토큰은 60분 동안 유지됩니다. 키를 사용하는 지도 임베드에서 코드를 다시 복사하거나, 서버가 방문마다 새 토큰을 받도록 하세요(위 참고). - 프로젝트가 비공개입니다. 내 프로젝트라면 보기 전용 또는 공개으로 설정하거나 지도 임베드에서 보기 전용으로 설정를 누르세요. 고객의 프로젝트라면 고객이 지도에서 나를 승인할 수 있고, 비공개 프로젝트에서 요청할 수도 있습니다.
- 프로젝트의 플랜이 종료되었습니다. 소유자의 플랜이며, 조직의 프로젝트라면 조직의 플랜입니다. 플랜이 갱신되면 다시 표시됩니다.
- 웹사이트가 허용되지 않습니다. 키에 웹사이트 제한이 있으면 임베드를 표시하는 페이지가 그중 하나여야 합니다. 일부 브라우저와 사이트는 임베드가 어느 페이지에 있는지 숨기며, 제한을 설정한 경우 그런 임베드는 거부됩니다.
- 키가 교체되었습니다. 이전 키는 새 키를 만들고 24시간 후에, 폐기했다면 즉시 작동을 멈춥니다.
- 키가 샌드박스 키입니다. 임베드는 라이브 키와 라이브 프로젝트에서만 작동합니다.
- 구독이 활성 상태가 아니거나 API 접근이 중지되었습니다. API 키 섹션에 표시됩니다.
도움이 더 필요하신가요?
지원팀에 어떤 작업을 하려고 했는지 알려 주세요. 스크린샷이 있으면 도움이 됩니다.