IT Story/인터넷 정보

웹사이트에 구글 맵 지도 iframe 삽입하기

Maru_H 2023. 7. 28. 04:04
728x90

웹사이트를 제작하다가 보면 지도를 연결해야 되는 경우가 있다. 지도에 여러 가지 표시를 하거나 지도에 특별한 기능을 추가해야 한다면 카카오 지도와 같은 API를 사용하여 웹사이트에서 지도를 연결하고 활용할 수 있다. 하지만 단순히 주소 위치만 보여주면 된다면 구글 지도를 활용하면 아주 쉽게 웹사이트에 지도를 나타낼 수 있다.

 

구글 지도 사용하는 방법

 

https://www.google.com/maps

 

Google Maps

Find local businesses, view maps and get driving directions in Google Maps.

www.google.com

 

구글 맵 웹사이트에 접속해서 원하는 장소를 검색한다.

글쓴이는 롯데타워를 검색해 보겠다.

 

구글지도 롯데월드타워

 

검색한 결과가 나타났다. 그리고 공유 버튼이 활성화된 것을 확인할 수 있다.

공유 버튼을 눌러보자.

 

구글 지도 공유 버튼

공유 버튼을 누르면 위와 같은 창이 뜨게 된다.

링크 보내기, 지도 퍼가기 버튼이 활성화되어 있다. 지도 퍼가기를 눌러보자.

 

구글 지도 퍼가기

해당 위 사진을 보면 iframe 코드가 나타난 것을 확인할 수 있다.

Html에 이 코드를 붙이면 내 웹사이트에 지도가 바로 보인다.

728x90