How to put a fixed and responsive card on top of the map?

Asked

Viewed 88 times

-1

I’m trying to fix a card on top of the google maps map... but I don’t know how to fix and get responsive too...

My versions

Ionic:

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

I’m using a CSS to do the overlay and also position it in the place I want:

.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);
}

And in html a simple div:

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

I put the code in Fiddler to help...

I would like the card to always be above GOOGLE there at the bottom left corner inserir a descrição da imagem aqui

But when the dimensions change, the card also goes up inserir a descrição da imagem aqui

  • 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.

  • 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.

  • 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 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...

  • 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...

  • 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....

  • 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

Show 2 more comments

1 answer

-2


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.

  • so, I tried to make it look like what Oce put and for me it did not get responsive... when the device resolution changes, the div also goes up... I’ll try to do exactly as you showed to see if it looks different

  • @Leohenrique, maybe then the problem is in your css, I will edit the answer to add my css.

  • one thing I hadn’t tried was to do the div in HTML and give a getElementById to be able to render next to the map this div q I had already created... And it worked, thank you

Browser other questions tagged

You are not signed in. Login or sign up in order to post.