Огромные элементы управления Google Картами (Возможная ошибка?)

Впервые я заметил, что мои элементы управления Google Картами были несоразмерно большими в моем собственном веб-приложении (см. Ниже).

Первоначально я думал, что некоторые из моих CSS играли с Google CSS на элементах управления; однако, посетив собственную веб-страницу Google, мне сказали, что этот инцидент не был изолирован ко мне...

Ниже приведена карта их документации: https://developers.google.com/maps/documentation/javascript/examples/control-positioning

Большие элементы управления отображаются на каждой странице их документации для меня. Я пробовал разные машины и разные браузеры (Chrome и Firefox).

Я также пробовал другие сайты, которые использовали API Карт Google, и в некоторых случаях видел подобное явление.

Кто-нибудь еще испытывает одни и те же проблемы?

Ответ 1

Оказывается, это не ошибка. Подробнее здесь:

13 августа 2018 15:56 Сообщаемая проблема Google Maps JavaScript API еженедельно канал (3.34) будет использовать больший пользовательский интерфейс управления.

Поскольку мы видим увеличение количества операций касания на различных устройствах, мы настроил интерфейс управления, чтобы он подходил как для прикосновений пальцев, так и для мыши щелчки.

Можно отказаться от этого, загрузив API с v = ежеквартально, v = 3, v = 3,33 или v = 3,32. Примечание: запросы на вышедшую версию получат канал по умолчанию, см. 1.

Если у вас есть какие-либо запросы или другие вопросы, касающиеся нового интерфейса управления пожалуйста, дайте нам знать.

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

Используйте v = ежеквартально, v = 3, v = 3.33 или v = 3.32 при загрузке API для использования меньших элементов управления.

EDIT:

Обратитесь к ответу @Jonny van Beek о том, как масштабировать элементы управления картой Google до нужного размера.

Обратитесь к ответам @garethdn и @Peter (ниже), чтобы узнать, как заменить большие элементы управления Google вашими собственными элементами управления.

Обратитесь к посту @Dutchmanjonny (ниже) за последним и правильным решением этой проблемы.

Ответ 2

Похоже, Google уже подтвердил это и предоставил (в настоящее время не документированную) функцию для изменения масштаба пользовательского интерфейса, передавая "controlSize" при создании карты.

См. комментарий от Google здесь.

JSFiddle здесь (из комментария выше).

Пример кода:

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8,
    controlSize: 32,
  });
}

Примечание. В настоящее время по умолчанию используется значение 40 (и оно соответствует большим элементам управления, о которых идет речь в этом вопросе). Я обнаружил, что 25 примерно такой же, как в предыдущих элементах управления.

Ответ 3

После обратной реакции Google опубликовал пример замены стандартных (больших) элементов управления: https://developers.google.com/maps/documentation/javascript/examples/control-replacement

Вот код, опубликованный 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>

Ответ 4

Для тех, кто не хочет отказываться, указав более старые версии API, создание настраиваемых элементов управления относительно прямолинейно. Ниже будут созданы два элемента button для увеличения и уменьшения масштаба.

defaultMapOptions: google.maps.MapOptions = {
    // Hide Google 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 = '&plus;';
    zoomOutControlUI.innerHTML = '&minus;';

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

Ответ 5

Вот что сделал для меня:

 .gm-bundled-control
,.gm-style-mtc
,.gm-fullscreen-control{
    transform: scale(.7);
}

Делает элементы управления на 30% меньше.

Ответ 6

Я добавил немного CSS и вот оно.

/* 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;
}

Ответ 7

В дополнение к ответу @שלומי אהרו Answerי, добавьте это, чтобы исправить полноэкранную кнопку. Как и прежде, это не лучшее решение в долгосрочной перспективе, но это хорошая пятничная ночь.

/* full screen button design */
#map .gm-fullscreen-control {
    width: 30px !important;
    height: 30px !important;
}
#map .gm-fullscreen-control img:nth-child(1), #map .gm-fullscreen-control img:nth-child(2), #map .gm-fullscreen-control img:nth-child(3) {
    margin: 6px !important;
}

Ответ 8

Ответы @Jonny van Beek и @user5814 решили эту проблему для меня. Но все еще кажется небольшая ошибка с опцией карты "controlSize": изменение controlSize не приведет к изменению выпадающего меню.

Это измененный javascript для отображения ошибки в вышеупомянутом примере на JSFiddle:

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8,
    controlSize: 20,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      position: google.maps.ControlPosition.TOP_RIGHT,
      mapTypeIds: ['roadmap', 'terrain', 'satellite']
    }
  });
}