[Tistory Google Map] 티스토리 구글맵 테두리 그리기


글,사진 | 미뇩사마


티스토리 HTML 편집을 통해 구글맵(Google Map)을 삽입하는 방법은 예전 포스팅을 통해 한차례 소개했었다. 그때 그 포스팅은 여기를 클릭!!


구글지도에서 퍼가고자하는 곳의 공유링크를 복사해온 다음 살짝만 수정, 추가해주면 삽입되는 구글맵에 테두리선을 그릴 수 있다. 테두리선이 있고 없고의 차이는 아래와 같다.(▼) 어떤가? 구글맵 테두리에 경계선이 생김으로써 좀 더 명확해지지 않았는가? 모바일과 웹을 통해 보면 보다 깔끔하고 뚜렸해졌음을 느낄 수 있다.(나만 그렇게 느끼는 건가?;;;)


+ 테두리선이 그려진 구글맵(왼쪽)과 테두리선이 없는 구글맵(오른쪽)



<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d607.1774174834052!2d130.40442034406652!3d33.59312425246282!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x686cca1ac34ca0bb!2z7J207LmY656AIOuzuOyCrOy0neuzuOygkA!5e0!3m2!1sko!2skr!4v1478419360301" width="320" height="250" frameborder="0" style="border:1px #acacac solid" allowfullscreen=""></iframe>

+ 해당 주소링크를 불러오는 방법은 여기를 클릭


■ 위 주소링크에서 빨간색으로 표시한 부분을 수정/추가하면 삽입되는 구글맵의 크기 및 테두리선을 추가할 수 있다. "width"와 "height" 부분의 숫자를 수정하면 구글맵의 사이즈를 조정할 수 있으며, border부분의 "1px #acacac solid" 부분을 추가하면 테두리선을 추가할 수 있다. 여기서 1px 부분은 테두리선 굵기, #acacac는 색상을 나타낸다. ex) #acacac는 회색, black을 넣어도 된다.


댓글

Designed by JB FACTORY