Ionic Maps - Fit map inside a small part of a view


I’ve created a very simple Ionic Maps App (using this template), and it works fine, both in the browser and on my devices. As you know, the default maps template produces an app which looks something like this:


I’ve got the default template code.But now i’m trying to change it to make the map fit a small part of the view (on the top-right corner).

It should look something like this:


I thought this could be done with simple CSS (fiddling around with the width and height of the map element), so I went to the style.css and tried changing it.

However, if I change it to something other than 100%, and if I change “display” to something other than “block”, the map simply disappears all together.

What I tried:

  • Changing the width/height/display of the map element. If I do it, the map simply disappears, or appears in front of the other elements (text & buttons of the main view);
  • Fitting it inside the ionic grid’s “col” div. Does not work;
  • Fitting the other content inside the Ionic grid. It does not work - the map is always shown in front of the other elements.

Note: I’m using SASS, does this interfere?

What am I doing wrong? How would you try to make this?

Thank you very much in advance!