css - remove - Enormes controles de Google Maps(¿Posible error?)
google maps options (3)
Después de la reacción, Google ha publicado un ejemplo sobre cómo reemplazar los controles (grandes) predeterminados: https://developers.google.com/maps/documentation/javascript/examples/control-replacement
Aquí está el código publicado por Google:
<!DOCTYPE html> <html> <head> <title>Replacing Default Controls</title> <meta name="viewport" content="initial-scale=1.0"> <meta charset="utf-8"> <style> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } .gm-style .controls { font-size: 28px; /* this adjusts the size of all the controls */ background-color: white; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; box-sizing: border-box; border-radius: 2px; cursor: pointer; font-weight: 300; height: 1em; margin: 6px; text-align: center; user-select: none; padding: 2px; width: 1em; } .gm-style .controls button { border: 0; background-color: white; color: rgba(0, 0, 0, 0.6); } .gm-style .controls button:hover { color: rgba(0, 0, 0, 0.9); } .gm-style .controls.zoom-control { display: flex; flex-direction: column; height: auto; } .gm-style .controls.zoom-control button { font: 0.85em Arial; margin: 1px; padding: 0; } .gm-style .controls.maptype-control { display: flex; flex-direction: row; width: auto; } .gm-style .controls.maptype-control button { display: inline-block; font-size: 0.5em; margin: 0 1px; padding: 0 6px; } .gm-style .controls.maptype-control.maptype-control-is-map .maptype-control-map { font-weight: 700; } .gm-style .controls.maptype-control.maptype-control-is-satellite .maptype-control-satellite { font-weight: 700; } .gm-style .controls.fullscreen-control button { display: block; font-size: 1em; height: 100%; width: 100% } .gm-style .controls.fullscreen-control .fullscreen-control-icon { border-style: solid; height: 0.25em; position:absolute; width: 0.25em; } .gm-style .controls.fullscreen-control .fullscreen-control-icon.fullscreen- control-top-left { border-width: 2px 0 0 2px; left: 0.1em; top: 0.1em; } .gm-style .controls.fullscreen-control.is-fullscreen .fullscreen-control-icon.fullscreen-control-top-left { border-width: 0 2px 2px 0; } .gm-style .controls.fullscreen-control .fullscreen-control-icon.fullscreen-control-top-right { border-width: 2px 2px 0 0; right: 0.1em; top: 0.1em; } .gm-style .controls.fullscreen-control.is-fullscreen .fullscreen-control-icon.fullscreen-control-top-right { border-width: 0 0 2px 2px; } .gm-style .controls.fullscreen-control .fullscreen-control-icon.fullscreen-control-bottom-left { border-width: 0 0 2px 2px; left: 0.1em; bottom: 0.1em; } .gm-style .controls.fullscreen-control.is-fullscreen .fullscreen-control-icon.fullscreen-control-bottom-left { border-width: 2px 2px 0 0; } .gm-style .controls.fullscreen-control .fullscreen-control-icon.fullscreen-control-bottom-right { border-width: 0 2px 2px 0; right: 0.1em; bottom: 0.1em; } .gm-style .controls.fullscreen-control.is-fullscreen .fullscreen-control-icon.fullscreen-control-bottom-right { border-width: 2px 0 0 2px; } </style> </head> <body> <div id="map"></div> <!-- Hide controls until they are moved into the map. --> <div style="display:none"> <div class="controls zoom-control"> <button class="zoom-control-in" title="Zoom In">+</button> <button class="zoom-control-out" title="Zoom Out">−</button> </div> <div class="controls maptype-control maptype-control-is-map"> <button class="maptype-control-map" title="Show road map">Map</button> <button class="maptype-control-satellite" title="Show satellite imagery">Satellite</button> </div> <div class="controls fullscreen-control"> <button title="Toggle Fullscreen"> <div class="fullscreen-control-icon fullscreen-control-top-left"></div> <div class="fullscreen-control-icon fullscreen-control-top-right"></div> <div class="fullscreen-control-icon fullscreen-control-bottom-left"></div> <div class="fullscreen-control-icon fullscreen-control-bottom-right"></div> </button> </div> </div> <script> var map; function initMap() { map = new google.maps.Map(document.querySelector(''#map''), { center: {lat: -34.397, lng: 150.644}, zoom: 8, disableDefaultUI: true, }); initZoomControl(map); initMapTypeControl(map); initFullscreenControl(map); } function initZoomControl(map) { document.querySelector(''.zoom-control-in'').onclick = function() { map.setZoom(map.getZoom() + 1); }; document.querySelector(''.zoom-control-out'').onclick = function() { map.setZoom(map.getZoom() - 1); }; map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push( document.querySelector(''.zoom-control'')); } function initMapTypeControl(map) { var mapTypeControlDiv = document.querySelector(''.maptype-control''); document.querySelector(''.maptype-control-map'').onclick = function() { mapTypeControlDiv.classList.add(''maptype-control-is-map''); mapTypeControlDiv.classList.remove(''maptype-control-is-satellite''); map.setMapTypeId(''roadmap''); }; document.querySelector(''.maptype-control-satellite'').onclick = function() { mapTypeControlDiv.classList.remove(''maptype-control-is-map''); mapTypeControlDiv.classList.add(''maptype-control-is-satellite''); map.setMapTypeId(''hybrid''); }; map.controls[google.maps.ControlPosition.LEFT_TOP].push( mapTypeControlDiv); } function initFullscreenControl(map) { var elementToSendFullscreen = map.getDiv().firstChild; var fullscreenControl = document.querySelector(''.fullscreen-control''); map.controls[google.maps.ControlPosition.RIGHT_TOP].push( fullscreenControl); fullscreenControl.onclick = function() { if (isFullscreen(elementToSendFullscreen)) { exitFullscreen(); } else { requestFullscreen(elementToSendFullscreen); } }; document.onwebkitfullscreenchange = document.onmsfullscreenchange = document.onmozfullscreenchange = document.onfullscreenchange = function() { if (isFullscreen(elementToSendFullscreen)) { fullscreenControl.classList.add(''is-fullscreen''); } else { fullscreenControl.classList.remove(''is-fullscreen''); } }; } function isFullscreen(element) { return (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) == element; } function requestFullscreen(element) { if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.msRequestFullScreen) { element.msRequestFullScreen(); } } function exitFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msCancelFullScreen) { document.msCancelFullScreen(); } } </script> <script src="https://maps.googleapis.com/maps/api/js? key=YOUR_API_KEY&callback=initMap" async defer></script> </body> </html>
Primero noté que mis controles de Google Maps eran desproporcionadamente grandes en mi propia aplicación web (ver más abajo).
Inicialmente pensé que parte de mi CSS estaba jugando con el CSS de Google en los controles; sin embargo, visitar la propia página web de Google me dijo que este incidente no me fue aislado ...
A continuación hay un mapa en su documentación: https://developers.google.com/maps/documentation/javascript/examples/control-positioning
Los controles grandes aparecen en cada página de su documentación también para mí. 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 .
¿Alguien más está experimentando los mismos problemas?
Resulta que esto no es un error. Ver más aquí:
13 de agosto de 2018 15:56 Número notificado El canal semanal de API de JavaScript de Google Maps (3.34) utilizará la IU de control más grande.
A medida que vemos incrementos 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 optar por salir de esto cargando la API con v = trimestral, v = 3, v = 3.33 o v = 3.32. Nota: las solicitudes de 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, comuníquenoslo.
Use v = trimestral, v = 3, v = 3.33 o v = 3.32 cuando cargue la API para usar controles más pequeños.
EDITAR:
Consulte las respuestas de @garethdn y @Peter (a continuación) para averiguar cómo reemplazar los controles grandes de Google con sus propios controles personalizados.
Para aquellos que son reacios a optar por la exclusión especificando versiones anteriores de la API, crear controles personalizados es relativamente sencillo. 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);