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: 700px;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.