Custom Control w default style

Add a custom control button with the default google maps style. Answer for SO #20033343 http://stackoverflow.com/questions/20033343/google-maps-custom-button-with-standard-style

by Franz Josef Kaiser

HTML

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

CSS

html, body, #map {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
.custom-control-container {
    margin: 5px;
}
.custom-control {
    cursor: pointer;
    direction: ltr;
    overflow: hidden;
    text-align: center;
    position: relative;
    color: rgb(0, 0, 0);
    font-family: "Roboto", Arial, sans-serif;
    -webkit-user-select: none;
    font-size: 11px !important;
    background-color: rgb(255, 255, 255);
    padding: 1px 6px;
    border-bottom-left-radius: 2px;
    border-top-left-radius: 2px;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.14902);
    -webkit-box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
    box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
    min-width: 28px;
    font-weight: 500;
}

.custom-control:hover {
    font-weight: 900 !important;
}

JavaScript

"use strict";

google.maps.event.addDomListener( window, 'load', function () {
var Vienna = new google.maps.LatLng( 48.2081743, 16.3738189 ),
    map = new google.maps.Map( 
        document.getElementById( 'map' ),
        {
            zoom      : 12,
            center    : Vienna,
            mapTypeId : google.maps.MapTypeId.ROADMAP,

            panControl         : false,
            zoomControl        : false,
            scaleControl       : false,
            streetViewControl  : false,
            overviewMapControl : false
        }
    ),
    homeControlDiv = document.createElement( 'div' ),
    HomeControl = function ( controlDiv, map ) {
        controlDiv.className = "gmnoprint custom-control-container";

        var controlUIContainer = document.createElement( 'div' ),
            controlUI = document.createElement( 'div' );

        controlUIContainer.className = "gm-style-mtc";
        controlDiv.appendChild( controlUIContainer );

        controlUI.className = "custom-control";
        controlUI.title = 'Click to set the map to Home';
        controlUI.innerHTML = 'Home';
        controlUIContainer.appendChild( controlUI );

        google.maps.event.addDomListener( controlUI, 'click', function() {
            map.setCenter( Vienna )
        } );
    }

var homeControl = new HomeControl( homeControlDiv, map );

homeControlDiv.index = 1;
map.controls[ google.maps.ControlPosition.TOP_RIGHT ]
    .push( homeControlDiv );
} );