Commandes énormes de Google Maps (bogue possible?)

Question

J'ai d'abord remarqué que mes contrôles Google Maps étaient disproportionnés sur ma propre application Web (voir ci-dessous).

 

Au début, je pensais que certains de mes CSS jouaient avec les CSS de Google sur les contrôles; Cependant, la page Web de Google m'a révélé que cet incident ne m'était pas isolé ...

Vous trouverez ci-dessous une carte de leur documentation: https://developers.google.com/maps/documentation/javascript/examples/control-positioning

 

Les grands contrôles apparaissent également sur chaque page de leur documentation. J'ai essayé différentes machines et différents navigateurs (Chrome et Firefox).

J'ai également essayé d'autres sites utilisant l'API Google Maps et constaté un phénomène similaire dans certains cas.

 

Est-ce que quelqu'un d'autre rencontre les mêmes problèmes?

Answer 1

Il s'avère que ce n'est pas un bug. Voir plus ici:

13 août 2018 15:56 Problème reporté API Google Maps JavaScript hebdomadaire le canal (3.34) utilisera la plus grande interface utilisateur de contrôle.

Alors que nous constatons une augmentation des opérations tactiles sur divers appareils, nous ajusté l’interface utilisateur des commandes pour s’adapter aux deux doigts et à la souris clics. 

Il est possible de désactiver cette option en chargeant l'API avec v = trimestriel, v = 3, v = 3,33 ou v = 3,32. Remarque: les demandes de version retirée recevront le canal par défaut, voir 1 .

Si vous avez des demandes ou d’autres problèmes concernant la nouvelle interface de contrôle s'il vous plaît laissez-nous savoir.

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

Utilisez v = trimestriel, v = 3, v = 3.33 ou v = 3.32 lors du chargement de l'API pour utiliser des contrôles plus petits.

MODIFIER:

Consultez la réponse de @Jonny van Beek pour savoir comment redimensionner les contrôles de Google Map à la taille de votre choix.

Reportez-vous aux réponses de @garethdn et @Peter (ci-dessous) pour savoir comment remplacer les grands contrôles de Google par vos propres contrôles personnalisés.

Answer 2

On dirait que Google l'a reconnu et a fourni une fonctionnalité (actuellement non documentée) permettant de modifier la mise à l'échelle de l'interface utilisateur en transmettant un "contrôle" à la création de la carte.

Voir le commentaire de Google ici .

JSFiddle ici (du commentaire ci-dessus).

Exemple de code:

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

Remarque: 40 est la valeur par défaut actuellement (et correspond aux gros contrôles sur lesquels porte cette question). J'ai trouvé 25 être à peu près les mêmes que les contrôles précédents.

Answer 3

Pour ceux qui hésitent à se retirer en spécifiant des versions plus anciennes de l'API, la création de contrôles personnalisés est relativement simple. Ce qui suit va créer deux éléments button pour zoomer et dézoomer.

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

Answer 4

Après le contrecoup, Google a publié un exemple expliquant comment remplacer les grands contrôles par défaut: https://developers.google.com/maps/documentation/javascript/examples/control-replacement

Voici le code publié par 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>

Answer 5

J'ai ajouté des CSS et c'est tout.

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

et ceci est pour le bouton homme jaune:

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

et pour la dernière fois, la conception des boutons 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;
}

Answer 6

En plus de la réponse de @ שלומי אהרוני, ajoutez-la pour corriger le bouton plein écran. Comme auparavant, ce n’est pas une excellente solution à long terme, mais c’est une bonne solution pour le vendredi soir.

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

Answer 7

Voici ce que cela a fait pour moi:

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

Réduit les contrôles de 30%.