Custom Zoom Control

// CUSTOM ZOOM
function ZomControl(controlDiv, map) {
  controlDiv.style.padding = '5px';
  var controlUI = document.createElement('div');

  controlUI.style.backgroundColor = 'white';
  controlUI.style.borderStyle = 'solid';
  controlUI.style.borderWidth = '1px';
  controlUI.style.borderColor = 'rgba(0, 0, 0, 0.14902)';
  controlUI.style.boxShadow = '0 1px 4px -1px rgba(0,0,0,0.298039)';
  controlUI.style.cursor = 'pointer';
  controlUI.style.textAlign = 'center';
  controlUI.title = 'Click to Zoom';
  controlDiv.appendChild(controlUI);

  // Set CSS for the control interior.
  var controlTextIn = document.createElement('div');
  controlTextIn.style.fontFamily = 'Roboto, sans-serif';
  controlTextIn.style.fontSize = '22px';
  controlTextIn.style.fontWeight = '400';
  controlTextIn.style.paddingTop = '6px';
  controlTextIn.style.paddingBottom = '3px';
  controlTextIn.style.paddingLeft = '6px';
  controlTextIn.style.paddingRight = '6px';
  controlTextIn.style.borderBottom = '1px solid #eee';
  controlTextIn.style.color = 'rgb(86, 86, 86)';
  controlUI.style.boxShadow = 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;';
  controlTextIn.id = "controlTextIn";

  var controlTextOut = document.createElement('div');
  controlTextOut.style.fontFamily = 'Roboto, sans-serif';
  controlTextOut.style.fontWeight = '400';
  controlTextOut.style.fontSize = '18px';
  controlTextOut.style.paddingTop = '3px';
  controlTextOut.style.paddingBottom = '6px';
  controlTextOut.style.paddingLeft = '6px';
  controlTextOut.style.paddingRight = '6px';
  controlTextOut.style.color = 'rgb(86, 86, 86)';
  controlTextOut.id = "controlTextOut";

  controlTextIn.innerHTML = '＋';
  controlTextOut.innerHTML = '―';

  controlUI.appendChild(controlTextIn);
  controlUI.appendChild(controlTextOut);

	google.maps.event.addDomListener(controlUI, 'mouseover', function(event) {
	  controlTextIn.style.fontWeight = '500';
	  controlTextIn.style.color = '#000';
	  //controlUI.style.backgroundColor = '#eee';
	 });
	google.maps.event.addDomListener(controlUI, 'mouseout', function(event) {
	  controlUI.style.backgroundColor = '#fff';
	  controlTextIn.style.fontWeight = '400';
	  //controlTextIn.style.color = 'rgb(86, 86, 86)';
	 });

 google.maps.event.addDomListener(controlTextOut, 'click', function() {
   var currentZoomLevel = map.getZoom();
   if(currentZoomLevel != 0){
     map.setZoom(currentZoomLevel - 1);}
  });

   google.maps.event.addDomListener(controlTextIn, 'click', function() {
   var currentZoomLevel = map.getZoom();
   if(currentZoomLevel != 21){
     map.setZoom(currentZoomLevel + 1);}
  });

}

var zomControlDiv = document.createElement('div');
var zomControl = new ZomControl(zomControlDiv, map);

zomControlDiv.index = 1;
map.controls[google.maps.ControlPosition.RIGHT_TOP].push(zomControlDiv);