[자바스크립트] Google Map API 소개 (2) -전문가 용

개발 노트/Javascript  2012.09.14 13:48



 

안녕하세요 개발자 명월입니다.

 

저번 포스팅에 이어서 설명 하도록 하겠습니다.

 

구글 Api Reference : https://developers.google.com/maps/documentation/javascript/reference?hl=ko#LatLng

 

레퍼런스를 보면 영어로 설명되어있기 하지만 차근차근 읽어 보면 어렵지 않으니 읽고 사용하시기를 권장합니다.

그래도 포스팅을 해야 하니 간략하게 소개 하도록하겠습니다.

 

구글 맵 API는 변수, 메소드, 이벤트, 오버레이(?) 로 이루어져 있습니다. 변수는 말그대로 변수이고 메소드는 해당 맵에 동적인 변화를 주기 위한 함수이고 이벤트는 동적인 변화가 일어났을때 Callback 하는 함수이니다. 마지막으로 오버레이는 마커라고 생각하시는게 더 편할 듯 싶습니다.

 

먼저 옵션 변수를 확인 해 보면

zoom        - 줌 레벨을 나타냅니다 0~21 까지 있습니다.

center       - 맵의 중앙의 좌표 입니다. LatLng 로 나타냅니다.

(※ LatLng는 국제 표준 위경도 좌표계입니다. 네이버, 다음도 이 표준을 사용합니다.)

mapTypeId - 맵의 표현 형태입니다. 가장 많이 사용하는 ROADMAP 로드맵, SATELLITE 위성, TERRAIN 지형, HYBRID 혼합형입니다.

mapMaker - 맵에 마커를 사용할 여부 입니다.

zoomControl - 줌 컨트롤 패널을 사용 할 여부입니다.

streetViewControl - 로드뷰 전환 패널 사용 할 여부 입니다.

disableDoubleClickZoom - 더블 클릭 줌을 사용할 여부입니다.

draggable  - 드래그 이동이 가능할 지 여부입니다.
scrollwheel - 휠 확대, 축소를 사용할 여부입니다.
mapTypeControl - 맵타입 변환 컨트롤 사용할 여부입니다.
scaleControl - 확대 컨트롤 패널 사용 여부입니다.
rotateControl - 회전 컨트롤 패널 사용 여부 입니다.
panControl - 이동 컨트롤 패널 사용여부 입니다.

 

 

 

이 밖에 변수는 엄청 많이 있으나 가장 많이 사용하는 변수만 뽑아 봤습니다. 더 추가 하실 내용이 있으면 레퍼런스 참고하길 바랍니다.

 

이번엔 매소드 입니다.

getCenter() - 현재 위치를 반환합니다.

getZoom()  - 현재 줌 레벨을 반환합니다.

 

 

 

이벤트 영역입니다.

이벤트는 center_changed 과 zoom_changed 컨트롤 이있습니다.

이 부분은 setTimeout 합수와 리스너를 혼합하여 작성합니다.

예를 들면

 

window.onload= function(){

   google.maps.event.addListener(map,'zoom_changed',function(){
      setTimeout(zoom_changed_event,100);
   });

}

function zoom_changed_event(){
  var _data = map.getZoom();
  document.getElementById('zoom_txt').value = _data;
 }

 

 

마커영역입니다.

 

var marker = new google.maps.Marker({
   position : 마커 위치 (LatLng 위경도)
   map : 선언한 map 변수

   title : 마커 이름

  });

 

역시 막상 사용하면 쉽게 이해가 되나 설명이 어렵습니다.

예제 코드입니다.

 

  1 <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
  2 <script type="text/javascript">
  3 var map ;
  4 var myOptions;
  5 var O_mapMaker = false;
  6 var O_zoomControl = false;
  7 var O_streetViewControl = false;
  8 var O_disableDoubleClickZoom = false;
  9 var O_draggable = false;
10 var O_scrollwheel = false;
11 var O_mapTypeControl = false;
12 var O_scaleControl = false;
13 var O_rotateControl = false;
14 var O_panControl = false;
15 var O_center = new google.maps.LatLng(37.6098098499088, 127.02985600018314);
16 var O_zoom = 18;
17 window.onload = function() {
18 initialize();
19
20 display_button("mapMaker", "Map Marker");
21 if(O_mapMaker){buttoncolor("mapMaker","1");}else{buttoncolor("mapMaker","2");}
22
23 display_button("zoomControl", "Zoom Panel");
24 if(O_zoomControl){buttoncolor("zoomControl","1");}else{buttoncolor("zoomControl","2");}
25
26 display_button("streetViewControl", "StreetView Control");
27 if(O_streetViewControl){buttoncolor("streetViewControl","1");}else{buttoncolor("streetViewControl","2");}
28
29 display_button("disableDoubleClickZoom", "DoubleClick Zoom");
30 if(O_disableDoubleClickZoom){buttoncolor("disableDoubleClickZoom","1");}else{buttoncolor("disableDoubleClickZoom","2");}
31
32 display_button("draggable", "Drag Move");
33 if(O_draggable){buttoncolor("draggable","1");}else{buttoncolor("draggable","2");}
34
35 display_button("scrollwheel", "Wheel Use");
36 if(O_scrollwheel){buttoncolor("scrollwheel","1");}else{buttoncolor("scrollwheel","2");}
37
38 display_button("mapTypeControl", "MapType Control");
39 if(O_mapTypeControl){buttoncolor("mapTypeControl","1");}else{buttoncolor("mapTypeControl","2");}
40
41 display_button("scaleControl", "Scale Control");
42 if(O_scaleControl){buttoncolor("scaleControl","1");}else{buttoncolor("scaleControl","2");}
43
44 display_button("rotateControl", "Rotate Control");
45 if(O_rotateControl){buttoncolor("rotateControl","1");}else{buttoncolor("rotateControl","2");}
46
47 display_button("panControl", "Pan Control");
48 if(O_panControl){buttoncolor("panControl","1");}else{buttoncolor("panControl","2");}
49 }
50 function buttonclick(obj){
51 var id = obj.id.substr(0,obj.id.length-1);
52 var id_result = obj.id.substr (obj.id.length-1,1);
53 O_zoom = map.getZoom();
54 O_center = map.getCenter();
55 switch(id){
56 case "mapMaker" :  O_mapMaker = buttoncolor(id,id_result); break;
57 case "zoomControl" : O_zoomControl = buttoncolor(id,id_result); break;
58 case "streetViewControl" : O_streetViewControl = buttoncolor(id,id_result); break;
59 case "disableDoubleClickZoom" : O_disableDoubleClickZoom = buttoncolor(id,id_result); break;
60 case "draggable" : O_draggable = buttoncolor(id,id_result); break;
61 case "scrollwheel" : O_scrollwheel = buttoncolor(id,id_result); break;
62 case "mapTypeControl" : O_mapTypeControl = buttoncolor(id,id_result); break;
63 case "scaleControl" : O_scaleControl = buttoncolor(id,id_result); break;
64 case "rotateControl" : O_rotateControl = buttoncolor(id,id_result); break;
65 case "panControl" : O_panControl = buttoncolor(id,id_result); break;
66 }
67 map.setOptions(optionSetting()) ;
68
69 }
70 function initialize() {
71 myOptions  = optionSetting(); 
72 map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
73
74 google.maps.event.addListener(map,'center_changed',function(){
75 setTimeout(center_changed_event,100);
76 });
77 google.maps.event.addListener(map,'zoom_changed',function(){
78 setTimeout(zoom_changed_event,100);
79 });
80 }
81 function zoom_changed_event(){
82 var _data = map.getZoom();
83 document.getElementById('zoom_txt').value = _data;
84 }
85 function center_changed_event(){
86 var _data = map.getCenter();
87 document.getElementById('lat_txt').value=_data.lat();
88 document.getElementById('lng_txt').value=_data.lng();
89 }
90 function optionSetting(){
91 var data = {      
92 zoom: O_zoom,      
93 center:  O_center,      
94 mapTypeId: google.maps.MapTypeId.ROADMAP,
95 mapMaker : O_mapMaker,
96 zoomControl : O_zoomControl,
97 streetViewControl : O_streetViewControl,
98 disableDoubleClickZoom : O_disableDoubleClickZoom,
99 draggable  : O_draggable,
100 scrollwheel : O_scrollwheel,
101 mapTypeControl : O_mapTypeControl,
102 scaleControl : O_scaleControl,
103 rotateControl : O_rotateControl,
104 panControl : O_panControl
105 };
106 return data;
107 }
108
109 function buttoncolor(id,id_result){
110 var getvalue;
111 if(id_result == "1"){
112 document.getElementById(id+"1").style.color = "#fff";
113 document.getElementById(id+"1").style.backgroundColor = "#000";
114 document.getElementById(id+"2").style.color = "#000";
115 document.getElementById(id+"2").style.backgroundColor = "#fff";
116 getvalue = true;
117 }else{
118 document.getElementById(id+"1").style.color = "#000";
119 document.getElementById(id+"1").style.backgroundColor = "#fff";
120 document.getElementById(id+"2").style.color = "#fff";
121 document.getElementById(id+"2").style.backgroundColor = "#000";
122 getvalue = false;
123 }
124 return getvalue;
125 }
126 function display_button(div_id,div_name){
127 var div = document.createElement('div');
128 div.id = div_id;
129 document.getElementById("pannel").appendChild(div);
130 document.getElementById(div_id).innerHTML += "<table cellpadding=1 cellspacing=0 border=0 width=250px><tr><td><SPAN style='font-size:13px'>"+div_name+ "</SPAN></td><td width=100px>" + "<input id='"+div_id+"1' type=button value=On style='border-style:solid;border-color:#000;background-color:#000;color:#FFF;width:50px;' onclick='buttonclick(this)' ><input id='"+div_id+"2' type=button value=Off style='border-style:solid;border-color:#000;background-color:#FFF;color:#000;width:50px;' onclick='buttonclick(this)'></td></table>";
131 }
132 var markersArray = [];
133 function check_marker(){
134 var marker = new google.maps.Marker({
135 position : map.getCenter(),
136 map : map,
137 title : map.getCenter()+''
138 });
139 markersArray.push(marker);
140 }
141 function clear_marker(){
142 if(markersArray){
143 for(i in markersArray){
144 markersArray[i].setMap(null);
145 }
146 }
147 }
148 </script>
149 <table cellpadding=0 cellspacing=0 border=0>
150 <tr>
151 <td>
152 <div id="map_canvas" style="width:300px;height:300px;"></div>
153 </td>
154 <td>&nbsp;&nbsp;</td>
155 <td>
156 <div id="pannel"></div>
157 </td>
158 </tr>
159 <tr>
160 <td colspan=3>
161 <table cellpadding=0 cellspacing=0 border=0>
162 <tr>
163 <td>
164 <table cellpadding=0 cellspacing=0 border=0>
165 <tr><td style='font-size:13px' align=center>Lat</td><td width=20px></td><td><input type=text id=lat_txt style='border-style:solid;border-color:#000;width:120px'></td></tr>
166 <tr><td style='font-size:13px' align=center>Lng</td><td width=20px></td><td><input type=text id=lng_txt style='border-style:solid;border-color:#000;width:120px'></td></tr>
167 <tr><td style='font-size:13px' align=center>Zoom</td><td width=20px></td><td><input type=text id=zoom_txt style='border-style:solid;border-color:#000;width:120px'></td></tr>
168 </table>
169 </td>
170 <td width=10px>
171 </td>
172 <td>
173 <table cellpadding=0 cellspacing=0 border=0>
174 <tr><td><input type="button" value="Makking" onclick="check_marker()" style='border-style:solid;border-color:#000;width:100px;'></td></tr>
175 <tr><td height=10px></td></tr>
176 <tr><td align='center'><input type="button" value="Clear" onclick="clear_marker()" style='border-style:solid;border-color:#000;width:100px;'></td></tr>
177 </table>
178 </td>
179 </tr>
180 </table>
181 </td>
182 </tr>
183 </table>
184
185


제가 이해 하기 쉽게 만들어 봤습니다.

 

 

Tistory에 직접 적용해 보았습니다.

 

 

Lat
Lng
Zoom

 

사용방법은 옆에 On, Off 로 컨트롤 패널 조종 할 수 있습니다. Marking 으로 마킹 테스트 까지 확인 하겠습니다.

 

소스는 긁어오기가 안되는 관계로 첨부하겠습니다

 

google_map_api.html

 


댓글 0개가 달렸습니다.
댓글쓰기