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

인터넷 서비스

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

티스토리나 워드프레스 같은 블로그는 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. 삽입한 구글 지도 확인하기

구글 지도 확인하기

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

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

Fill out this field
Fill out this field
유효한 이메일 주소를 입력해주세요.

Pc에서 Gmail 알림 설정하는 방법
PC에서 Gmail 알림 설정하는 방법
스마트폰에서 Gmail 애플리케이션을 설치하면 새로운 메일을 받을 때 알림으로 알려주고 중요한 알림을 분류해서 사용할 수 있습니다. 개인적인 용도로 사용할 때는…
크롬 개발자도구 꺼짐 현상 해결 방법
크롬 개발자도구 꺼짐 현상 해결 방법
크롬 개발자도구 꺼짐 현상에 대해서 알아보겠습니다. 크롬 브라우저에서 실시간으로 웹사이트의 HTML, CSS 편집과 스크립트 디버깅을 위해서 F12 키를 눌러 개발자도구를…