Search code examples
cssangularjscordovaionic-frameworkng-map

VS2015-Cordova-Ionic-Angular-ngMap: map height defaults to 300px

I obviously have a lot to learn about CSS!

I'm using VS2015 and Cordova to develop a mobile application. I'm using ngMap (http://ngmap.github.io/) to wrap Google maps. I really like the library! The problem is that it defaults the size of 300px, and my CSS skills are too poor to correctly override that.

I know that ngMap defaults to 300px, and that you can specify default-style="false" and then provide overrides in CSS that specify position: absolute; height:100%; width:100% - which should make the map fill the page.

When I try to do that, I end up with this: utter failure

When I accept the default behavior, I have a working map, but it's only 300px tall: I suck at CSS

Here's a Plunker that's simple, but demonstrates the issue I'm experiencing: http://plnkr.co/edit/8qfGaLBMgXFtluELZhCs?p=preview

Note that the CSS has the recommended overrides. When those are omitted, the map is visible - but only 300px tall. I know this should not be so hard, and I know others have had success following the instructions listed above. I just can't get it to work.

For what it's worth, the behavior is the same when I deploy it to my Samsung S5: I see the lower left-hand corner of the map. Any help appreciated!!

Solution

  • Adding some CSS and triggering "resize" event you can achieve your goal:

    CSS: 

    body, html {
  height:100%;
  width:100%;
}

.map {
  position:absolute;
  height:100%;
  width:100%;
}

.scroll {
  height: 100%;
}

    JS:

    NgMap.getMap({ id: "splashSearch" }).then(function (map) {
  vm.map = map;

  $timeout(function() {
    google.maps.event.trigger(map,'resize');
  }, 200);
});

    Forked your plunker: http://plnkr.co/edit/7dVCO8FpWxmLVVSMtqjH?p=preview