Enormes controles de Google Maps (¿posible error?)

Noté por primera vez que mis controles de Google Maps eran desproporcionadamente grandes en mi propia aplicación web (véase a continuación).

enter image description here

Inicialmente pensé que algunos de mis CSS estaban jugando con CSS de Google en los controles; sin embargo, al visitar la página web propia de Google, me dijeron que este incidente no estaba aislado de mí …

A continuación hay un mapa en su documentación: https://developers.google.com/maps/documentation/javascript/examples/control-positioning

enter image description here

Los controles grandes aparecen en cada página de su documentación para mí también. Probé diferentes máquinas y diferentes navegadores (Chrome y Firefox).

También probé otros sitios que usaban la API de Google Maps y vi un fenómeno similar en algunos casos .

enter image description here

¿Alguien más está experimentando los mismos problemas?

Resulta que esto no es un error. Ver más aquí:

13 de agosto de 2018 03:56 PM Problema informado El canal semanal API de JavaScript de Google Maps (3.34) utilizará la IU de control más grande.

A medida que vemos aumentos en las operaciones táctiles en varios dispositivos, ajustamos la IU de control para que se ajuste tanto a los toques con los dedos como a los clics del mouse.

Es posible inhabilitar esto cargando la API con v = trimestral, v = 3, v = 3.33 o v = 3.32. Nota: las solicitudes para la versión retirada recibirán el canal predeterminado, consulte 1 .

Si tiene alguna solicitud u otro problema relacionado con la nueva interfaz de usuario de control, infórmenos.

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

Use v = trimestral, v = 3, v = 3.33 o v = 3.32 al cargar la API para usar controles más pequeños.

Para aquellos que son reacios a optar por no especificar las versiones anteriores de la API, la creación de controles personalizados es relativamente sencilla. Lo siguiente creará dos elementos de button para acercar y alejar.

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