전체상품목록 바로가기

본문 바로가기

카테고리

커뮤니티

(구)상품관리, (구)디자인을 이용하실경우 작업이 불가능합니다. (뉴)상품관리 전환 후 작업의뢰해주세요. 업무시간 외에는 게시판을 이용해주세요.

통화량이 많아 전화연결이 어려울 수 있으니 게시판을 이용해서 문의해 주시면 최대한 빨리 답변드리겠습니다.

현재 위치
  1. 게시판
  2. 운영매뉴얼

운영매뉴얼

운영매뉴얼입니다.

게시판 상세
제목 구글맵 삽입하기
작성자

수인디자인 (ip:) 조회수 :6

작성일 2018-03-26
평점 0점
추천 추천하기

구글맵을 삽입하는 방법입니다.

구글맵을 추가하는 절차

1. 먼저 구글맵 사이트로 이동하여 원하는 지역을 검색합니다.

2. 왼쪽 상단의 메뉴 아이콘을 클릭합니다


3. 표시되는 메뉴에서 “지도 공유 또는 퍼가기”를 선택합니다.


4. “지도 퍼가기”를 선택합니다.


원하는 크기를 선택한 후 코드를 복사해 웹사이트 또는 블로그의 소스 코드에 코드를 붙여넣습니다.

참고로 UI가 영어로 나오면 메뉴에서 “Korean – 한국어”를 선택하면 UI가 한글로 바뀝니다.

참고로 반응형으로 구글맵을 삽입하려면 iframe 외부를 별도의 class를 둘러싼 다음에 CSS로 조정해주면 됩니다.

<div class="map-responsive">
<iframe src="https://www.google.com/maps/embed?...</iframe>
</div>

다음 CSS를 사용합니다.

.map-responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.map-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
/* Source: ostraining

위와 같이 적용하면 구글지도가 모바일에서도 제대로 표시될 것입니다.


첨부파일
비밀번호 수정 및 삭제하려면 비밀번호를 입력하세요.
목록 수정 답변
댓글 수정 비밀번호 :
/ byte

비밀번호 :


INSTAGRAM