Replacing Default Controls

by rhavelka

HTML

<div id="map"></div>
<!-- Hide controls until they are moved into the map. -->
<div style="display:none">
  <div class="controls zoom-control">
    <button class="zoom-control-in" title="Zoom In">+</button>
    <button class="zoom-control-out" title="Zoom Out">−</button>
  </div>
</div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.controls {
  font-size: 28px;  /* this adjusts the size of all the controls */

  background-color: white;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
  box-sizing: border-box;
  border-radius: 2px;
  cursor: pointer;
  font-weight: 300;
  height: 1em;
  margin: 6px;
  text-align: center;
  user-select: none;
  padding: 2px;
  width: 1em;
}
.controls button {
  border: 0;
  background-color: white;
  color: rgba(0, 0, 0, 0.6);
}
.controls button:hover {
  color: rgba(0, 0, 0, 0.9);
}

.controls.zoom-control {
  display: flex;
  flex-direction: column;
  height: auto;
}
.controls.zoom-control button {
  font: 0.85em Arial;
  margin: 1px;
  padding: 0;
}

.gm-svpc {
  margin: 6px !important;
  font-size: 28px;  /* this adjusts the size of all the controls */
  left: 10px !important;
  height: 1em !important;
  width: 1em !important;
}

.gm-svpc img {
    font-size: 24px;  /* this adjusts the size of all the controls */
  height: 1em !important;
  width: 1em !important;
  left: -12px !important;
  top: -12px !important;

}

JavaScript

var map;
function initMap() {
  map = new google.maps.Map(document.querySelector('#map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8,
    disableDefaultUI: true,
    streetViewControl: true
  });

  initZoomControl(map);
  initMapTypeControl(map);
}

function initZoomControl(map) {
  document.querySelector('.zoom-control-in').onclick = function() {
    map.setZoom(map.getZoom() + 1);
  };
  document.querySelector('.zoom-control-out').onclick = function() {
    map.setZoom(map.getZoom() - 1);
  };
  map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(
      document.querySelector('.zoom-control'));
}