Google Maps in ion-view, once again

Hello everybody,

I know there are a couple of threads on this or a similar topic, but I can’t figure out what the problem is:
The ionic-starter-maps template does work fine.
However, if I change the structure that the map appears on a subpage/template within an ion-view, the map is not showing nor are there any errors.
My index.html looks like the following:

<body ng-app="MyApp">

The certain template, what is loaded into this ion-nav-view looks like this:

<ion-view title="Map" style="background: transparent;">
    <ion-nav-buttons side="left">
        <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
    <ion-nav-buttons side="right">
        <button class="button button-icon icon ion-android-locate" ng-click="centerOnMe()"></button>
    <ion-content class="has-header" scroll="false">
        <map on-create="mapCreated(map)"></map>

As I said, it does work if I place the <map>-Tag within index.html directly.

I tried changing the sizes and played around with the style attributes as well. Everything is fine there.

Any ideas?

Same issue here. Waiting Ionic team reply.

Looking into this right now, not quite sure why it’s not working…

So it seems it’s just a case of things not playing well with angular. So there is this awesome directive using google maps that works really well.

And here’s a demo.


Thank you!

Do you prefer this one more than the one at



I honestly don’t have an opinion on them. I found that one first actually and opted not to use it because of it’s dependencies. For a quick demo, the second one worked well.

To be honest, I prefer leaflet.!/

Thank you.

I actually have it working now with your first suggestion. Might have a deeper look into leaflet later.