2

Hay alguna manera de poner el típico botón de centrar via javascript o HTML en un google maps API v.3?

He buscado en la documentación pero no he sabido encontrar nada, por lo que he intentado hacerlo manualmente via css con position y z-index:

HTML

<div id="map-canvas" class="map">
    <button class="center__map__button" onclick="centraMapa()">CENTRAR</button>
</div>

CSS

.map {
    min-height: 100%; 
    position: relative;
}

.center__map__button {
    position:absolute;
    top: 300;
    left: 300;
    z-index:100;
}

Esto funciona como se puede ver en ESTA DEMO con un div normal, pero no me cuando lo hago con uno que dentro tiene un googlemaps, me sale antes de que cargue el mapa, pero después el mapa lo tapa.

1

1 respuesta 1

1

Lo que deseas hacer no lo puedes hacer solo por clases, como lo dicen en un comentario arriba google pone a tu disposicion como hacerlo en su documentacion. Puedes ver en este codigo que se puede definir controles y su comportamiento, y tambien su apariencia, pero como estara dentro del mapa debes hacerlo como un control del mapa. Saludos aqui el codigo.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Custom controls</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
var map;
var centro = {lat: 41.85, lng: -87.65};

/**
 * @constructor
 */
function CenterControl(controlDiv, map) {

  // Estilos para el contenedor. Haciendo uso de estos estilos puedes ubicar el boton donde desees y que se vea como desees
  var controlUI = document.createElement('div');
  controlUI.style.backgroundColor = 'red';
  controlUI.style.border = '2px solid #fff';
  controlDiv.appendChild(controlUI);

  //Estilos para el interior del contenedor.
  var controlText = document.createElement('div');
  controlText.style.color = 'rgb(25,25,25)';
  controlText.innerHTML = 'Center Map';
  controlUI.appendChild(controlText);

  // Definir el eventListener: Cuando hacen click en tu control seteas el centro
  controlUI.addEventListener('click', function() {
    map.setCenter(centro);
  });

}

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: centro
  });
  
  var centerControlDiv = document.createElement('div'); 
  var centerControl = new CenterControl(centerControlDiv, map);

  centerControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=&signed_in=true&callback=initMap" async defer>
    </script>
  </body>
</html>

1
  • Claro, debes usar un API_KEY Commented el 13 oct. 2016 a las 17:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.