Google maps Ionic Framework [rough guide]

The Ionic Framework creates a rails like framework form cross platform mobile applications.

The full guide to setting it us is available here http://ionicframework.com/getting-started/

The basis application I used is created by this command 'ionic start [your app name] tabs'

To ensure you do not have premission problems when adding the google map plugin I then run 'sudo chmod -R 777 [your app folder]'

Open a developer google account and create a credential for an android application https://github.com/wf9a5m75/phonegap-googlemaps-plugin/wiki/Tutorial-for-Windows step 3 onwards.

The exact project id to identify your app for the google api is held in the root folder config.xml file.

 The base code for the tabs, controller and CSS is taken from here http://codepen.io/ionic/pen/uzngt

This

<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true">
</script>

has to be in the index.html head because it will not load in time for the controller if its in the tab.

My tab is below;

<ion-view view-title="Maps">    <ion-content ng-controller="MapCtrl">        <ion-item>            <div id="map" data-tap-disabled="true"></div>            <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>        </ion-item>    </ion-content></ion-view>

Generating the keyfile to sign the apk file

$ keytool -genkey -v -keystore key-name.keystore -alias alias-name -keyalg RSA -keysize 2048 -validity 10000

 Create an ant.properties file with the below;

key.store=D:\\path\\to\\the\\project\\keyname.keystore key.alias=alias-name

This is a very important step

cordova plugin add plugin.google.maps --variable API_KEY_FOR_ANDROID="[your api key from developer.google.com]"

Build your finished apk file

cordova build android --release