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).
I'd like it to 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:
I tried playing around with the ionic starter maps project and here's what worked for me:
Update: (Exactly what you want)
<body ng-app="starter" ng-controller="MapCtrl"> <ion-header-bar class="bar-stable"> <h1 class="title">Map</h1> </ion-header-bar> <ion-content scroll="false"> <div class="row"> <div class="col col-50 col-center"> <h3>Some heading</h3> <p>Some text</p> </div> <div class="col col-50"> <div style="height: 150px; width: 100%;"> <map on-create="mapCreated(map)"></map> </div> </div> </div> <div class="padding"> <a href="#" class="button button-block button-calm">Some button</a> <a href="#" class="button button-block button-positive">Another button</a> </div> </ion-content> <ion-footer-bar class="bar-stable"> <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate"></a> </ion-footer-bar> </body>