Google maps <div> has 0 height

1

I am trying to embed a fullscreen Google map. The map div has no height even though it was styled to have 100% width and height.

Code

I have included my code, although I’m not sure why the Codepen isn’t working correctly. (I’ve included all external resources)

I’ve tried some previous solutions offered for this problem but they seem not to work anymore.

I haven’t tried the GoogleMap AngularJS Directive though, should I use it?

2

Have you checked out codepen demo of this?

1 Like
3

Works Perfectly. Here’s a solution summary:

  <ion-content class="hasgmap">
    
        <div id="map-canvas" style="height: 100%; width: 100%;"></div>
    
      </ion-content>

Then in your custom style.css:

.hasgmap>.scroll{
  height:100%
}
1 Like