在Google Jquery Map UI中制作自定义平移

Question

我正在使用Google Map Api。所以我使用Jquery Google Map API来获取Map的东西：

<div id="map_canvas"></div>

<button id='btnRight'>Right</button>
<button id='btnLeft'>Left</button>
<button id='btnUp'>Up</button>
<button id='btnDown'>Down</button>
.
.
.
.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.js'></script>
<script type="text/javascript" src="../ui/jquery.ui.map.js"></script>

<script>
    $(function() {
        var map=$('#map_canvas').gmap({
            'center' : '57.7973333,12.0502107',
            'scrollwheel' : false,
            'zoom' : 10,
            'disableDefaultUI' : false
        });

        $('#btnRight').on('click',function(){
           //map should move to some pixels to right as it moves when we press right arrow 
           //in the navigation pan of the google map.I attached the image
        });

        //similar behaviour for left,down and up buttons
        //the work of these 4 buttons are similar to the 4 direction of the 
        //navigation pan that comes with the default ui of google maps

    });
</script>

我尝试了很多但是没有成功，请任何人对此有所了解 谢谢 ANKUR