제이쿼리 예제 2개. 구글맵 gps, 키바인딩 (jQuery Googlemap, key)

제이쿼리 예제 2개. 구글맵 gps, 키바인딩 (jQuery Googlemap, key)

1. 제이쿼리 + 구글맵을 활용한 GPS

참조 - What is jQuery GPS [클릭]

소스 - gps_jquery.zip [클릭]

구글맵을 자신의 웹 사이트에 추가하면, 어쩔 수 없이 페이지 로딩 속도 등 전반적인 퍼포먼스가 증가해 느려지고 맙니다.

[제이쿼리 예제 2개. 구글맵 gps, 키바인딩 (jQuery Googlemap, key)]

그래서 제이쿼리 구글맵 GPS는 하나의 해결책이 될 수 있습니다. 가볍고 쉽게 구동이 되며, 그래픽 이미지 등도 로드가 가능합니다. 게다가 이 소스는 오픈되어 있어서 다운도 받아서 사용할 수 있지요.

2. 제이쿼리 + 라이브러리를 이용한 KeyBinding

참조 - Javascript Char Codes (Key Codes) [클릭]

제이쿼리를 통해 Input Box에서 상하를 향하는 키를 눌러서 내부적으로 Input Box의 커서와 포커스를 이동하는 소스입니다.

(Up: keycode 38, Down: keycode: 40)

var inputs = $(':input').keydown(function(e){
    if (e.which == 40) {
        e.preventDefault();
 
        var nextInput = inputs.get(inputs.index(this) + 1);
 
        if (nextInput) {
            nextInput.focus();
        }
    } else if(e.which == 38) {
        e.preventDefault();
 
        var nextInput = inputs.get(inputs.index(this) - 1);
 
        if (nextInput) {
            nextInput.focus();
        }
    }
});
 

우선, 테스트 사이트(링크 깨짐)를 접속해서 방향키로 Input Box간에 이동이 되는지 확인해 보세요. 그리고 이 기능을 응용하기 위해서 자바스크립트에서 제공하는 Char형 코드값을 먼저 확인해 봐야 합니다.

제이쿼리 예제 2개. 구글맵 gps, 키바인딩 (jQuery Googlemap, key)