Axure에 구글 지도 연동하는 방법을 살펴보겠습니다.
구글 지도 연동 시 프로토타입에서도 구글 지도의 확대,축소,이동 등 모든 기능을 동일하게 사용할 수 있습니다.
- 프로토타입 미리보기 : http://cijydn.axshare.com/#c=2
Step 1. 인라인 프레임 위젯 드래그
Axure 실행 후 좌측의 위젯 모음에서 인라인 프레임 위젯을 드래그해 적당한 사이즈로 조절합니다.
Step 2. 구글 지도에서 iframe 링크 가져오기
웹 브라우저에서 구글 맵(https://www.google.co.kr/maps) 접속 후 다음 순서에 따라 링크를 복사합니다.
- 지도의 중심 위치를 검색합니다. (ex. 한라산)
- 공유 버튼을 클릭합니다.
- 지도 퍼가기 탭을 클릭합니다.
- 박스 안의 iframe URL을 모두 복사합니다.
Step 3. 인라인 프레임에 복사 링크 삽입하기
Step 1에서 삽입한 인라인 프레임을 더블 클릭해 아래 빨간색으로 표시한 <iframe></iframe>를 제외한 순수 URL을 붙여넣기합니다.
Step 4. 구글 맵 연동 미리보기
상단의 Preview 아이콘을 클릭하거나 윈도우 버전에서는 F5, 맥 버전에서는 Command+Shift+P를 클릭해 미리보기 화면을 실행합니다. 정상적으로 작동하는 경우 디자인 요소를 넣어 입맛에 맞게 사용하시면 됩니다.
현재 포스팅하는 강좌는 Axure RP 8.0 Beta 버전으로 제작되었습니다.
위에 사용 된 예제 파일이 필요하신 분은 댓글창에 이메일 주소를 남겨주세요.
'프로토타입 툴 Axure > 기초강좌' 카테고리의 다른 글
| [Axure 강좌] Admin 내비게이션 만들기 (2) | 2016.08.30 |
|---|---|
| [Axure 강좌] 유튜브 동영상 embed 하기! (2) | 2016.01.26 |
| [Axure 강좌] 구글 지도 연동하기! (14) | 2016.01.23 |
| Axure 기초강좌 - Style 판넬 (0) | 2015.09.25 |
| Axure 기초강좌 - 마우스 오버, 마우스 이탈, 위젯 선택 시 스타일 적용 방법 (3) | 2015.09.18 |
| Axure 기초강좌 - 위젯 모양 변경방법 (4) | 2015.09.17 |
우와..이런 기능이!! 감사합니다!!
preview 버튼을 눌렀더니 "이 웹 사이트에 입력한 정보의 보안을 위해서 이 콘텐츠의 게시자가 프레임 내 표시를 허용하지 않습니다." 라고 오류메세지가 나오는데요...?? 지도가 보여지질 않구요..ㅠㅠ
정말 감사합니다. 덕분에 빠르게 문제를 해결 할 수 있었어요
열심히 따라하고 있는데~ 재미있네요.
제가 7.0으로 작업 하고 있는데 이렇게 하고 preview하면
"HTTP 404 오류
Microsoft Edge에서 이 페이지를 찾을 수 없음"
라고 나옵니다. 7.0은 안되는 것일까요?
궁금해요 님과 같이 저도 안되네요.. ㅎㅎ