How to use google map api in ionic with angular js

ionic-v1
1

when i open index.html in brouser google map api is working but it’s not working in android app after building

2

hey gajendra,

i am loading the google map api in my index.html before ionic and angular to be sure that google is loaded.
And then you can use it as descibed in the google api.

Works for me everywere.

Maybe you can give us some more detail about your code :wink:

Greetz.

3

@bengtler thanks for the reply this is my index.html

Ionic Seed App 
<!-- ionic css -->
<link href="lib/css/ionic.css" rel="stylesheet">

<!-- your app's css -->
<link href="css/app.css" rel="stylesheet">

<!-- angularjs scripts -->
<script src="lib/js/ionic.js"></script>
<script src="lib/js/angular/angular.js"></script>
<script src="lib/js/angular/angular-animate.js"></script>
<script src="lib/js/angular/angular-sanitize.js"></script>
<script src="lib/js/angular-ui/angular-ui-router.js"></script>
<script src="lib/js/ionic-angular.js"></script>

<!-- cordova script -->
<script src="cordova.js"></script>

<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.6.0/angularfire.min.js"></script>


<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAFdCQ6r7b8sJDtoszTjbmtJQC_pDpRxRo&sensor=false&language=en"></script>
<script src="js/app.js"></script>
<script src="js/const.js"></script>
<script src="js/directives.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>

<pane ng-controller="CityCtrl">
  <header-bar title="city.title">
  </header-bar>
  <map city="currentCity"></map>
</pane>

This is working in brouser but not in android app

4

Have you tried it on a real android device or only emulating/simulating?

Maybe your android in app browser (not chrome?) does not handle the map-tag or you have deactivated gps, so you can no get your current position?

Maybe you can build up a codepen for your issue?

Have a nice day.

bengtler

5

@bengtler i am using emulator behing proxy can it be a reason for that?

6

Maybe,

Did you have debugged your code during emulation?

The proxy could fail.
Try it on a real device ;).

Greets, bengtler

7

What I can see why is not displaying is because, maybe try to use <ion-pane>...</ion-pane>

8

I simply save the content of the google api to a file, then include the file locally instead of fetching it from the network. It works for me.

Cheer!