[Google Map] Places search box 구글 자동완성을 이용한 위경도 값 가져오기

Open API/Google|2018.07.04 15:28

구글맵 위치정보를 활용한 

자동완성 기능을 적용시키는 샘플



구글의 정보는 정말 말로 할수없을 만큼 방대합니다.


그 중에서 맵데이터는 정말 놀라운데요.


기존에 장소(정확히는 도시별)별 위경도 값을 직접 데이터관리하던 부분을


구글 장소 검색 ( Places Search Box ) 기능으로 대체하게 되었습니다.


잘 구축된 API를 잘 가져다 쓰면 되기 때문에 참 편하죠.


자동완성의 반응속도도 빠르고 나름 직접 관리하는 것보다 정확하기 때문에 


여러모로 유용할것같습니다.


실제로 구현 하는 경우에는 가장 하단에 Js 참조할때 key 값을 입력해야합니다.


https://maps.googleapis.com/maps/api/js?key=여기에키값입력&libraries=places&callback=initAutocomplete

가져온 데이터에서 위경도 값을 읽어오는 부분은 
 

// place 에서 위경도 값을 읽어올 수 있음. 


▲  이라고 주석이 달린 부분을 참고하시면 될것같습니다.








◎ 실제로 구글 API의 Response값을 체크해서 데이터를 확인해보겠습니다. ( 크롬기준 )




1. 샘플 페이지를 열어서 F12를 눌러 개발자 도구를 실행하고 Network 탭으로 이동

그리고 키워드 검색을 통해 자동완성목록이 보여지는것을 확인.

그와 동시에 AutocompletionService.GetQueryPredictions 페이지를 호출하여 값을 가져옴.


(아래 이미지는 클릭하면 커집니다)




2. 목록 중 하나를 선택 했을 때 PlaceService.GetPlaceDetails 페이지를 호출하여 상세 정보를 가져옴.


(아래 이미지는 클릭하면 커집니다)



3. 해당 호출에 대한 Request


(아래 이미지는 클릭하면 커집니다)



4. 해당 호출에 대한 Response 데이터 , 이렇게 확인이 가능합니다.

실제로 Respons되는 데이터의 항목이 다양한데 이 또한 필요에 따라 활용이 가능할것같습니다.


(아래 이미지는 클릭하면 커집니다)





아래 코드의 99%는 


https://developers.google.com/maps/documentation/javascript/examples/places-searchbox


에서도 확인 하실 수 있습니다.



<!DOCTYPE html>
<html>

<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<title>Places Searchbox</title>
	<style>
		/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

		#map {
			height: 100%;
		}

		/* Optional: Makes the sample page fill the window. */

		html,
		body {
			height: 100%;
			margin: 0;
			padding: 0;
		}

		#description {
			font-family: Roboto;
			font-size: 15px;
			font-weight: 300;
		}

		#infowindow-content .title {
			font-weight: bold;
		}

		#infowindow-content {
			display: none;
		}

		#map #infowindow-content {
			display: inline;
		}

		.pac-card {
			margin: 10px 10px 0 0;
			border-radius: 2px 0 0 2px;
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			outline: none;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
			background-color: #fff;
			font-family: Roboto;
		}

		#pac-container {
			padding-bottom: 12px;
			margin-right: 12px;
		}

		.pac-controls {
			display: inline-block;
			padding: 5px 11px;
		}

		.pac-controls label {
			font-family: Roboto;
			font-size: 13px;
			font-weight: 300;
		}

		#pac-input {
			background-color: #fff;
			font-family: Roboto;
			font-size: 15px;
			font-weight: 300;
			margin-left: 12px;
			padding: 0 11px 0 13px;
			text-overflow: ellipsis;
			width: 400px;
		}

		#pac-input:focus {
			border-color: #4d90fe;
		}

		#title {
			color: #fff;
			background-color: #4d90fe;
			font-size: 25px;
			font-weight: 500;
			padding: 6px 12px;
		}

		#target {
			width: 345px;
		}
	</style>
</head>

<body> <input id="pac-input" class="controls" type="text" placeholder="Search Box">
	<div id="map"></div>
	<script>
		// This example adds a search box to a map, using the Google Place Autocomplete
		// feature. People can enter geographical searches. The search box will return a
		// pick list containing a mix of places and predicted search terms.
		// This example requires the Places library. Include the libraries=places
		// parameter when you first load the API. For example:
		// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
		function initAutocomplete() {
			var map = new google.maps.Map(document.getElementById('map'), {
				center: {
					lat: -33.8688,
					lng: 151.2195
				},
				zoom: 13,
				mapTypeId: 'roadmap'
			});
			// Create the search box and link it to the UI element.
			var input = document.getElementById('pac-input');
			var searchBox = new google.maps.places.SearchBox(input);
			map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
			// Bias the SearchBox results towards current map's viewport.
			map.addListener('bounds_changed', function() {
				searchBox.setBounds(map.getBounds());
			});
			var markers = [];
			// Listen for the event fired when the user selects a prediction and retrieve
			// more details for that place.
			searchBox.addListener('places_changed', function() {
				var places = searchBox.getPlaces();
				if (places.length == 0) {
					return;
				}
				// Clear out the old markers.
				markers.forEach(function(marker) {
					marker.setMap(null);
				});
				markers = [];
				// For each place, get the icon, name and location.
				var bounds = new google.maps.LatLngBounds();
				places.forEach(function(place) {
					if (!place.geometry) {
						console.log("Returned place contains no geometry");
						return;
					}

                                        // place 에서 위경도 값을 읽어올 수 있음. 
					console.log(place.geometry.location.lat());
					console.log(place.geometry.location.lng());

					var icon = {
						url: place.icon,
						size: new google.maps.Size(71, 71),
						origin: new google.maps.Point(0, 0),
						anchor: new google.maps.Point(17, 34),
						scaledSize: new google.maps.Size(25, 25)
					};
					// Create a marker for each place.
					markers.push(new google.maps.Marker({
						map: map,
						icon: icon,
						title: place.name,
						position: place.geometry.location
					}));
					if (place.geometry.viewport) {
						// Only geocodes have viewport.
						bounds.union(place.geometry.viewport);
					} else {
						bounds.extend(place.geometry.location);
					}
				});
				map.fitBounds(bounds);
			});
		}
	</script>
	<script src="https://maps.googleapis.com/maps/api/js?key=&libraries=places&callback=initAutocomplete" async defer></script>
</body>

</html>


댓글(0)

[Google API] 구글맵 v3 infoBox

Open API/Google|2016.12.14 23:13



구글맵 infoWindow 만으로는 html 사용에 제약이 많습니다.

디자인 소스 적용이 어렵기 때문입니다.


해결을 위해 플러그인이 제공되고 있습니다.

그 이름 " infoBox" !!


좀더 자유롭게 디자인 소스를 입힐 수 있는데요.


사용하기 위해서는 infobox.js 를 추가해야 합니다.

JS : 다운로드



샘플 코드 :   http://www.uhoon.co.kr/test/6502.html


** 기본 infoWindow에서는 불가능 했던 각종 옵션들이 무궁무진합니다. ** 


API Reference :  

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html


<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript">
	function initialize() {
		var secheltLoc = new google.maps.LatLng(49.47216, -123.76307);

		var myMapOptions = {
			 zoom: 15
			,center: secheltLoc
			,mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);


		var marker = new google.maps.Marker({
			map: theMap,
			draggable: true,
			position: new google.maps.LatLng(49.47216, -123.76307),
			visible: true
		});

		var boxText = document.createElement("div");
		boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
		boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";

		var myOptions = {
			 content: boxText
			,disableAutoPan: false
			,maxWidth: 0
			,pixelOffset: new google.maps.Size(-140, 0)
			,zIndex: null
			,boxStyle: { 
			  background: "url('tipbox.gif') no-repeat"
			  ,opacity: 0.75
			  ,width: "280px"
			 }
			,closeBoxMargin: "10px 2px 2px 2px"
			,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
			,infoBoxClearance: new google.maps.Size(1, 1)
			,isHidden: false
			,pane: "floatPane"
			,enableEventPropagation: false
		};

		google.maps.event.addListener(marker, "click", function (e) {
			ib.open(theMap, this);
		});

		var ib = new InfoBox(myOptions);

		ib.open(theMap, marker);
	}
</script>

<title>Creating and Using an InfoBox</title>
</head>
<body onload="initialize()">
	<div id="map_canvas" style="width: 100%; height: 400px"></div>
	<p>
	This example shows the "traditional" use of an InfoBox as a replacement for an InfoWindow.
</body>

</html>


댓글(0)

구글맵 v3 단순 다중 마커 (배열이용)

Open API/Google|2016.12.12 18:36

종종 단순 배열 마커가 필요한 

경우가 있을때 사용하기 위한 샘플입니다.


많은 기능이 들어간 샘플에서 기능 걷어내는것도 일인지라..


Test Url : http://www.uhoon.co.kr/test/6477.html



<!doctype html> <html> <head> <meta charset="utf-8" /> <title>googlemap v3 </title> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> </head> <SCRIPT LANGUAGE="JavaScript"> <!-- var contentArray = []; var iConArray = []; var markers = []; var iterator = 0; var markerArray = []; var map; // infowindow contents 배열 contentArray[0] = "Kay"; contentArray[1] = "uhoons blog"; contentArray[2] = "blog.uhoon.co.kr"; contentArray[3] = "blog.uhoon.co.kr "; contentArray[4] = "blog.uhoon.co.kr"; contentArray[5] = "blog.goodkiss.co.kr"; contentArray[6] = "GG"; contentArray[7] = "blog.goodkiss.co.kr"; contentArray[8] = "II"; contentArray[9] = "blog.goodkiss.co.kr"; // marker icon 배열 iConArray[0] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[1] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[2] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[3] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[4] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[5] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[6] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[7] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[8] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; iConArray[9] = "http://maps.google.com/mapfiles/ms/micons/yellow-dot.png"; // 위경도 배열 /* var markerArray = [ new google.maps.LatLng(40.3938,-3.7077) , new google.maps.LatLng(40.45038,-3.69803) , new google.maps.LatLng(40.45848,-3.69477) , new google.maps.LatLng(40.40672,-3.68327) , new google.maps.LatLng(40.43672,-3.62093) , new google.maps.LatLng(40.46725,-3.67443) , new google.maps.LatLng(40.43794,-3.67228) , new google.maps.LatLng(40.46212,-3.69166) , new google.maps.LatLng(40.41926,-3.70445) , new google.maps.LatLng(40.42533,-3.6844) ]; */ markerArray[0] = new google.maps.LatLng(40.3938,-3.7077); markerArray[1] = new google.maps.LatLng(40.45038,-3.69803); markerArray[2] = new google.maps.LatLng(40.45848,-3.69477); markerArray[3] = new google.maps.LatLng(40.40672,-3.68327); markerArray[4] = new google.maps.LatLng(40.43672,-3.62093); markerArray[5] = new google.maps.LatLng(40.46725,-3.67443); markerArray[6] = new google.maps.LatLng(40.43794,-3.67228); markerArray[7] = new google.maps.LatLng(40.46212,-3.69166); markerArray[8] = new google.maps.LatLng(40.41926,-3.70445); markerArray[9] = new google.maps.LatLng(40.42533,-3.6844); function initialize() { var mapOptions = { zoom: 11, mapTypeId: google.maps.MapTypeId.ROADMAP, center: new google.maps.LatLng(40.4167754,-3.7037901999999576) }; map = new google.maps.Map(document.getElementById('map'),mapOptions); for (var i = 0; i < markerArray.length; i++) { addMarker(); } } // 마커 추가 function addMarker() { var marker = new google.maps.Marker({ position: markerArray[iterator], map: map, draggable: false, icon: iConArray[iterator] }); markers.push(marker); var infowindow = new google.maps.InfoWindow({ content: contentArray[iterator] }); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); }); iterator++; } google.maps.event.addDomListener(window, 'load', initialize); //--> </SCRIPT> <body> <div id="map" style="width:760px;height:400px;margin-top:20px;"></div> </body> </html>


댓글(2)
  1. 2017.08.17 14:13 댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

구글맵 마커 + 말풍선 - v3

Open API/Google|2016.12.12 18:30

구글맵 V3 + 마커 샘플입니다.


일반적으로 기본 구글맵에서 가장 많이쓰는것이기도 한데요..


Test Url : http://www.uhoon.co.kr/test/4338/4338.html



<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>Info windows</title>
	<style>
		html,
		body,
		#map-canvas {
			height: 400px;
			width:600px;
			margin: 0px;
			padding: 0px
		}
	</style>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
	<script>
		function initialize() {
			var myLatlng = new google.maps.LatLng(37.55544,127.07590);		// 위경도 수정
			var mapOptions = {
				zoom: 17,
				center: myLatlng
			};

			var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

                        // 말풍선 내용 수정
			var contentString = '<div style="width:100px;height:50px;">군자동 주민센터</div>';		

			var infowindow = new google.maps.InfoWindow({
				content: contentString,
				size: new google.maps.Size(200,100)
			});

			var marker = new google.maps.Marker({
				position: myLatlng,
				map: map
			});
			google.maps.event.addListener(marker, 'click', function() {
				infowindow.open(map, marker);
			});
		}

		google.maps.event.addDomListener(window, 'load', initialize);
	</script>
</head>

<body>
	<div id="map-canvas"></div>
</body>

</html>

* Info Window :  https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple?hl=ko* Info Window Options : https://developers.google.com/maps/documentation/javascript/reference?hl=ko#InfoWindowOptions

댓글(0)

구글맵 v3 맵상에 보여지는 마커만 생성하기

Open API/Google|2016.12.12 18:27

개발 중 맵상에 수백 수만개의 마커를 생성해야하는 경우가 당연히(?) 발생됩니다.

이때 버버벅...리소스를 엄청나게 먹으면서 느려질수가 있는데요. 이럴 때 사용할수 있는 샘플입니다.


기존 구글맵 v3 - 마커 + 말풍선 + GPS 연동+ 원그리기 + 동적 마커 생성( Ajax + Json ) 소스에다가 추가했습니다.


현재 보여지는 맵상에 좌측상단 좌표와 우측하단 좌표를 읽어와서 해당 범위내에 있는 마커만 보여지도록 하고

맵이 확대/축소되거나 좌표가 이동하는 경우에 마커를 다시 뿌려지도록 하는 방법입니다.


기능 구현위주의 샘플이다보니 좀 다듬어야할 부분이 많지만 쓰시는분에게 떠넘기기를..^^;;

( 여기서 상황에 따라 고민해야할 내용으로... 이걸 Js에서 처리할지..DB에서 처리할지.. )



주요 내용으로는 :


1. 이벤트 리스너 추가를 통해 현재 맵 범위좌표 확인.  ( 하단 참고 Url을 보시면 관련 내용에 대한 링크가 있습니다. )


google.maps.event.addListener(map, 'idle', function(){
    startLat = map.getBounds().getSouthWest().lat();
    startLng = map.getBounds().getSouthWest().lng();
    endLat = map.getBounds().getNorthEast().lat();
    endLng = map.getBounds().getNorthEast().lng(); 
});


2. 마커 생성시 위경도 좌표를 비교하여 생성유무 확인.




참고 Url : https://developers.google.com/maps/documentation/javascript/reference

필요에 따라 이벤트 리스너를 추가해주시면 됩니다. 

샘플상에는 처음 로드 , 드래그 , 줌아웃 시에 좌표를 확인해여 재생성하도록 되어있습니다.

이벤트 리스너 추가시 서로 중첩되는 내용이 있는 경우 마커 생성 함수가 여러번 호출되어 더 느려질수 있습니다. 

고민+고민이 필요합니다.

댓글(0)

구글맵 v3 - 마커 + 말풍선 + GPS 연동+ 원그리기 + 동적 마커 생성( Ajax + Json )

Open API/Google|2016.12.12 18:19

메일로 어느분이 재미난 아이디어를 주셔서 만들어본 샘플인데 아마 가장 활용도가 높지 않을까 합니다.


기존 포스팅 했던 구글맵 아이콘 마커 + 말풍선 + 주소로 위경도 검색 + 거리별 원그리기 - v3 와 다른점은 

Ajax+Json 를 통해 동적 마커 생성이 가능하다는 점과 GPS 연동되는 부분이 추가되었다는 점입니다.

10원짜리 팁인 마커 삭제 버튼도 넣었습니다.

 

Test Url : http://www.uhoon.co.kr/test/3300.html



기능 요약 


- 구글맵 V3

- GPS 연동 현재 위치 표시

- 현재 위치 반경 원 그리기

- 현재 위치 마커를 제외한 마커 일괄 삭제

- Ajax를 통해 가져온 위치 데이터(json)를 동적으로 마커 생성.



간단히 말로 풀어서 기능설명을 하면 


Ajax를 통한 데이터 연동으로 지정범위내에 위치한 데이터를 뽑아내서 동적 마커 생성이 되는 기능이기 때문에

광범위한 부분에서 응용이 가능하리라 봅니다.


기본적으로 현재 위치(GPS) 값을 읽어와서 마커(남자사람아이콘)를 생성하고 10km 원을 그려줍니다.

그리고 Ajax를 통해 가져온 위경도 값 / 말풍선 내용으로 마커를 생성합니다.


삭제 버튼을 눌러 현재 위치를 제외한 마커를 삭제하기도하고 마커읽어오기를 통해 다시 불러오기도 합니다.

(마커 생성시 현재 위경도값은 새로 읽어옵니다.)


샘플 예제에서 Ajax로 가져온 위경도 데이터는 임의의 데이터를 가져오도록 하였으나 현재위치 및 반경 범위를 계산한 데이터를 가져와서 사용하는 등 

활용 방법은 정말 많을 것 같습니다!




댓글(0)

Google 웹사이트 번역기

Open API/Google|2016.11.30 10:23

구글 플러그인을 이용해서 내 블로그 , 웹사이트에 번역기능을 추가하는 방법입니다.



사이트 등록 및 스크립트 가져오는 방법 


1. 등록 Url : https://translate.google.com/manager/website/add




2. 플러그인 설정하기 .


 



3. 스크립트 얻기.




4. 등록 후 화면




 




5. 적용 화면.


 

댓글(0)

Google Places API를 이용한 주변 지역 정보 검색

Open API/Google|2016.11.22 16:39



간만에 구글 API를 보던 중 재미난 샘플이 있어서 살짝 들여다 봤습니다.. 맛만..;;

화면 ui 및 기능 정리가 잘되어있어서 활용 범위가 클것같습니다.

Google Places 대신 자체 디비를 사용해서 쓰게되도 멋질것 같다는 생각이 듭니다.

( 메인은 Google Places 인데...어째 딴 생각이 드네요.)



아직 자세히 보지는 못해서 조만간 뜯어보고 싶네요.

복합적인 기능이다 보니 좀 단순화시켜서 개별 샘플화 하기!!

당장 하고 싶지만 일은 해야 하니까요 ㅠㅠ


보면 볼수록 구글의 방대한 데이터는..후덜덜하네요


Test Url : http://www.uhoon.co.kr/test/2253.html



대략 적인 기능은 


지역명 자동완성 기능 - Autocomplete

좌표 이동시 getBounds() 를 이용하여 화면내에 위치한 마커만 표시

PlacesService 로 지역정보 검색 등등.....   


API Url : https://developers.google.com/places/?hl=ko


참고 Url : https://developers.google.com/maps/documentation/javascript/examples/place-search?hl=ko




2014.06.06 추가 내용 :


기본 검색에 대해서 

 : https://developers.google.com/places/documentation/search?hl=ko


 

검색키워드는... 

 : https://developers.google.com/places/documentation/supported_types?hl=ko








댓글(0)

Google API GeoRSS 피드에서 KmlLayer를 생성..." geoRSS 로 레이어 마커 찍기 "

Open API/Google|2016.11.22 16:35




GeoRss 포맷을 이용해서 레이어 마커를 생성하는 예제입니다..


TestUrl : http://www.uhoon.co.kr/test/1972.html


Google API Url : https://developers.google.com/maps/documentation/javascript/layers?hl=ko



용어 : 


* KML ( wiki 에서 : KMLViewer )
- 키홀 마크업 언어(Keyhole Markup Language, KML)은 구글 어스, 구글 지도 및 기타 응용 프로그램에 쓰이는 XML 기반의 마크업 언어 스키마이다.



*GeoRSS ( wiki 에서 : GeoRSSViewer )

- 위치를 인코딩하기위한 새로운 표준 웹 피드 





<!DOCTYPE html>
<html>

<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<title>GeoRSS Layers</title>
	<style type="text/css">
		html, body {
			height: 100%;
			margin: 0;
			padding: 0;
		}
		#map-canvas, #map_canvas {
			height: 100%;
		}
		@media print {
			html, body {
				height: auto;
			}
			#map-canvas, #map_canvas {
				height: 650px;
			}
		}
		#panel {
			position: absolute;
			top: 5px;
			left: 50%;
			margin-left: -180px;
			z-index: 5;
			background-color: #fff;
			padding: 5px;
			border: 1px solid #999;
		}
	</style>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
	<script>
		function initialize() {
			var myLatlng = new google.maps.LatLng(49.496675, -102.65625);
			var mapOptions = {
				zoom: 4,
				center: myLatlng,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			}
			var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
			var georssLayer = new google.maps.KmlLayer({
				url: 'http://www.uhoon.co.kr/test/1972/georss.xml'
			});
			georssLayer.setMap(map);
		}
		google.maps.event.addDomListener(window, 'load', initialize);
	</script>
</head>

<body>
	<div id="map-canvas"></div>
</body>

</html>


댓글(0)

Google API 구글맵 API 적용범위 (Google Maps API Coverage)

Open API/Google|2016.11.22 16:32




Google Maps API Coverage


* Countries

- 국가/도시/맵타일

- 지오코딩/스트릿뷰

- 트래픽/드라이빙/비지니스리스팅/도메인/바이킹


* Languages

v2 , v3 버전별 지원 언어 및 코드

 

링크 : https://spreadsheets.google.com/pub?key=p9pdwsai2hDMsLkXsoM05KQ&gid=1


댓글(0)