0
503
VistasEnormes controles de Google Maps (¿posible error?)
Primero noté que mis controles de Google Maps eran desproporcionadamente grandes en mi propia aplicación web (ver a continuación).
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 fue aislado para mí...
A continuación se muestra un mapa de su documentación: https://developers.google.com/maps/documentation/javascript/examples/control-positioning
Los controles grandes también aparecen en cada página de su documentació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?
6 Respuestas
Responde la pregunta0
Resulta que esto no es un error. Ver más aquí:
13 de agosto de 2018 03:56 p. m. Problema informado El canal semanal de la API de JavaScript de Google Maps (3.34) utilizará la interfaz de usuario de control más grande.
Como estamos viendo aumentos en las operaciones táctiles en varios dispositivos, ajustamos la interfaz de usuario de control para que se ajuste tanto a los toques con los dedos como a los clics del mouse.
Es posible cancelar esto cargando la API con v=trimestral, v=3, v=3.33 o v=3.32. Nota: las solicitudes a 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, háganoslo saber.
Use v=trimestral, v=3, v=3.33 o v=3.32 al cargar la API para usar controles más pequeños.
EDITAR:
Consulte la respuesta de @Jonny van Beek sobre cómo escalar los controles del mapa de Google al tamaño que elija.
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.
Consulte la publicación de @Dutchmanjonny (a continuación) para obtener la solución más reciente y correcta a este problema.
0
Para aquellos que son reacios a optar por no especificar 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);0
Después de la reacción violenta, Google ahora ha publicado un ejemplo de 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>0
Agregué algo de css y listo.
/* Fix +/- zoom buttons design */ #map .gm-bundled-control-on-bottom { right: 30px !important; bottom: 116px !important; } #map .gm-bundled-control-on-bottom > div:first-child { top: 44px !important; } #map .gmnoprint > .gmnoprint > div { height: 60px !important; width: 30px !important; } #map .gmnoprint > .gmnoprint > div > div { /* seperator */ width: 22.5px !important; margin: 0px 3.75px !important; } #map .gmnoprint > .gmnoprint button { width: 30px !important; height: 30px !important; } #map .gmnoprint > .gmnoprint button img { height: 13.5px !important; width: 13.5px !important; margin: 6.75px 8.25px 9.75px !important; }y esto es para el botón de hombre amarillo:
/* yellow person button design*/ #map .gm-svpc { width: 30px !important; height: 30px !important; } #map .gm-svpc img:nth-child(1), #map .gm-svpc img:nth-child(2){ width: 13.5px !important; height: 22.5px !important; left: -7px !important; top: -12px !important; } #map .gm-svpc img:nth-child(3) { width: 24px !important; height: 30px !important; }y por último el diseño de botones MAP|Satellite
/* MAP|Satellite buttons design*/ #map .gm-style-mtc > div:nth-child(1) { padding: 0px 9px !important; height: 30px !important; font-size: 15px !important; } #map .gm-style-mtc > div:nth-child(2) { top: 30px !important; } #map .gm-style-mtc > div:nth-child(2) > div { padding: 2px 4px 2px 2px !important; font-size: 14px !important; }0
Esto es lo que hizo por mí:
.gm-bundled-control ,.gm-style-mtc ,.gm-fullscreen-control{ transform: scale(.7); }Hace que los controles sean un 30% más pequeños.
0
Parece que Google ahora ha reconocido esto y ha proporcionado una función (actualmente no documentada) para cambiar la escala de la interfaz de usuario al pasar un "controlSize" al crear el mapa.
Ver comentario de Google aquí .
JSFiddle aquí (del comentario anterior).
Código de muestra:
var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8, controlSize: 32, }); }Nota: 40 es el valor predeterminado actualmente (y corresponde a los controles grandes de los que trata esta pregunta). He encontrado que 25 son casi iguales a los controles anteriores.
Actualizar:
A partir de v3.36, esta es una característica documentada, consulte aquí