인터넷 서비스

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

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

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

구글 지도 삽입 방법

1. 구글 지도 HTML 코드 복사

구글 지도 Html 코드 복사 1
주소 검색
  1. 구글 지도에 접속합니다.
  2. 검색창에 주소 또는 장소를 입력한 후 Enter 키를 누르거나 자동 완성으로 나타나는 주소를 클릭합니다.
구글 지도 Html 코드 복사 2
구글 지도 공유
  1. 검색 결과로 장소가 나타나면 장소 이름 하단의 공유 버튼을 클릭합니다.
구글 지도 Html 코드 복사 3
구글지도 HTML 복사
  1. 공유 화면에서 지도 퍼가기 탭을 클릭합니다.
  2. 지도 크기를 지정한 다음 HTML 복사를 클릭합니다.
  3. iframe으로 된 임베드 코드를 복사합니다.

2. 구글 지도 삽입하기

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

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

구글 지도 확인하기

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

Write A Comment