Tagged: color section, embed, full height, google maps
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!
Hey lijndiensten,
I am seeing the huge map, did you get it working or do you still need to adjust something?
Best regards,
Victoria
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
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
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