It's the 15th anniversary of Google Maps Platform - Check out the latest news and announcements

Replacing Default Controls

Read the documentation.

JavaScript

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

  initZoomControl(map);
  initMapTypeControl(map);
  initFullscreenControl(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")
  );
}

function initMapTypeControl(map) {
  var mapTypeControlDiv = document.querySelector(".maptype-control");
  document.querySelector(".maptype-control-map").onclick = function() {
    mapTypeControlDiv.classList.add("maptype-control-is-map");
    mapTypeControlDiv.classList.remove("maptype-control-is-satellite");
    map.setMapTypeId("roadmap");
  };
  document.querySelector(".maptype-control-satellite").onclick = function() {
    mapTypeControlDiv.classList.remove("maptype-control-is-map");
    mapTypeControlDiv.classList.add("maptype-control-is-satellite");
    map.setMapTypeId("hybrid");
  };

  map.controls[google.maps.ControlPosition.LEFT_TOP].push(mapTypeControlDiv);
}

function initFullscreenControl(map) {
  var elementToSendFullscreen = map.getDiv().firstChild;
  var fullscreenControl = document.querySelector(".fullscreen-control");
  map.controls[google.maps.ControlPosition.RIGHT_TOP].push(fullscreenControl);

  fullscreenControl.onclick = function() {
    if (isFullscreen(elementToSendFullscreen)) {
      exitFullscreen();
    } else {
      requestFullscreen(elementToSendFullscreen);
    }
  };

  document.onwebkitfullscreenchange = document.onmsfullscreenchange = document.onmozfullscreenchange = document.onfullscreenchange = function() {
    if (isFullscreen(elementToSendFullscreen)) {
      fullscreenControl.classList.add("is-fullscreen");
    } else {
      fullscreenControl.classList.remove("is-fullscreen");
    }
  };
}

function isFullscreen(element) {
  return (
    (document.fullscreenElement ||
      document.webkitFullscreenElement ||
      document.mozFullScreenElement ||
      document.msFullscreenElement) == element
  );
}
function requestFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.msRequestFullScreen) {
    element.msRequestFullScreen();
  }
}
function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.msCancelFullScreen) {
    document.msCancelFullScreen();
  }
}

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;
}

.gm-style .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;
}

.gm-style .controls button {
  border: 0;
  background-color: white;
  color: rgba(0, 0, 0, 0.6);
}

.gm-style .controls button:hover {
  color: rgba(0, 0, 0, 0.9);
}

.gm-style .controls.zoom-control {
  display: flex;
  flex-direction: column;
  height: auto;
}

.gm-style .controls.zoom-control button {
  font: 0.85em Arial;
  margin: 1px;
  padding: 0;
}

.gm-style .controls.maptype-control {
  display: flex;
  flex-direction: row;
  width: auto;
}

.gm-style .controls.maptype-control button {
  display: inline-block;
  font-size: 0.5em;
  margin: 0 1px;
  padding: 0 6px;
}

.gm-style
  .controls.maptype-control.maptype-control-is-map
  .maptype-control-map {
  font-weight: 700;
}

.gm-style
  .controls.maptype-control.maptype-control-is-satellite
  .maptype-control-satellite {
  font-weight: 700;
}

.gm-style .controls.fullscreen-control button {
  display: block;
  font-size: 1em;
  height: 100%;
  width: 100%;
}

.gm-style .controls.fullscreen-control .fullscreen-control-icon {
  border-style: solid;
  height: 0.25em;
  position: absolute;
  width: 0.25em;
}

.gm-style
  .controls.fullscreen-control
  .fullscreen-control-icon.fullscreen-control-top-left {
  border-width: 2px 0 0 2px;
  left: 0.1em;
  top: 0.1em;
}

.gm-style
  .controls.fullscreen-control.is-fullscreen
  .fullscreen-control-icon.fullscreen-control-top-left {
  border-width: 0 2px 2px 0;
}

.gm-style
  .controls.fullscreen-control
  .fullscreen-control-icon.fullscreen-control-top-right {
  border-width: 2px 2px 0 0;
  right: 0.1em;
  top: 0.1em;
}

.gm-style
  .controls.fullscreen-control.is-fullscreen
  .fullscreen-control-icon.fullscreen-control-top-right {
  border-width: 0 0 2px 2px;
}

.gm-style
  .controls.fullscreen-control
  .fullscreen-control-icon.fullscreen-control-bottom-left {
  border-width: 0 0 2px 2px;
  left: 0.1em;
  bottom: 0.1em;
}

.gm-style
  .controls.fullscreen-control.is-fullscreen
  .fullscreen-control-icon.fullscreen-control-bottom-left {
  border-width: 2px 2px 0 0;
}

.gm-style
  .controls.fullscreen-control
  .fullscreen-control-icon.fullscreen-control-bottom-right {
  border-width: 0 2px 2px 0;
  right: 0.1em;
  bottom: 0.1em;
}

.gm-style
  .controls.fullscreen-control.is-fullscreen
  .fullscreen-control-icon.fullscreen-control-bottom-right {
  border-width: 2px 0 0 2px;
}

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Replacing Default Controls</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./app.js"></script>
  </head>
  <body>
    <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 class="controls maptype-control maptype-control-is-map">
        <button class="maptype-control-map" title="Show road map">Map</button>
        <button
          class="maptype-control-satellite"
          title="Show satellite imagery"
        >
          Satellite
        </button>
      </div>
      <div class="controls fullscreen-control">
        <button title="Toggle Fullscreen">
          <div
            class="fullscreen-control-icon fullscreen-control-top-left"
          ></div>
          <div
            class="fullscreen-control-icon fullscreen-control-top-right"
          ></div>
          <div
            class="fullscreen-control-icon fullscreen-control-bottom-left"
          ></div>
          <div
            class="fullscreen-control-icon fullscreen-control-bottom-right"
          ></div>
        </button>
      </div>
    </div>
  </body>
</html>

All

<!DOCTYPE html>
<html>
  <head>
    <title>Replacing Default Controls</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <style type="text/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;
      }

      .gm-style .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;
      }

      .gm-style .controls button {
        border: 0;
        background-color: white;
        color: rgba(0, 0, 0, 0.6);
      }

      .gm-style .controls button:hover {
        color: rgba(0, 0, 0, 0.9);
      }

      .gm-style .controls.zoom-control {
        display: flex;
        flex-direction: column;
        height: auto;
      }

      .gm-style .controls.zoom-control button {
        font: 0.85em Arial;
        margin: 1px;
        padding: 0;
      }

      .gm-style .controls.maptype-control {
        display: flex;
        flex-direction: row;
        width: auto;
      }

      .gm-style .controls.maptype-control button {
        display: inline-block;
        font-size: 0.5em;
        margin: 0 1px;
        padding: 0 6px;
      }

      .gm-style
        .controls.maptype-control.maptype-control-is-map
        .maptype-control-map {
        font-weight: 700;
      }

      .gm-style
        .controls.maptype-control.maptype-control-is-satellite
        .maptype-control-satellite {
        font-weight: 700;
      }

      .gm-style .controls.fullscreen-control button {
        display: block;
        font-size: 1em;
        height: 100%;
        width: 100%;
      }

      .gm-style .controls.fullscreen-control .fullscreen-control-icon {
        border-style: solid;
        height: 0.25em;
        position: absolute;
        width: 0.25em;
      }

      .gm-style
        .controls.fullscreen-control
        .fullscreen-control-icon.fullscreen-control-top-left {
        border-width: 2px 0 0 2px;
        left: 0.1em;
        top: 0.1em;
      }

      .gm-style
        .controls.fullscreen-control.is-fullscreen
        .fullscreen-control-icon.fullscreen-control-top-left {
        border-width: 0 2px 2px 0;
      }

      .gm-style
        .controls.fullscreen-control
        .fullscreen-control-icon.fullscreen-control-top-right {
        border-width: 2px 2px 0 0;
        right: 0.1em;
        top: 0.1em;
      }

      .gm-style
        .controls.fullscreen-control.is-fullscreen
        .fullscreen-control-icon.fullscreen-control-top-right {
        border-width: 0 0 2px 2px;
      }

      .gm-style
        .controls.fullscreen-control
        .fullscreen-control-icon.fullscreen-control-bottom-left {
        border-width: 0 0 2px 2px;
        left: 0.1em;
        bottom: 0.1em;
      }

      .gm-style
        .controls.fullscreen-control.is-fullscreen
        .fullscreen-control-icon.fullscreen-control-bottom-left {
        border-width: 2px 2px 0 0;
      }

      .gm-style
        .controls.fullscreen-control
        .fullscreen-control-icon.fullscreen-control-bottom-right {
        border-width: 0 2px 2px 0;
        right: 0.1em;
        bottom: 0.1em;
      }

      .gm-style
        .controls.fullscreen-control.is-fullscreen
        .fullscreen-control-icon.fullscreen-control-bottom-right {
        border-width: 2px 0 0 2px;
      }
    </style>
    <script>
      (function(exports) {
        "use strict";

        function initMap() {
          exports.map = new google.maps.Map(document.querySelector("#map"), {
            center: {
              lat: -34.397,
              lng: 150.644
            },
            zoom: 8,
            disableDefaultUI: true
          });
          initZoomControl(exports.map);
          initMapTypeControl(exports.map);
          initFullscreenControl(exports.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")
          );
        }

        function initMapTypeControl(map) {
          var mapTypeControlDiv = document.querySelector(".maptype-control");

          document.querySelector(".maptype-control-map").onclick = function() {
            mapTypeControlDiv.classList.add("maptype-control-is-map");
            mapTypeControlDiv.classList.remove("maptype-control-is-satellite");
            map.setMapTypeId("roadmap");
          };

          document.querySelector(
            ".maptype-control-satellite"
          ).onclick = function() {
            mapTypeControlDiv.classList.remove("maptype-control-is-map");
            mapTypeControlDiv.classList.add("maptype-control-is-satellite");
            map.setMapTypeId("hybrid");
          };

          map.controls[google.maps.ControlPosition.LEFT_TOP].push(
            mapTypeControlDiv
          );
        }

        function initFullscreenControl(map) {
          var elementToSendFullscreen = map.getDiv().firstChild;
          var fullscreenControl = document.querySelector(".fullscreen-control");
          map.controls[google.maps.ControlPosition.RIGHT_TOP].push(
            fullscreenControl
          );

          fullscreenControl.onclick = function() {
            if (isFullscreen(elementToSendFullscreen)) {
              exitFullscreen();
            } else {
              requestFullscreen(elementToSendFullscreen);
            }
          };

          document.onwebkitfullscreenchange = document.onmsfullscreenchange = document.onmozfullscreenchange = document.onfullscreenchange = function() {
            if (isFullscreen(elementToSendFullscreen)) {
              fullscreenControl.classList.add("is-fullscreen");
            } else {
              fullscreenControl.classList.remove("is-fullscreen");
            }
          };
        }

        function isFullscreen(element) {
          return (
            (document.fullscreenElement ||
              document.webkitFullscreenElement ||
              document.mozFullScreenElement ||
              document.msFullscreenElement) == element
          );
        }

        function requestFullscreen(element) {
          if (element.requestFullscreen) {
            element.requestFullscreen();
          } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen();
          } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
          } else if (element.msRequestFullScreen) {
            element.msRequestFullScreen();
          }
        }

        function exitFullscreen() {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.msCancelFullScreen) {
            document.msCancelFullScreen();
          }
        }

        exports.exitFullscreen = exitFullscreen;
        exports.initFullscreenControl = initFullscreenControl;
        exports.initMap = initMap;
        exports.initMapTypeControl = initMapTypeControl;
        exports.initZoomControl = initZoomControl;
        exports.isFullscreen = isFullscreen;
        exports.requestFullscreen = requestFullscreen;
      })((this.window = this.window || {}));
    </script>
  </head>
  <body>
    <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 class="controls maptype-control maptype-control-is-map">
        <button class="maptype-control-map" title="Show road map">Map</button>
        <button
          class="maptype-control-satellite"
          title="Show satellite imagery"
        >
          Satellite
        </button>
      </div>
      <div class="controls fullscreen-control">
        <button title="Toggle Fullscreen">
          <div
            class="fullscreen-control-icon fullscreen-control-top-left"
          ></div>
          <div
            class="fullscreen-control-icon fullscreen-control-top-right"
          ></div>
          <div
            class="fullscreen-control-icon fullscreen-control-bottom-left"
          ></div>
          <div
            class="fullscreen-control-icon fullscreen-control-bottom-right"
          ></div>
        </button>
      </div>
    </div>
  </body>
</html>
(function(exports) { "use strict"; function initMap() { exports.map = new google.maps.Map(document.querySelector("#map"), { center: { lat: -34.397, lng: 150.644 }, zoom: 8, disableDefaultUI: true }); initZoomControl(exports.map); initMapTypeControl(exports.map); initFullscreenControl(exports.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") ); } function initMapTypeControl(map) { var mapTypeControlDiv = document.querySelector(".maptype-control"); document.querySelector(".maptype-control-map").onclick = function() { mapTypeControlDiv.classList.add("maptype-control-is-map"); mapTypeControlDiv.classList.remove("maptype-control-is-satellite"); map.setMapTypeId("roadmap"); }; document.querySelector(".maptype-control-satellite").onclick = function() { mapTypeControlDiv.classList.remove("maptype-control-is-map"); mapTypeControlDiv.classList.add("maptype-control-is-satellite"); map.setMapTypeId("hybrid"); }; map.controls[google.maps.ControlPosition.LEFT_TOP].push(mapTypeControlDiv); } function initFullscreenControl(map) { var elementToSendFullscreen = map.getDiv().firstChild; var fullscreenControl = document.querySelector(".fullscreen-control"); map.controls[google.maps.ControlPosition.RIGHT_TOP].push(fullscreenControl); fullscreenControl.onclick = function() { if (isFullscreen(elementToSendFullscreen)) { exitFullscreen(); } else { requestFullscreen(elementToSendFullscreen); } }; document.onwebkitfullscreenchange = document.onmsfullscreenchange = document.onmozfullscreenchange = document.onfullscreenchange = function() { if (isFullscreen(elementToSendFullscreen)) { fullscreenControl.classList.add("is-fullscreen"); } else { fullscreenControl.classList.remove("is-fullscreen"); } }; } function isFullscreen(element) { return ( (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) == element ); } function requestFullscreen(element) { if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.msRequestFullScreen) { element.msRequestFullScreen(); } } function exitFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msCancelFullScreen) { document.msCancelFullScreen(); } } exports.exitFullscreen = exitFullscreen; exports.initFullscreenControl = initFullscreenControl; exports.initMap = initMap; exports.initMapTypeControl = initMapTypeControl; exports.initZoomControl = initZoomControl; exports.isFullscreen = isFullscreen; exports.requestFullscreen = requestFullscreen; })((this.window = this.window || {}));
/* 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; } .gm-style .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; } .gm-style .controls button { border: 0; background-color: white; color: rgba(0, 0, 0, 0.6); } .gm-style .controls button:hover { color: rgba(0, 0, 0, 0.9); } .gm-style .controls.zoom-control { display: flex; flex-direction: column; height: auto; } .gm-style .controls.zoom-control button { font: 0.85em Arial; margin: 1px; padding: 0; } .gm-style .controls.maptype-control { display: flex; flex-direction: row; width: auto; } .gm-style .controls.maptype-control button { display: inline-block; font-size: 0.5em; margin: 0 1px; padding: 0 6px; } .gm-style .controls.maptype-control.maptype-control-is-map .maptype-control-map { font-weight: 700; } .gm-style .controls.maptype-control.maptype-control-is-satellite .maptype-control-satellite { font-weight: 700; } .gm-style .controls.fullscreen-control button { display: block; font-size: 1em; height: 100%; width: 100%; } .gm-style .controls.fullscreen-control .fullscreen-control-icon { border-style: solid; height: 0.25em; position: absolute; width: 0.25em; } .gm-style .controls.fullscreen-control .fullscreen-control-icon.fullscreen-control-top-left { border-width: 2px 0 0 2px; left: 0.1em; top: 0.1em; } .gm-style .controls.fullscreen-control.is-fullscreen .fullscreen-control-icon.fullscreen-control-top-left { border-width: 0 2px 2px 0; } .gm-style .controls.fullscreen-control .fullscreen-control-icon.fullscreen-control-top-right { border-width: 2px 2px 0 0; right: 0.1em; top: 0.1em; } .gm-style .controls.fullscreen-control.is-fullscreen .fullscreen-control-icon.fullscreen-control-top-right { border-width: 0 0 2px 2px; } .gm-style .controls.fullscreen-control .fullscreen-control-icon.fullscreen-control-bottom-left { border-width: 0 0 2px 2px; left: 0.1em; bottom: 0.1em; } .gm-style .controls.fullscreen-control.is-fullscreen .fullscreen-control-icon.fullscreen-control-bottom-left { border-width: 2px 2px 0 0; } .gm-style .controls.fullscreen-control .fullscreen-control-icon.fullscreen-control-bottom-right { border-width: 0 2px 2px 0; right: 0.1em; bottom: 0.1em; } .gm-style .controls.fullscreen-control.is-fullscreen .fullscreen-control-icon.fullscreen-control-bottom-right { border-width: 2px 0 0 2px; }
<!DOCTYPE html> <html> <head> <title>Replacing Default Controls</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap&libraries=&v=weekly" defer ></script> <!-- jsFiddle will insert css and js --> </head> <body> <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 class="controls maptype-control maptype-control-is-map"> <button class="maptype-control-map" title="Show road map">Map</button> <button class="maptype-control-satellite" title="Show satellite imagery" > Satellite </button> </div> <div class="controls fullscreen-control"> <button title="Toggle Fullscreen"> <div class="fullscreen-control-icon fullscreen-control-top-left" ></div> <div class="fullscreen-control-icon fullscreen-control-top-right" ></div> <div class="fullscreen-control-icon fullscreen-control-bottom-left" ></div> <div class="fullscreen-control-icon fullscreen-control-bottom-right" ></div> </button> </div> </div> </body> </html>