Pan controls for Google Maps JS API v2.34+

script.js

var panControl = document.createElement( 'div' );
panControl.className = 'panControls';

var directions = ['North', 'West', 'East', 'South'];
var pan = [];
directions.forEach( function( item ) {
    pan[item] = document.createElement( 'div' );
    pan[item].className = 'panControl ' + item;
    pan[item].innerHTML = '<img src="pan_arrow.png" />';
    // Uncomment the row below if you prefer a base64-encoded image embedded into the script
    // pan[item].innerHTML = '<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACESURBVDiN7dLNCcJAEIbhB81N0oDJyR48BezDu3YgpKdAGhGswhL8ucaDK0oggay5KHnhY5aBeZmBZeL/mXf0E2yxwiXkK/ZoPnJGjRJZjLDArSV9pYzdcoENDqhwDcI6Vtim8j6/k9kA4THUHMsxhbAeQ3jCPbzTAXO9FNh5/tOJX+EBNEAZmqxmbPYAAAAASUVORK5CYII=" />';
    panControl.appendChild( pan[item] );
} );

var panAmount = 50;
pan['North'].addEventListener( 'click', function( ) {
    map.panBy( 0, -panAmount );
} );
pan['West'].addEventListener( 'click', function( ) {
    map.panBy( -panAmount, 0 );
} );
pan['East'].addEventListener( 'click', function( ) {
    map.panBy( panAmount, 0 );
} );
pan['South'].addEventListener( 'click', function( ) {
    map.panBy( 0, panAmount );
} );

map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push( panControl );

style.css

.panControls {
    position: relative;
    margin: 10px 20px;
    text-align: center;
    width: 40px;
    height: 40px;

    background-color: #fff;
    box-shadow: 0px 1px 4px -1px rgba( 0, 0, 0, 0.3 );
    border-radius: 2px;

    transform: rotate(-45deg);
}
    .panControls .panControl {
        width: 20px;
        height: 20px;
        -moz-user-select: none;
        cursor: pointer;
    }
        .panControl {
            position: absolute;
        }
            .panControl img {
                opacity: 0.6;
            }
                .panControl:active img {
                    opacity: 1;
                }
            .panControl.North {
                top: 0;
                left: 20px;
            }
            .panControl.West {
                top: 0;
                left: 0;
            }
                .panControl.West img {
                    transform: rotate( -90deg );
                }
            .panControl.East {
                top: 20px;
                left: 20px;
            }
                .panControl.East img {
                    transform: rotate( 90deg );
                }
            .panControl.South {
                top: 20px;
                left: 0;
            }
                .panControl.South img {
                    transform: rotate( -180deg );
    }