# Angular google maps not working http://angular-ui.github.io/angular-google-maps/#!/

**URL:** <https://forum.ionicframework.com/t/angular-google-maps-not-working-http-angular-ui-github-io-angular-google-maps/20925>\
**Category:** ionic-v1\
**Created:** [April 14, 2015, 7:01am UTC](https://forum.ionicframework.com/t/angular-google-maps-not-working-http-angular-ui-github-io-angular-google-maps/20925 "2015-04-14T07:01:42Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![reviloera](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/reviloera/32/72238_2.png) [@reviloera](https://forum.ionicframework.com/u/reviloera)\
**Post date:** [April 14, 2015, 7:01am UTC](https://forum.ionicframework.com/t/angular-google-maps-not-working-http-angular-ui-github-io-angular-google-maps/20925/1 "2015-04-14T07:01:42Z")

</div>

Am new to ionic , I have tried to configure angular-google-maps for a day now with no success how is it done , some tutorials will help me. Thanks

---

<div class="post-metadata">

**Author:** ![sjerd](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sjerd/32/7491_2.png) [@sjerd](https://forum.ionicframework.com/u/sjerd)\
**Post date:** [April 14, 2015, 8:11am UTC](https://forum.ionicframework.com/t/angular-google-maps-not-working-http-angular-ui-github-io-angular-google-maps/20925/2 "2015-04-14T08:11:11Z")

</div>

could you make a small codepen of it? i’ve used angular-google-maps quite some times now and i think it’s great here’s a working pen of mine with a map [http://codepen.io/sjerd/pen/yjafu](http://codepen.io/sjerd/pen/yjafu)

---

<div class="post-metadata">

**Author:** ![johandegrieck](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/johandegrieck/32/81330_2.png) [@johandegrieck](https://forum.ionicframework.com/u/johandegrieck)\
**Post date:** [April 14, 2015, 9:08am UTC](https://forum.ionicframework.com/t/angular-google-maps-not-working-http-angular-ui-github-io-angular-google-maps/20925/3 "2015-04-14T09:08:58Z")

</div>

Hello reviloera,

I also had to figure things out on my MAC and spend some time getting Google Maps to work in our app. It is better to use the native Google Maps. It has a much better performance on your mobile device since it uses SVG rather than PNG images. But you’ll need to have an API Key.  
Here’s a good [tutorial for Mac users](https://github.com/wf9a5m75/phonegap-googlemaps-plugin/wiki/Tutorial-for-Mac) and a [tutorial for PC users](https://github.com/wf9a5m75/phonegap-googlemaps-plugin/wiki/Tutorial-for-Windows) Below I’ll try to briefly explain how you can do Google Maps integration on Android.

Set environment paths in your bashprofile

```
~ nano .bash_profile

```

add lines (according to your paths!)

```
export ANDROID_HOME=/usr/local/Cellar/android-sdk/<versionnumber>/
export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

```

Install Apache Ant

Create an API Key and get the Cordova plugin:

- Create a Google account if you don’t have any
- Go to Google APIs Console ([https://console.developers.google.com](https://console.developers.google.com))
- Register your project and turn on Google Maps Android API v2
- Go to API Access page. (APIs & Auth \> Credentials)
- Click [Create New Key] button.
- In the resulting dialog, enter the SHA-1 fingerprint, then a semicolon, then your  
application’s package name (= -element in your config.xml) . Write down the API Key

run this command:

```
cordova plugin add plugin.google.maps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE"

```

Read these docs to discover the great features of the plugin

> **[mapsplugin/cordova-plugin-googlemaps](https://github.com/mapsplugin/cordova-plugin-googlemaps)**
>
> cordova-plugin-googlemaps - Google Maps plugin for Cordova

Make sure to include the ng-cordova.js file BEFORE the cordova.js script

Hope this helps!

---

<div class="post-metadata">

**Author:** ![reviloera](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/reviloera/32/72238_2.png) [@reviloera](https://forum.ionicframework.com/u/reviloera)\
**Post date:** [April 19, 2015, 9:38pm UTC](https://forum.ionicframework.com/t/angular-google-maps-not-working-http-angular-ui-github-io-angular-google-maps/20925/4 "2015-04-19T21:38:22Z")

</div>

Sorry for the late reply I was unwell , thanks for the link really helpful

---

<div class="post-metadata">

**Author:** ![reviloera](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/reviloera/32/72238_2.png) [@reviloera](https://forum.ionicframework.com/u/reviloera)\
**Post date:** [April 19, 2015, 9:40pm UTC](https://forum.ionicframework.com/t/angular-google-maps-not-working-http-angular-ui-github-io-angular-google-maps/20925/5 "2015-04-19T21:40:52Z")

</div>

Sorry for the late reply I was unwell , your codepen opened my eyes BIG THANKYOU the map is working . Am experiencing one more problem sorry for asking so much but I cant launch android navigation from the map

---

<div class="post-metadata">

**Author:** ![reviloera](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/reviloera/32/72238_2.png) [@reviloera](https://forum.ionicframework.com/u/reviloera)\
**Post date:** [April 20, 2015, 12:30am UTC](https://forum.ionicframework.com/t/angular-google-maps-not-working-http-angular-ui-github-io-angular-google-maps/20925/6 "2015-04-20T00:30:03Z")

</div>

I have solved it by having this `< access origin="geo:*" launch-external="yes" />` in config.xml
