Skip to main content
3 de 5
adicionou 385 caracteres ao conteúdo
Danizavtz
  • 3,8mil
  • 12
  • 19
  • 32

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

Não testei a questão da responsividade, mas basta adicionar o css no elemento de acordo com o id do elemento html.

Segue o exemplo da parte essencial que mostra como adicionar um controle personalizado:

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <title>Custom control gmap</title>
  <style>
    #map-canvas {
      height: 700px;
      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>

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.

Danizavtz
  • 3,8mil
  • 12
  • 19
  • 32