Huge Google Maps Controls (Possible Bug?)

Question

I first noticed that my Google Maps Controls were disproportionally large on my own web app (seen below).

Initially I thought some of my CSS was playing with Google's CSS on the controls; however, visiting Google's own webpage told me this incident was not isolated to me...

Below is a map on their documentation: https://developers.google.com/maps/documentation/javascript/examples/control-positioning

The large controls appear on every page of their documentation for me as well. I tried different machines and different browsers (Chrome and Firefox).

I also tried other sites that used the Google Maps API and saw a similar phenomenon in some cases.

Is anyone else experiencing the same issues?

Answer 1

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

Answer 2

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.