Css – Huge Google Maps Controls (Possible Bug?)

cssgoogle mapsgoogle-maps-api-3

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

enter image description here

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

enter image description here

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.

enter image description here

Is anyone else experiencing the same issues?

Best Answer

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

Related Topic