Google Maps Api v3: How to add custom zoom controls

by Roman

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="map-canvas"></div>

CSS

html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
}

JavaScript

var map;
var adler = new google.maps.LatLng(43.403691,39.953542);

/**
 * The ZoomControl adds +/- button for the map
 *
 */

function ZoomControl(controlDiv, map) {
  
  // Creating divs & styles for custom zoom control
  controlDiv.style.padding = '5px';

  // Set CSS for the control wrapper
  var controlWrapper = document.createElement('div');
  /*/
  controlWrapper.style.backgroundColor = 'white';
  controlWrapper.style.borderStyle = 'solid';
  controlWrapper.style.borderColor = 'gray';
  controlWrapper.style.borderWidth = '1px';
  controlWrapper.style.cursor = 'pointer';
  controlWrapper.style.textAlign = 'center';
  controlWrapper.style.width = '32px'; 
  controlWrapper.style.height = '64px';
  //*/
  controlDiv.appendChild(controlWrapper);
  
  // Set CSS for the zoomIn
  var zoomInButton = document.createElement('div');
  zoomInButton.innerHTML = '+';
  zoomInButton.style.fontSize = '28px';
  zoomInButton.style.fontStyle = 'bold';
  zoomInButton.style.textAlign = 'center';
  zoomInButton.style.width = '32px'; 
  zoomInButton.style.height = '32px';
  zoomInButton.style.padding = '10px';
  zoomInButton.style.borderRadius = '32px';
  /* Change this to be the .png image you want to use */
  ///zoomInButton.style.backgroundImage = 'url("http://placehold.it/32/00ff00")';
  zoomInButton.style.backgroundColor = 'white';
  controlWrapper.appendChild(zoomInButton);
    
  // Set CSS for the zoomOut
  var zoomOutButton = document.createElement('div');
  zoomOutButton.innerHTML = '&ndash;';
  zoomOutButton.style.fontSize = '28px';
  zoomOutButton.style.fontStyle = 'bold';
  zoomOutButton.style.textAlign = 'center';
  zoomOutButton.style.width = '32px'; 
  zoomOutButton.style.height = '32px';
  zoomOutButton.style.padding = '10px';
  zoomOutButton.style.borderRadius = '32px';
  /* Change this to be the .png image you want to use */
  ///zoomOutButton.style.backgroundImage = 'url("http://placehold.it/32/0000ff")';
  zoomOutButton.style.backgroundColor = 'white';
 ...