구글 플러그인을 이용해서 내 블로그 , 웹사이트에 번역기능을 추가하는 방법입니다.
사이트 등록 및 스크립트 가져오는 방법
1. 등록 Url : https://translate.google.com/manager/website/add
2. 플러그인 설정하기 .
3. 스크립트 얻기.
4. 등록 후 화면
5. 적용 화면.
간만에 구글 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
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 에서 : KML )
- 키홀 마크업 언어(Keyhole Markup Language, KML)은 구글 어스, 구글 지도 및 기타 응용 프로그램에 쓰이는 XML 기반의 마크업 언어 스키마이다.
*GeoRSS ( wiki 에서 : GeoRSS )
- 위치를 인코딩하기위한 새로운 표준 웹 피드
<!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>
