One way to solve the problem is to add a customcontrol in the instance of google maps.
This will add a custom control on a layer above the map, it is possible to choose the position where it will be viewed. In my example I’m using in the position top center but there are several possibilities to position the element according to what you want. Ref
How to place a fixed and responsive card on top of the map?
To do this simply add the css style width class: 100% to your controller.
Follow the code that makes the control responsive:
#mensagem {
width: 50%;
}
Note that here we are assigning this css class to the element with id "message".
Follow the full example that shows how to add a custom control:
<!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>
Explaining the code:
In the html body we created the element "map-canvas" which is a div that will receive the instance of google maps.
In the "message" element we insert the text we want to use as a custom control, this custom control has the text "my region".
Inside the script tag in the function showMap I do the instânciação of google maps and attribute to our element "map-canvas". The map is centered on the city of Campina Grande - PB and has the zoom value 8.
Then we take the "message" element and add it as a custom control of our map, with the position top-center.
If you want to position the element in the lower left position could try the position BOTTOM_LEFT.
This example was inspired by the current api of google maps and their examples.
Important you [Dit] your question and reduce the problem to a [mcve] (inclusive, that does not depend on external links - these can serve only as a complement), along with the solution attempt. To better enjoy the site, understand and avoid closures and negativations worth reading What is the Stack Overflow and the Stack Overflow Survival Guide (summarized) in Portuguese. When editing the post as directed, the question goes to a community review queue automatically.
– Bacco
It has not solved yet, but it has improved (more details on the links), anyway I can already say that the biggest problem is that your div is not part of the map. When you want to put something in the google map, it’s good to create the material dynamically, using the map API itself. I don’t remember the method name, but if you give a createelement with div, you can insert it as a native element later. I recommend one studied in this part of the API, will make your life much easier. Mapboxgl is also an interesting alternative (besides less polluted depending on use) and has a very generous free Tier.
– Bacco
The post is closed, but the comments work, so for the specific case can help here. Here is a nice example of a DIV created inside the map: https://developers.google.com/maps/documentation/javascript/examples/control-custom - note that it is a div even. In your case, just don’t put the click part if you just want an informative element.
– Bacco
@Bacco I was doing this way, if I’m not mistaken I got this same link you sent me... But the same thing happened, by changing the device resolution, the div...
– LeoHenrique
Because, in any of the scenarios, whether doing inside the map, or the way I published it here, I need to put a margin so it doesn’t get stuck at the bottom...
– LeoHenrique
And for this specific case I need to put a component beyond my text there, it’s a static item too, but when I tried to render, the component didn’t appear... so the other point q decided to use out....
– LeoHenrique
I believe it will end up complicating a little make out. What you can do then is this: <div #meumapa position relative margin 0 padding 0><div #map></div><div #leohenrique position Absolute bottom:both left:tanto></div> - so it will be relative to #meumapa, and the google #map you put at 100% width and height. This external div would be for google not interfere with your CSS, but to make the 2 things align
– Bacco