1

espero que alguien me pueda ayudar, lo que pasa es que necesito poner una imagen en el centro de un div que contiene un mapa de Google.

La idea es que la imagen permanezca en el centro, independientemente que la persona haga scroll en el mapa.

La idea es que quede algo parecido así:

introducir la descripción de la imagen aquí

El código html que tengo es el siguiente:

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</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;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 7.882480, lng: -76.632520},
          zoom: 15
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDYajNJp4QFNTo52lcY7gq5-GsmW5KawiE&callback=initMap" async defer></script>
  </body>
</html>

El código de la API KEY que publiqué anteriormente está modificado por razones de seguridad. Muchas gracias

2 respuestas 2

0

Que tal si usas position absolute y z index del lado de css?, para ello primero encierra tu mapa dentro de otro contenedor (espero que funcione):

<div id = "contenedor-mapa">
     <div id="map"></div>
     <img src = "ruta_imagen.extension" id = "imagen-mapa"></img>
</div>

y en el css:

#map, #contenedor-mapa{
   height: 100%;
}

#contenedor-mapa{
  position: relative;
  display: block;
}

#imagen-mapa{
  position: absolute;
  top: calc(100% / 2);
  left: calc(100% / 2);
  z-index: 10000 !important;
}
2
  • Creo que funcionaria, pero si no queda centrada, entonces me dices yo hago una pequeña modificación...
    – Layer
    el 16 abr. 2020 a las 5:09
  • Cambié el top y el left por 50% y funcionó perfecto el 16 abr. 2020 a las 16:22
0

Para que la imagen mantenga su posición y no se vea afectada por el scroll necesitas:

  • position fixed
  • Usar top y left para moverla a un punto específico

Entonces lo anterior se lo debes aplicar a la etiqueta img que incluirá el recurso multimedia

img {
    position: fixed;
    top: medida1;
    left: medida2;
}

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.