오늘은 웹사이트나 쇼핑몰에서 회사 위치나 매장을 알려줄 수 있게
html을 이용하여 지도 넣는 방법을 알아보겠습니다.
"다음" 지도를 넣는 방법입니다.
사이트를 운영하다보면 회사의 정보를 알려야 할 때
텍스트로 주소만 적어서 알려드릴 수도 있지만
지도를 넣으면 조금 더 정보 전달이 잘 되며 친절하고 전문적인 느낌이 납니다.
주소 넣는 방법은 여러 가지가 있지만 저는 두 가지 방법을 소개해 드리려고 합니다.
첫 번째는 웹페이지에 바로 지도를 게시하는 방법이고
두 번째는 주소(이미지 또는 텍스트)를 클릭하면 팝업이 뜨면서 지도가 뜨게 하는 방법입니다.
새창으로 여는 방법으로 하면 팝업이 뜨지 않고 새 탭으로 열리는 경우가 종종 있기 때문에
보기에도 깔끔하게 팝업 형식을 알려드립니다.
두번째 방법은 매장이 여러 곳일 경우 쓰면 좋을 것 같습니다.
1. 웹페이지에 내가 원하는 주소의 지도 게시하기
1. 다음 지도에 들어갑니다.
2. 원하는 곳 주소를 넣은 뒤 지도 화면의 공유 버튼을 클릭합니다.
3. 드롭다운에 HTML 태그 복사를 누릅니다.
4. 지도크기를 원하는 대로 설정할 수 있습니다. 아이콘 변경도 가능합니다. 원하는 대로 설정 후 소스 생성하기를 누릅니다.
5. 일반지도가 체크되어 있습니다. 소스를 복사한 후, 원하는 곳에 붙여넣기(Ctrl+v) 해주세요.
6. 웹페이지에 지도가 생성되었습니다.
이제 웹사이트에 그대로 게시하지 않고 주소를 클릭하면 팝업이 뜨게 하는 방법을 알아보겠습니다.
팝업을 띄울 때는 2개의 .html 형식의 파일을 생성해야 합니다.
하나는 다음에서 생성한 지도 소스를 담은 html입니다.
두 번째는 팝업을 생성할 페이지입니다.
이제부터 이미지로 차근차근 설명드릴게요.
2. 이미지를 클릭하면 팝업이 뜨면서 지도가 뜨게 하는 방법
1. 앞에서 복사한 지도 소스를 메모장에 붙여넣기(Ctrl+v) 해주세요.
2. 파일을 map01.html 형식으로 저장합니다.
3. 새로운 메모장을 오픈하여 팝업 태그를 붙여 넣습니다. 문서를 map.html으로 저장합니다.
아래 파일 첨부했습니다. 설명을 참고하여 태그 수정을 하시면 됩니다.
저는 지도를 600*400px으로 생성하였기 때문에 가로 세로 사이즈를 600*400px으로 하였습니다.
클릭할 이미지는 광화문광장 사이트에서 세종대왕이 계신 사진을 가져왔습니다.
이미지 주소: gwanghwamun.seoul.go.kr/resources/client/images/contents/img_introduce_1.jpg
<html 간략 설명>
a href="/map.01.html" -> 다음 지도에서 생성한 지도를 저장한 html파일 경로
onclick= ~~~'width=600px,height=400px -> 가로, 세로 사이즈
img src="https://~~~ -> 클릭하면 지도 팝업이 뜨는 이미지 주소
4. map.html 을 열면 세종대왕이 계신 광화문 사진이 나옵니다.
이미지를 클릭하면 광화문 주소가 팝업(map01.html)으로 뜨게 됩니다.
지금까지 웹사이트에 주소 넣는 방법을 알아보았습니다.
이미지와 설명이 길어서 어렵게 느껴지실 수도 있지만 알고 보면 아주 쉬운 태그랍니다.
홈페이지를 제작하다 보면 지도를 넣어야 할 경우가 종종 발생하는데요.
어떻게 하는지 방법을 모르셨다면 제 블로그가 도움이 되셨기를 바랍니다.
혹시나 제가 잘못 알고 있거나 더 좋은 방법이 있다면 댓글로 알려주시면 정말 감사할 거예요.
티스토리 새내기는 앞으로 꾸준히 활동하면서 이것저것 알쓸신잡을 종종 올릴 거니깐 많이 구경 와 주세요~
그럼 모두 건강 조심하시고요. 다음에 만나요. 안녕히 계세요~!
'홈페이지 제작 A to Z' 카테고리의 다른 글
| [카페24]구글 애널리틱스 (Google Analytics) 스크립트 설치하기 (0) | 2021.01.04 |
|---|---|
| 구글 애널리틱스의 필요성, GA계정 생성 방법 (0) | 2020.12.17 |
| 웹사이트 RSS만들기. 생성방법과 검색엔진 최적화 적용 (0) | 2020.12.16 |
| 'HTML 구조'오류 수정하기, 사이트맵, RSS생성 (0) | 2020.12.15 |
| 드래그&우클릭 설정과 해제 방법(크롬 개발자모드) (0) | 2020.11.24 |