Huge Google Maps Controls (Possible Bug?)

For those that are reluctant to opt out by specifying older versions of the API, creating custom controls is relatively straight forward. The following will create two button elements to zoom in and out.

defaultMapOptions: google.maps.MapOptions = {
    // Hide Google's default zoom controls
    zoomControl: false
};

initializeMap(el: HTMLElement, options?: google.maps.MapOptions): google.maps.Map {
    let opts = Object.assign({}, this.defaultMapOptions, options);
    let map = new google.maps.Map(el, opts);
    let zoomControlsDiv = document.createElement('div');
    // Add a class to the container to allow you to refine the position of the zoom controls
    zoomControlsDiv.classList.add('google-map-custom-zoom-controls');

    this.createCustomZoomControls(zoomControlsDiv, map);

    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(zoomControlsDiv);

    return map;
}

createCustomZoomControls(controlDiv: HTMLDivElement, map: google.maps.Map) {
    let zoomInControlUI: HTMLButtonElement = document.createElement('button');
    let zoomOutControlUI: HTMLButtonElement = document.createElement('button');
    let zoomControls: HTMLButtonElement[] = [zoomInControlUI, zoomOutControlUI];
    // List of classes to be applied to each zoom control
    let buttonClasses: string[] = ['btn', 'btn-primary', 'btn-sm'];

    zoomInControlUI.innerHTML = `+`;
    zoomOutControlUI.innerHTML = `−`;

    zoomControls.forEach(zc => {
        zc.classList.add(...buttonClasses);
        controlDiv.appendChild(zc);
    });

    google.maps.event.addDomListener(zoomInControlUI, 'click', () => map.setZoom(map.getZoom() + 1));
    google.maps.event.addDomListener(zoomOutControlUI, 'click', () => map.setZoom(map.getZoom() - 1));
}

let map = this.initializeMap(myGoogleMapContainerElement);

Looks like google have now acknowledged this and have provided a (currently un-documented) feature to change the UI scaling by passing in a "controlSize" when creating the map.

See comment from Google here.

JSFiddle here (from comment above).

Sample code:

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8,
    controlSize: 32,
  });
}

Note: 40 is the default currently (and corresponds to the large controls that this question is about). I've found 25 to be about the same as the previous controls.

Update:

As of v3.36 this is a documented feature, see here

Turns out this isn't a bug. See more here:

Aug 13, 2018 03:56PM Reported Issue Google Maps JavaScript API weekly channel (3.34) will be using the larger control UI.

As we are seeing increases of touch operations on various devices, we adjusted the control UI to fit for both finger touches and mouse clicks.

It's possible to opt out of this by loading the API with v=quarterly, v=3, v=3.33 or v=3.32. Note: requests to retired version will receive the default channel, see 1.

If you have any requests or other issues concerning the new control UI please let us know.

1 https://issuetracker.google.com/112519576

Use v=quarterly, v=3, v=3.33 or v=3.32 when loading the API to use smaller controls.

EDIT:

Refer to answer from @Jonny van Beek on how to scale Google map's controls to the size of your choosing.

Refer to answers from @garethdn and @Peter (below) to find out how to replace Google's large controls with your own custom controls.

Refer to @Dutchmanjonny's post (below) for latest and correct solution to this problem.