Enormes controles do Google Maps (possível erro?)

Primeiramente, percebi que meus controles do Google Maps eram desproporcionalmente grandes em meu próprio aplicativo da Web (visto abaixo).

insira a descrição da imagem aqui

Inicialmente, pensei que alguns dos meus CSS estavam jogando com o CSS do Google nos controles; no entanto, visitando a página do próprio Google me disse que este incidente não foi isolado para mim …

Abaixo está um mapa em sua documentação: https://developers.google.com/maps/documentation/javascript/examples/control-positioning

insira a descrição da imagem aqui

Os grandes controles aparecem em todas as páginas da documentação para mim também. Eu tentei máquinas diferentes e navegadores diferentes (Chrome e Firefox).

Eu também tentei outros sites que usaram a API do Google Maps e vi um fenômeno semelhante em alguns casos .

insira a descrição da imagem aqui

Alguém mais está enfrentando os mesmos problemas?

Acontece que isso não é um bug. Veja mais aqui:

Aug 13, 2018 03:56 PM Reported Issue O canal semanal da API JavaScript do Google Maps (3.34) estará usando a UI de controle maior.

Como estamos vendo aumentos das operações de toque em vários dispositivos, ajustamos a interface do usuário de controle para ajustar tanto os toques quanto os cliques do mouse.

É possível desativar isso carregando a API com v = trimestralmente, v = 3, v = 3.33 ou v = 3.32. Nota: pedidos para a versão retirada receberão o canal padrão, consulte 1 .

Se você tiver alguma solicitação ou outro problema relacionado à nova interface de controle, informe-nos.

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

Use v = trimestralmente, v = 3, v = 3.33 ou v = 3.32 ao carregar a API para usar controles menores.

Para aqueles que relutam em recusar, especificando versões mais antigas da API, a criação de controles personalizados é relativamente direta. A seguir, você criará dois elementos de button para aumentar e diminuir o zoom.

 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 classs 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);