구글 지도 웹페이지에 삽입하는 방법

웹페이지에 장소 정보를 제공할 때 임베드 지도를 삽입하면 방문자 입장에서 직관적으로 위치를 파악할 수 있어서 장소 리뷰를 한다면 빠질 수 없는 요소 중 하나인데요.

티스토리나 워드프레스 같은 블로그는 HTML 편집을 지원하기 때문에 구글 지도의 공유 기능을 이용해 HTML 코드로 구글 지도를 삽입할 수 있으며 복잡한 API를 필요로 하지 않은 장점이 있습니다.

구글 지도 삽입 방법

1. 구글 지도 HTML 코드 복사

1. 구글 지도에 접속합니다.
2. 검색창에 주소 또는 장소를 입력한 후 Enter 키를 누르거나 자동 완성으로 나타나는 주소를 클릭합니다.

3. 검색 결과로 장소가 나타나면 장소 이름 하단의 공유 버튼을 클릭합니다.

4. 공유 화면에서 지도 퍼가기 탭을 클릭합니다.
5. 지도 크기를 지정한 다음 HTML 복사를 클릭합니다.
6. iframe으로 된 임베드 코드를 복사합니다.

2. 구글 지도 삽입하기

1. 웹페이지 편집 화면을 엽니다.
2. 복사한 구글 지도 HTML 코드를 붙여넣습니다.
3. 코드 내용 중에서 width="픽셀" height="픽셀" 구문을 웹페이지 크기에 맞게 수정합니다.
   • width=”100%”를 설정할 경우 가로 폭이 100%로 자동 조절됩니다.
   • height=”500″을 설정하면 세로 500 픽셀로 고정됩니다.

3. 삽입한 구글 지도 확인하기

사용하는 에디터의 미리보기 기능을 이용하거나 웹페이지를 열어 구글 지도가 웹문서에 표시되는지 확인합니다.