Tagged: , , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 17, 2017 at 3:46 pm #865314
    lijndiensten

    Hi guys,

    I am loading a Google Maps via API on my site. It is a code block contained in a color-section. Now, I want to give the div the map is loaded in a full height of 100%, which should follow the 100% screen height of the color-section it is contained in.

    This however results in the Google Maps-div having a height of zero.

    Much appreciated if you can help, understood if you can’t. Thanks already!

    October 19, 2017 at 4:57 pm #866310
    Victoria

    Hey lijndiensten,

    I am seeing the huge map, did you get it working or do you still need to adjust something?

    Best regards,
    Victoria

    October 19, 2017 at 6:42 pm #866402
    lijndiensten

    Hi Victoria,

    Haha, indeed it is already quite huge. Now I achieved this by setting a fixed height of 750px on the containing div, while actually I would like the whole things to follow the height of the 100%-height color section.

    Thanks,
    Ivan

    October 22, 2017 at 7:10 pm #867276
    Victoria

    Hi Ivan,

    You can stick with that, just have the media queries for different screen sizes, and put that in the quick css not in the text block.
    Something like this:

    
@media only screen and (max-width: 767px) {
  #map {
    min-height: 400px;
    height: auto;
    width: 100%;
    overflow: hidden;
    border: none;
  }
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    October 23, 2017 at 5:55 pm #867763
    lijndiensten

    Hi Victoria,

    That will work indeed, thanks! I notice now that I will also need to rework some of the Javascript so that zoom and bounds are right on all devices.

    If I work out something elegant I will share it here, so it may help someone.

    Thanks again!

    Ivan

    October 24, 2017 at 6:40 am #867988
    Rikard

    Hi Ivan,

    Great, thanks for the feedback and please do share if you should come up with something useful :-)

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.