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?

Google maps in Ion-view?

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.