-1

Estou tentando deixar fixo um card em cima do mapa do google maps... Mas não sei como faço para fixar e ficar responsivo também...

Minhas versões

Ionic:

   Ionic CLI          : 5.4.16
   Ionic Framework    : ionic-angular 3.9.9
   @ionic/app-scripts : 3.2.4

Estou utilizando um CSS para fazer a sobreposição e também posicionar ele no lugar que eu quero:

.minhaRegiao {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    justify-content: center;
    position: absolute;
    top: 80%;
    z-index: 9999;
    background-color: #522;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

E no html uma div simples:

<div class="row minhaRegiao">
    <p style="color: white;">Minha Regiao</p>
</div>

Coloquei o código no fiddler pra ajudar...

Gostaria que o card sempre ficasse acima do GOOGLE ali no canto inferior esquerdo inserir a descrição da imagem aqui

Mas quando as dimensões mudam, o card também sobe inserir a descrição da imagem aqui

7
  • Importante você editar sua pergunta e reduzir o problema a um Exemplo Mínimo, Completo e Verificável (inclusive, que não dependa de links externos - estes podem servir só como complemento), junto com a tentativa de solução. Para aproveitar melhor o site, entender e evitar fechamentos e negativações vale a pena ler O que é o Stack Overflow e o Guia de sobrevivência (resumido) do Stack Overflow em Português. Ao editar o post conforme orientado, a pergunta vai para uma fila de revisão da comunidade automaticamente.
    – Largato
    Commented 17/03/2021 às 20:04
  • Não resolveu ainda, mas já melhorou (mais detalhes nos links), de qualquer forma já posso adiantar que o problema maior é que sua div não faz parte do mapa. Quando quer por algo no mapa do google maps, é bom você criar o material dinamicamente, usando a API do próprio mapa. Não lembro o nome do método, mas se vc der um createElement com a div, pode inserir como elemento nativo depois. Recomendo uma estudada nessa parte da API, vai facilitar muito sua vida. O MapBoxGL também é uma alternativa interessante (além de menos poluído, dependendo do uso) e tem um free tier bem generoso.
    – Largato
    Commented 17/03/2021 às 20:24
  • O post está fechado, mas os comments funcionam, então pro caso específico dá pra ajudar por aqui. Aqui tem um exemplo bem legal de uma DIV criada dentro do mapa: developers.google.com/maps/documentation/javascript/examples/… - note que é uma div mesmo. No seu caso, basta não por a parte do clique, se quer apenas um elemento informativo.
    – Largato
    Commented 17/03/2021 às 20:25
  • @Bacco eu estava fazendo desta forma, se nao me engano peguei deste mesmo link que me mandou... Mas aconteceu o mesmo, ao mudar a resolução do device, a div subia... Commented 17/03/2021 às 20:45
  • Pq tipo, em qualquer um dos cenarios, seja fazendo dentro do mapa, ou da forma que eu publiquei aqui, eu preciso colocar um margin para que nao fique colado na parte inferior... Commented 17/03/2021 às 20:47

1 Resposta 1

-2

Uma maneira de resolver o problema é adicionar um customcontrol na instância do google maps.

Isso vai adicionar um controle personalizado em uma camada acima do mapa, é possível escolher a posição onde ele será visualizado. Em meu exemplo estou usando na posição top center mas existem várias possíbilidades para posicionar o elemento de acordo com o que deseja. Ref

Como colocar um card fixo e responsivo em cima do mapa?

Para isso basta adicionar a classe css style width: 100% ao seu controle.

Segue o código que deixa o controle responsivo:

   #mensagem {
       width: 50%;
   }

Repare que aqui estamos atribuindo esta classe css ao elemento com id "mensagem".


Segue o exemplo completo que mostra como adicionar um controle personalizado:
<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Custom control gmap</title>
  <style>
    #map-canvas {
      height: 100%;
      width: 100%;
    }

    #mensagem {
      font-family: Arial, sans-serif;
      background: #522;
      width: 50%;
    }
 </style>
</head>
<body>
  <div id="map-canvas"></div>
  <div id="mensagem">
    <h3>Minha região</h3>
  </div>
  <script>
    
    showMap = () => {
      const map = new google.maps.Map(document.getElementById('map-canvas'), {
         center: { lat: -7.2245007, lng: -35.8798429}, zoom: 8
      });

      const custommessage = document.getElementById('mensagem');
      
      map.controls[google.maps.ControlPosition.TOP_CENTER].push(custommessage);
    }
  </script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?callback=showMap">
  </script>
</body>
</html>

Explicando o código:

No corpo do html criamos o elemento "map-canvas" que é uma div que receberá a instância do google maps. No elemento "mensagem" inserimos o texto que queremos usar como um controle customizado, este controle personalizado possui o texto "minha região".

Dentro da tag script na função showMap faço a instânciação do google maps e atribuímos ao nosso elemento "map-canvas". O mapa está centralizado na cidade de Campina Grande - PB e possui o zoom com valor 8.

Depois pegamos o elemento "mensagem" e adicionamos como um controle personalizado do nosso mapa, com a posição top-center.

Se quer posicionar o elemento na posição inferior esquerda poderia tentar a posição BOTTOM_LEFT.

Este exemplo foi inspirado na api atual do google maps e seus exemplos.

3
  • então, eu tentei fazer parecido com o que voce colocou e para mim nao ficou responsivo... quando a resolução do device muda, a div tambem sobe... Vou tentar fazer exatamente como mostrou pra ver se fica diferente Commented 17/03/2021 às 21:31
  • @LeoHenrique, talvez então o problema esteja em seu css, vou editar a resposta para adicionar o meu css.
    – Danizavtz
    Commented 17/03/2021 às 21:55
  • uma coisa q eu nao tinha tentado era fazer a div no HTML e dar um getElementById pra conseguir renderizar junto ao mapa essa div q eu ja tinha criado... E funcionou, obrigado Commented 17/03/2021 às 22:39

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .