[Gmap3] 1. 시작하기
gmap3
최근 그 편리함으로 주목받고 있는 jQuery에서 Google Maps를 손쉽게 넣을 수 있는 gmap3를 소개합니다. 적은 시간이나마 써본 느낌으로는 원래 Google Maps API V3를 사용하지 않던 사람이 사용하기에도 편리하며, 사용하던 사람이라면 더 강력하게 사용할 수 있을 것 같습니다. 단점으로는 부족한 감이 있는 공식 문서를 꼽겠습니다.
아래 내용은 gmap3를 이용하여 페이지에 삽입하기 위한 글로 gmap3의 사이트 내의 Getting started의 내용을 편집하여 작성되었습니다.
준비
당연하게도 jQuery와 Google Maps의 스크립트를 먼저 삽입해야 합니다.
|
1 2 |
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"> |
그리고 gmap3 스크립트를 넣습니다.
|
1 |
<script type="text/javascript" src="/admin/gmap3.min.js"></script> |
이제 사용할 준비가 끝났습니다.
실행
페이지 소스에 div 객체를 하나 생성합니다. 주의할 점은 이 div 객체에 width와 height를 미리 지정해줘야 한다는 점입니다. gmap3가 아닌 Google Maps 자체가 그렇게 동작하기 때문인데, 미리 지정하지 않으면 화면에 지도가 보이지 않습니다. 특히나 width는 % 단위로도 지정할 수 있지만 height는 CSS 특성상 % 단위로 잘 지정되지 않으니 주의하여야 합니다.
|
1 2 3 |
<div id="my_map"></div> #my_map { width: 350px; height: 600px ; } |
그리고 스크립트에서 아래를 실행합니다.
|
1 |
$("#my_map").gmap3(); |
이 단 한줄이면 당장 Google Maps를 화면에서 볼 수 있습니다.
jQuery와의 조합
jQuery 스타일로 실행하면서 아래와 같이 옵션을 추가할 수도 있습니다.
|
1 2 |
$("#my_map").width("600px").height("350px").gmap3() ; $("#my_map").show().gmap3().css('border', '1px solid #000000') ; |
다중 실행
jQuery Selector를 통해 여러 객체를 선택하면 여러개의 Google Maps가 손쉽게 생성됩니다.
|
1 2 3 4 5 |
<div id="test1" class="gmap3"></div> <div id="test2" class="gmap3"></div> <div id="test3" class="gmap3"></div> #(".gmap3").gmap3() ; |
마무리
단 몇줄의 코드로 Google Maps를 삽입하는 jQuery 플러그인인 gmap3를 간단히 살펴보았습니다. 다음 문서에는 gmap3의 다양한 기능을 이용하는 방법을 소개하고자 합니다.