구글맵을 삽입하는 방법입니다.
구글맵을 추가하는 절차
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위와 같이 적용하면 구글지도가 모바일에서도 제대로 표시될 것입니다.
