[홈페이지에 구글 지도를 넣는 방법]
홈페이지를 제작하다 보면 회사소개나 매장 안내, 찾아오시는 길 등의 페이지에 지도를 삽입해야 하는 상황이 생깁니다.
이럴 때 아주 간단하고 빠르게 지도를 삽입할 수 있는 방법이 있는데요.
오늘은 그 방법에 대해 알려드립니다.
이럴 때 아주 간단하고 빠르게 지도를 삽입할 수 있는 방법이 있는데요.
오늘은 그 방법에 대해 알려드립니다.
01 구글 지도에 접속
www.google.co.kr/maps
www.google.co.kr/maps
네이버에서 구글 지도를 검색하세요.
02 주소나 장소 검색
구글 지도 검색창에 주소를 적어서 위치 검색을 합니다.
구글 지도 검색창에 주소를 적어서 위치 검색을 합니다.
03 검색 결과에서 좌측에 공유 버튼 클릭
검색을 통해 해당 위치가 표시되면 검색창 하단의 공유 버튼을 클릭합니다.
공유 버튼을 누르면 아래의 이미지와 같이 새 창이 뜹니다.
검색을 통해 해당 위치가 표시되면 검색창 하단의 공유 버튼을 클릭합니다.
공유 버튼을 누르면 아래의 이미지와 같이 새 창이 뜹니다.
04 iframe 형태의 소스 가져오기
새 창의 디폴트는 "지도 퍼가기" 버튼을 클릭합니다.
"html 복사" 버튼을 클릭하면 코드 복사가 완료 됩니다.
새 창의 디폴트는 "지도 퍼가기" 버튼을 클릭합니다.
"html 복사" 버튼을 클릭하면 코드 복사가 완료 됩니다.
05 소스 삽입
코드 복사가 완료되었으면 내 홈페이지에 지도를 넣어보세요.
에디트플러스[editplus] 등 프로그램을 통해 서버에 접속합니다.
지도를 넣을 페이지의 경로를 찾아 들어가세요.
지도를 넣을 위치에 복사한 지도 코드를 붙여넣기(컨트롤 + V) 하고 저장합니다.
코드 복사가 완료되었으면 내 홈페이지에 지도를 넣어보세요.
에디트플러스[editplus] 등 프로그램을 통해 서버에 접속합니다.
지도를 넣을 페이지의 경로를 찾아 들어가세요.
지도를 넣을 위치에 복사한 지도 코드를 붙여넣기(컨트롤 + V) 하고 저장합니다.
06 사이즈 조절
지도가 맞게 들어갔는지 확인해보니 한쪽으로 치우져있거나, 사이즈가 맞지 않을 수 있습니다.
복사된 코드를 보면 width="600" height="450" 이라는 문자가 있습니다.
지도의 넓이와 높이 값을 뜻합니다.
화면 전체 넓이를 쓰는 레이아웃이라면 width="100%"로 변경해보세요.
100%로 바꾸면 화면 폭에 맞게 잘 나옵니다.
지도가 맞게 들어갔는지 확인해보니 한쪽으로 치우져있거나, 사이즈가 맞지 않을 수 있습니다.
복사된 코드를 보면 width="600" height="450" 이라는 문자가 있습니다.
지도의 넓이와 높이 값을 뜻합니다.
화면 전체 넓이를 쓰는 레이아웃이라면 width="100%"로 변경해보세요.
100%로 바꾸면 화면 폭에 맞게 잘 나옵니다.
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3167.5810619164636!2d126.72980081547063!3d37.447000438722334!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357b7b9967a573c7%3A0x1d7563561bda8cd1!2z7JeQ7J2065SU7Luk666k64uI7LyA7J207IWY!5e0!3m2!1sko!2skr!4v1602572036910!5m2!1sko!2skr" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
결과
이렇게 지도 위젯을 사용하지 않고 구글에서 제공하는 임베디드 코드를 가져와서 직접 넣는 방식은 쉽게 할 수 있다는 장점이 있습니다.
이렇게 지도 위젯을 사용하지 않고 구글에서 제공하는 임베디드 코드를 가져와서 직접 넣는 방식은 쉽게 할 수 있다는 장점이 있습니다.
감사합니다.