Google Maps in ion-view, once again

1

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">
<ion-nav-view></ion-nav-view>
</body>

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>
    <ion-nav-buttons side="right">
        <button class="button button-icon icon ion-android-locate" ng-click="centerOnMe()"></button>
    </ion-nav-buttons>
    <ion-content class="has-header" scroll="false">
        <map on-create="mapCreated(map)"></map>
    </ion-content>
</ion-view>

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?

2

Same issue here. Waiting Ionic team reply.

3

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

4

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.

2 Likes
5

Thank you!

Do you prefer this one more than the one at http://www.angular-google-maps.org?

Best,

David

6

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.

http://tombatossals.github.io/angular-leaflet-directive/#!/

7

Thank you.

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