it-swarm.com.de

Große Google Maps-Steuerelemente (möglicher Fehler?)

Ich habe zum ersten Mal bemerkt, dass meine Google Maps-Steuerelemente unverhältnismäßig groß in meiner eigenen Web-App (siehe unten) waren.

 enter image description here

Anfangs dachte ich, dass ein Teil meiner CSS mit Googles CSS in den Steuerelementen spielte. Der Besuch von Googles eigener Website sagte mir jedoch, dass dieser Vorfall für mich nicht isoliert war ...

Unten finden Sie eine Karte in der Dokumentation: https://developers.google.com/maps/documentation/javascript/examples/control-positioning

 enter image description here

Die großen Steuerelemente erscheinen auch auf jeder Seite ihrer Dokumentation für mich. Ich habe verschiedene Rechner und Browser (Chrome und Firefox) ausprobiert.

Ich habe auch andere Websites ausprobiert, die Google Maps API verwendet haben, und ein ähnliches Phänomen festgestellt: in einigen Fällen.

 enter image description here

Hat jemand anderes die gleichen Probleme?

45
user5814

Es stellt sich heraus, dass dies kein Fehler ist. Mehr hier:

13. August 2018 15:56 Gemeldete Ausgabe Google Maps JavaScript API wöchentlich Kanal (3.34) verwendet die größere Bedienoberfläche.

Da die Touch-Operationen auf verschiedenen Geräten zunehmen, müssen wir Die Bedienoberfläche wurde so angepasst, dass sie sowohl für Fingerberührungen als auch für die Maus passt Klicks 

Sie können dies deaktivieren, indem Sie die API mit v = vierteljährlich, .__, laden. v = 3, v = 3,33 oder v = 3,32. Hinweis: Anträge auf ausrangierte Version erhalten der Standardkanal, siehe 1 .

Wenn Sie Anforderungen oder andere Probleme bezüglich der neuen Benutzeroberfläche für die Steuerung haben, __. informieren Sie uns bitte.

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

Verwenden Sie v = vierteljährlich, v = 3, v = 3,33 oder v = 3,32, wenn Sie die API laden, um kleinere Steuerelemente zu verwenden.

EDIT:

In der Antwort von @Jonny van Beek erfahren Sie, wie Sie die Steuerelemente von Google Map auf die gewünschte Größe skalieren.

In den Antworten von @garethdn und @Peter (unten) erfahren Sie, wie Sie die großen Steuerelemente von Google durch Ihre eigenen benutzerdefinierten Steuerelemente ersetzen können.

32
user5814

Wie es aussieht, hat Google dies nun bestätigt und eine (derzeit nicht dokumentierte) Funktion bereitgestellt, mit der die Skalierung der Benutzeroberfläche geändert werden kann, indem beim Erstellen der Karte eine "controlSize" übergeben wird.

Siehe Kommentar von Google hier .

JSFiddle hier (aus dem Kommentar oben).

Beispielcode:

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

Hinweis: 40 ist derzeit der Standard (und entspricht den großen Steuerelementen, um die sich diese Frage handelt). Ich habe festgestellt, dass 25 in etwa den vorherigen Steuerelementen entspricht.

10
Jonny van Beek

Für diejenigen, die nur ungern durch die Angabe älterer Versionen der API die Option deaktivieren, ist das Erstellen benutzerdefinierter Steuerelemente relativ einfach. Im Folgenden werden zwei button-Elemente zum Ein- und Auszoomen erstellt.

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

Nach dem Backlash hat Google jetzt ein Beispiel für das Ersetzen der (großen) Standardsteuerelemente veröffentlicht: https://developers.google.com/maps/documentation/javascript/examples/control-replacement

Hier ist der von Google veröffentlichte Code:

<!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
Peter

Ich habe ein paar CSS hinzugefügt und das ist es.

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

und dies ist für den gelben Mannknopf:

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

und als letztes das MAP | Satellite Buttons Design 

/* 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
Shlomi Aharoni

Fügen Sie zusätzlich zur Antwort von @ ולומי אהרו Answerי diese hinzu, um die Vollbild-Schaltfläche zu korrigieren. Nach wie vor ist es keine großartige Lösung auf lange Sicht, aber es ist ein guter Freitagabend.

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

Hier ist, was es für mich getan hat:

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

Macht die Steuerelemente um 30% kleiner.

0