CODEWITHSUNDEEP
htmlcssgoogle-mapsgoogle-maps-api-3
Richard
Richard

Reputation: 121

Google Maps will not show unless fixed height is defined

I'm using a column layout framework, and I can't seem to get Google Maps to work with it. It shows fine if i define the height on the map-canvas to be i.e. 100px. However, I want it to be 100% of the height on 6 columns, and this will not work as it apparently sets the height (no matter what percentage i set) to 0.

The code i have is:

<div class="col l6">
    <div id="map-canvas"></div>
</div>

and the javascript is from the simple example on their website.

I have set the height to 100% on <html>and <body> as per their documentation, but it does not work anyways.

My question is this: How do I ensure that the map is shown without having to style the #map-canvas with a specific x pixel height?

Upvotes: 1

Views: 1149

Answers (2)

Whileandt
Whileandt

Reputation: 1

I was fighting with this until recently, the thing is that you actually need to make a full page just for the map (the one on the documentation getting started will do). And then use that with an <iframe> on the actual page that you want it to go. Then you just work with the iframe width and height.

Upvotes: 0

mindparse
mindparse

Reputation: 7295

I have battled with this kind of thing recently when using Bootstrap UI.

I had to add this in my case, see if it helps...

#map-canvas {
    width:100%;
    height:calc(100% - 0px);
}

Upvotes: 3

Related Questions