[홈페이지 제작]내 사이트에 구글지도를 간단하게 삽입하는 방법

홈페이지를 제작하다 보면 회사소개나 매장안내 찾아오시는 길 등의 페이지를 제작하면서 지도를 삽입해야 하는 상황이 자주 생깁니다.

이럴때 아주 간단하고 빠르게 지도를 삽입할 수 있는 방법을 알려드립니다.


STEP 01

본 글에서는 서울 시청을 예로 들겠습니다.

- 구글 지도 검색창에 주소를 적어서 위치검색을 합니다.
- 검색을 통해 해당 위치가 표시되면 검색창 하단의 공유 버튼을 클릭합니다.


STEP 02

공유버튼을 누르면 아래의 이미지와 같이 새창이 뜹니다. 

- 새창의 디폴트는  "링크 보내기"인데 여기가 아니고 그 옆에 "지도 퍼가기" 버튼을 클릭합니다.
- 아래 이미지에서 화살표로 표시된 "html 복사" 버튼을 클릭하면 코드 복사가 완료 됩니다.


STEP 03

코드복사가 완료 되었으니 이제 내 사이트에 지도를 넣어보죠.

- 관리자 모드로 접속하여 지도를 넣을 위치에 "코드위젯"을 삽입합니다.


STEP 04

코드위젯 추가 후 추가된 위젯 위에서 오른쪽 마우스 클릭으로 코드 설정에 들어갑니다.


STEP 05

복사한 지도 코드를 붙여넣기(컨트롤 + V) 하고 저장합니다.


STEP 06

지도가 맞게 들어갔는지 확인해보니 뭔가 좀 이상하게 나오죠 ?

- 전체화면에 맞게 나와야 하는데 왼쪽으로 치우쳐 나오네요. 보기 안 좋습니다.
- 다시 스탭 05번째처럼 코드 위젯으로 갑니다.

STEP 07

코드를 보면 width="600" height="450" 이라는 문자가 있습니다. 이건 html로 지도의 넓이와 높이값을 뜻합니다.
여기까지 보면 딱 감이 옵니다.


STEP 07

저는 화면 전체 넓이를 쓰는 레이아웃이기 때문에 여기서 넓이를 width="600" 에서  > width="100%"로 변경하겠습니다.


이렇게 넓이값을 100%로 바꿔주니 화면 폭에 맞게 잘 나오네요.


마치며..

사이트 넓이가 1200인 분들은 width="1200" 으로 수정하시면 됩니다. 

그렇다면 높이는? 역시 넓이와 마찬가지로 기본 height="450" 값을 바꿔주시면 됩니다. 단 모바일 뷰를 생각해서 너무 큰 수치는 적당하지 않습니다.
가로폭은 자동으로 줄어들지만 높이값이 너무 크면 모바일에서 접속시 불편을 초래할 수 있습니다.


이렇게 지도위젯을 사용하지 않고 구글에서 제공하는 임베디드 코드를 가져와서 직접 넣는 방식의 장점은 쉽고 편하게 넣을수 있다는 점과 길찾기 버튼을 같이 삽입할 수 있다는 것입니다. 길찾기 버튼을 클릭하면 바로 구글 지도의 길 찾기 페이지로 이동해서 출발지만 적어주면 되니까요!




  • ABOUT

  • HELP INFO

  • 클릭하시면 이니시스 결제시스템의 유효성을 확인하실 수 있습니다.