워크박스

웹페이지(홈페이지)에 구글맵(Google 지도) 삽입하는 방법 본문

구글(Google)

웹페이지(홈페이지)에 구글맵(Google 지도) 삽입하는 방법

오픈빌더 2020. 8. 19. 12:30

웹페이지, 웹사이트(홈페이지, 블로그 등)에 구글맵(Google 지도)을 삽입(추가)하는 방법을 알아보겠습니다.
Google 지도를 웹사이트에 추가하는 방법은 몇가지가 있지만 이번 포스팅에서 설명한 방법은 Google 지도 사이트에서 검색결과에서 지도 공유 코드를 추가하는 방법을 사용하겠습니다.

웹페이지에 구글맵을 추가하기 위해 코드 생성하기

1. 먼저 Google 지도(https://www.google.com/maps)를 열고 원하시는 상호나 지역을 검색합니다.

2. 검색 결과에서 [공유] 버튼을 클릭합니다.

3. [지도 퍼가기]를 클릭합니다. 입력란에 있는 텍스트를 복사하거나 [HTML 복사]를 클릭합니다.

4. 웹페이지의 필요한곳에 HTML 붙여넣습니다.

붙여넣기 하시면 아래와 같이 iframe 코드를 보실수 있습니다.

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3162.245520924971!2d126.97469751588231!3d37.572835879796656!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca2eb3e16f081%3A0x60277c9a54a3d4d!2z7IS47KKF64yA7JmVIOuPmeyDgQ!5e0!3m2!1sko!2skr!4v1597808054575!5m2!1sko!2skr" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0" width="600" height="450" frameborder="0"></iframe>

아래는 실제 적용된 모습입니다.

 

 

 

Comments