Relleno fitBounds de la API de Google Maps 3: asegúrate de que los marcadores no estén ocultos por los controles superpuestos

Question

Apr 26, 2012, 08:34 PM

geo google-maps-api-3 padding google-maps google-maps-api-2

Relleno fitBounds de la API de Google Maps 3: asegúrate de que los marcadores no estén ocultos por los controles superpuestos

Me gustaría poder agregar el relleno a una vista de mapa después de llamar a unmap.fitBounds(), por lo que todos los marcadores pueden ser visibles sin importar los controles del mapa o cosas como paneles deslizantes que cubrirían los marcadores cuando se abren. Leaftlet tiene unOpción de agregar relleno a fitBounds, pero Google Maps no lo hace.

A veces, los marcadores situados más al norte se ocultan parcialmente sobre la ventana gráfica. Los marcadores situados más al oeste también suelen estar debajo del control deslizante de zoom. Con API 2 fue posible formar una ventana virtual al reducir los rellenos dados desde la ventana de mapa y luego llamar al métodoshowBounds() para calcular y realizar zoom y centrado en función de esa ventana virtual:

<code>map.showBounds(bounds, {top:30,right:10,left:50});
</code>

Se puede encontrar un ejemplo funcional de esto para API 2.aquí bajo el enlace de ejemplo showBounds ().

No puedo encontrar una funcionalidad similar en API V3, pero espero que haya otra forma de lograrlo. ¿Tal vez podría tomar los puntos noreste y suroeste, y luego agregar coordenadas falsas para extender los límites aún más después de incluirlos?

ACTUALIZAR

(Codepen en caso de que el siguiente código no funcione)

<code>function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    draggable: true,
    streetViewControl: false,
    zoomControl: false
  });

  var marker1 = new google.maps.Marker({
    position: {lat: 37, lng: -121},
    map: map,
  });

  var marker2 = new google.maps.Marker({
    position: {lat: 39.3, lng: -122},
    map: map,
  });
 
  var bounds = new google.maps.LatLngBounds();
  bounds.extend(marker1.position);
  bounds.extend(marker2.position);
  map.fitBounds(bounds);
}</code>

<code>#map {
  height: 640px;
  width: 360px;
}
#overlays {
  position: absolute;
  height: 50px;
  width: 340px;
  background: white;
  margin: -80px 10px;
  text-align: center;
  line-height: 50px;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}</code>

<code><html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>

  </head>
  <body>
    <div id="map"></div>
    <div id="overlays">Controls / Order pizza / ETA / etc.</div>
  
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?&callback=initMap">
    </script>
  </body>
</html></code>

El problema es este:

He intentado agregar un control como se documenta enControles personalizados, pero el mapa no es exactamente consciente de ello - vereste violín bifurcado de laEjemplo de control personalizado de mapas. Uno de los marcadores todavía está oculto por el control.