Damon Cho
기획자 데이먼
Damon Cho
전체 방문자
1,363,673
오늘
7
어제
792
  • 전체 글 (135)
    • 제품 관리 (80)
      • PO, PM, 기획자 (27)
      • 비즈니스 분석 (14)
      • 서비스 기획 (26)
      • 마케팅 & 운영 & 팁 (7)
      • 여행 & 숙박 플랫폼 (6)
    • 프로토타입 툴 Axure (48)
      • 기초강좌 (14)
      • 프로토타입 샘플 (13)
      • 해외 라이브러리 (11)
      • 기타 (10)
    • 외부 아티클 (7)
      • PM, 제품 관리 (3)
      • 소프트스킬 (1)
      • 트렌드 (1)
      • 케이스 스터디 (2)
      • OTT 관련 (0)

블로그 메뉴

  • 🔗 PM/기획자 가이드 모음
  • 🔗 Axure 온라인 클래스
  • 🔗 웹/모바일 기획자 그룹
  • 문의 & 답변

인기 글

  • [웹/앱 설계의 기본] 화면설계⋯
    2020.09.08
    [웹/앱 설계의 기본] 화면설계⋯
  • 당신은 대체 불가능한 기획자인⋯
    2019.12.01
    당신은 대체 불가능한 기획자인⋯
  • 프로덕트 매니저의 툴, UI 디자⋯
    2020.09.01
    프로덕트 매니저의 툴, UI 디자⋯

최근 댓글

  • 많은 도움이 되었습니다. 감사⋯
    익명
  • 공부하는데 많은 도움이 되었습⋯
    제갈 PM
  • 오랜만이네요. Adobe XD공부하⋯
    김진남

최근 글

  • 네이티브 앱으로 제작할까? 크⋯
    2022.06.10
    네이티브 앱으로 제작할까? 크⋯
  • 리텐션을 고민할 때 생각해봐야⋯
    2022.03.27
  • 토스, 만보기 서비스 분석 글
    2022.03.22
글쓰기 · 관리자
hELLO · Designed By 정상우.
Damon Cho

기획자 데이먼

[Axure 강좌] 구글 지도 연동하기!
프로토타입 툴 Axure/기초강좌

[Axure 강좌] 구글 지도 연동하기!

2016. 1. 23. 11:39

Axure에 구글 지도 연동하는 방법을 살펴보겠습니다. 

구글 지도 연동 시 프로토타입에서도 구글 지도의 확대,축소,이동 등 모든 기능을 동일하게 사용할 수 있습니다.

  • 프로토타입 미리보기 : http://cijydn.axshare.com/#c=2

Axure 강좌는 PC 버전에 최적화되어있습니다.


Step 1. 인라인 프레임 위젯 드래그

Axure 실행 후 좌측의 위젯 모음에서 인라인 프레임 위젯을 드래그해 적당한 사이즈로 조절합니다.



Step 2. 구글 지도에서 iframe 링크 가져오기

웹 브라우저에서 구글 맵(https://www.google.co.kr/maps) 접속 후 다음 순서에 따라 링크를 복사합니다.

  1. 지도의 중심 위치를 검색합니다. (ex. 한라산)
  2. 공유 버튼을 클릭합니다.
  3. 지도 퍼가기 탭을 클릭합니다.
  4. 박스 안의 iframe URL을 모두 복사합니다.

Step 3. 인라인 프레임에 복사 링크 삽입하기

Step 1에서 삽입한 인라인 프레임을 더블 클릭해 아래 빨간색으로 표시한 <iframe></iframe>를 제외한 순수 URL을 붙여넣기합니다.


Step 4. 구글 맵 연동 미리보기

상단의 Preview 아이콘을 클릭하거나 윈도우 버전에서는 F5, 맥 버전에서는 Command+Shift+P를 클릭해 미리보기 화면을 실행합니다. 정상적으로 작동하는 경우 디자인 요소를 넣어 입맛에 맞게 사용하시면 됩니다. 


현재 포스팅하는 강좌는 Axure RP 8.0 Beta 버전으로 제작되었습니다.

위에 사용 된 예제 파일이 필요하신 분은 댓글창에 이메일 주소를 남겨주세요.


강좌
2016년 Axure 강좌일정 및 공식 커리큘럼 안내
소개
IT 기획 연구소 운영자 소개
반응형
    '프로토타입 툴 Axure/기초강좌' 카테고리의 다른 글
    • [Axure 강좌] Admin 내비게이션 만들기
    • [Axure 강좌] 유튜브 동영상 embed 하기!
    • Axure 기초강좌 - Style 판넬
    • Axure 기초강좌 - 마우스 오버, 마우스 이탈, 위젯 선택 시 스타일 적용 방법
    auxre, axure google map, axure map, axure 강좌, axure 매뉴얼
    Damon Cho
    Damon Cho
    제품 관리자(PO, PM, 기획자)로 일하며 경험한 것들을 정리하고 공유합니다.
    댓글쓰기
    1. sosol
      2016.01.28 02:04
      우와..이런 기능이!! 감사합니다!!
      수정/삭제댓글쓰기댓글보기
    2. 궁금해요
      2016.03.15 11:15
      preview 버튼을 눌렀더니 "이 웹 사이트에 입력한 정보의 보안을 위해서 이 콘텐츠의 게시자가 프레임 내 표시를 허용하지 않습니다." 라고 오류메세지가 나오는데요...?? 지도가 보여지질 않구요..ㅠㅠ
      수정/삭제댓글쓰기댓글보기
      1. Damon Cho
        2016.03.15 13:57 신고
        안녕하세요.
        아마도, 지도 URL을 잘못 입력하셨을 것 같습니다.
        다시 한 번 해봐도 안 되시면 이메일 주소를 남겨주세요.
        관련 파일을 메일로 보내드리겠습니다 ^^
        수정/삭제
      2. 궁금해요
        2016.03.15 14:56
        구글맵 보안상으로 뭘 막아놓지 않았을까 라는 생각이 드네요... 유투브나 다른 사이트들은 링크가 잘 걸려요 ㅜㅜ
        지금 여기저기 실험해보는 중인데 네이버 사이트 링크도 같은 오류문구로 막히네용
        (30일 데모버전 써서 그런걸까요...?)
        kkspp@naver.com입니다~
        수정/삭제
      3. Damon Cho
        2016.03.15 15:24 신고
        메일로 답변드렸습니다.
        감사합니다.
        수정/삭제
    3. sunmi
      2016.07.26 19:26
      정말 감사합니다. 덕분에 빠르게 문제를 해결 할 수 있었어요
      수정/삭제댓글쓰기댓글보기
      1. Damon Cho
        2016.07.26 23:18 신고
        댓글 감사합니다 ^^
        수정/삭제
    4. scalli2
      2016.09.06 18:24
      열심히 따라하고 있는데~ 재미있네요.
      수정/삭제댓글쓰기댓글보기
      1. Damon Cho
        2016.09.06 22:47 신고
        Axure는 바로 실행해 볼 수 있어서, 좀 더 재밌는것 같아요! 댓글 감사합니다. ^^
        수정/삭제
    5. 초보자
      2016.09.12 11:31
      제가 7.0으로 작업 하고 있는데 이렇게 하고 preview하면
      "HTTP 404 오류
      Microsoft Edge에서 이 페이지를 찾을 수 없음"
      라고 나옵니다. 7.0은 안되는 것일까요?
      수정/삭제댓글쓰기댓글보기
      1. 초보자
        2016.09.12 11:36
        아 됐습니다. 빨간색 부분을 다 빼니깐 되네요 ^^ 감사합니다.
        수정/삭제
      2. Damon Cho
        2016.09.12 12:17 신고
        초보자님 안녕하세요.
        답변 남기기 전에 금새 해결하셨네요 ^^
        수정/삭제
    6. 손용휘
      2017.07.10 12:03
      궁금해요 님과 같이 저도 안되네요.. ㅎㅎ
      수정/삭제댓글쓰기댓글보기
      1. Damon Cho
        2017.07.12 18:42 신고
        지금도 잘 되고 있는걸 확인했는데요. 구글지도 URL 복사하실때 [지도 퍼가기] 탭 선택 후 Ifarme으로 시작되는 링크의 URL을 복사하셔야 합니다. 혹시나 잘 안되시면 cysstory@naver.com으로 작업파일 보내주시면 회신해드리겠습니다.
        수정/삭제
    다음 글
    [Axure 강좌] 유튜브 동영상 embed 하기!
    이전 글
    (Axure Library) 소셜미디어 아이콘
    • 이전
    • 1
    • ···
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • ···
    • 135
    • 다음

    티스토리툴바