Google maps API positioning issues

HTML-CSS
1

Hello everyone
I am having troubles in positioning Google maps at page at the website. URL: Kontorshotell i Stockholm | Välj på MatchOffice.se!
Currently, we having a map as a separate option in filter view. But the goal is to make it as a frame on the main list view. At the moment, the style looks like this:

width: 100%;
height: calc(100% - 70px);
position: fixed;
top: 70px;
left: 0;
z-index: 1000;

As soon as I change position: fixed; to something else the map just disappears.

Would be very glad for help

2

hello and welcome to fcc forum :slight_smile:

did you try using “minWidth/ minHeight”?

happy coding :slight_smile:

3

I will try it but somewhat I think it has to do with the type of position. Even when I played with the location of the map on the screen, I did not manage to make the div of the map look on top of the list. Instead, the map is fixed to a certain position and when you scroll through the screen, it stay on top of all content.

4
  • this will keep it always at 70px down from top, we understand that right?

happy coding :slight_smile:

5

Yes…but I think I figure this out already… as I said before it has something to do with position: fixed;
When I changed to position: relative; and adjusted top, left, right, weight and height it worked. It seems that fixed the wrong div cause there were 2 div with similar css

6

Nevertheless, thanks for trying to help)

1 Like
7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.