Google maps API positioning issues

Hello everyone
I am having troubles in positioning Google maps at page at the website. URL: Kontorshotell i Stockholm | Välj på!
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

hello and welcome to fcc forum :slight_smile:

did you try using “minWidth/ minHeight”?

happy coding :slight_smile:

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.

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

happy coding :slight_smile:

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

Nevertheless, thanks for trying to help)

1 Like