Skip to content

Instantly share code, notes, and snippets.

@knomepasi
Last active July 4, 2017 22:47
Show Gist options
  • Save knomepasi/aaeca1bd3b7499300f87ab072581858a to your computer and use it in GitHub Desktop.
Save knomepasi/aaeca1bd3b7499300f87ab072581858a to your computer and use it in GitHub Desktop.
Pan controls for Google Maps JS API v2.34+
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 );
.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 );
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment