feat(maps)): Add native maps

yannbf · yannbf · commit 391847ee0d1b · 2017-06-25T12:16:03.000-03:00
diff --git a/config.xml b/config.xml
@@ -65,4 +65,8 @@
     <plugin name="cordova.plugins.diagnostic" spec="~3.4.1" />
     <plugin name="cordova-plugin-geolocation" spec="~2.4.2" />
     <plugin name="card.io.cordova.mobilesdk" spec="https://github.com/card-io/card.io-Cordova-Plugin" />
+    <plugin name="cordova-plugin-googlemaps" spec="~1.4.0">
+        <variable name="API_KEY_FOR_ANDROID" value="AIzaSyBaTVlHDndpSgbdDnRsCy2xFJt2tB41NB0" />
+        <variable name="API_KEY_FOR_IOS" value="AIzaSyBaTVlHDndpSgbdDnRsCy2xFJt2tB41NB0" />
+    </plugin>
 </widget>
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "@ionic-native/core": "3.10.3",
     "@ionic-native/diagnostic": "3.10.3",
     "@ionic-native/geolocation": "3.10.3",
+    "@ionic-native/google-maps": "^3.12.1",
     "@ionic-native/splash-screen": "3.10.3",
     "@ionic-native/status-bar": "3.10.3",
     "@ionic/storage": "2.0.1",
@@ -38,6 +39,7 @@
   },
   "devDependencies": {
     "@ionic/app-scripts": "1.3.7",
+    "@ionic/cli-plugin-cordova": "1.4.0",
     "@ionic/cli-plugin-ionic-angular": "1.3.1",
     "typescript": "~2.3.3"
   },
diff --git a/src/app/app.imports.ts b/src/app/app.imports.ts
@@ -20,6 +20,7 @@ import { SlideColorChangingPage } from '../pages/slide/slide-color-changing/slid
 import { ToastService } from '../providers/util/toast.service';
 import { AlertService } from '../providers/util/alert.service';
 import { CameraProvider } from '../providers/util/camera.provider';
+import { NativeGoogleMapsProvider } from '../providers/native-google-maps/native-google-maps';
 
 // Ionic native providers
 import { CardIO } from '@ionic-native/card-io';
@@ -29,6 +30,7 @@ import { Diagnostic } from '@ionic-native/diagnostic';
 import { Geolocation } from '@ionic-native/geolocation';
 import { StatusBar } from '@ionic-native/status-bar';
 import { SplashScreen } from '@ionic-native/splash-screen';
+import { GoogleMaps } from '@ionic-native/google-maps';
 
 // Directives
 import { SlidingDrawer } from '../components/sliding-drawer/sliding-drawer';
@@ -85,6 +87,7 @@ export const Providers = [
     ToastService,
     AppState,
     CameraProvider,
+    NativeGoogleMapsProvider,
 
     // Ionic native specific providers
     BarcodeScanner,
@@ -94,6 +97,7 @@ export const Providers = [
     CardIO,
     StatusBar,
     SplashScreen,
+    GoogleMaps,
 ]
 
 export const Components = [
diff --git a/src/pages/ionic-native/ionic-native.ts b/src/pages/ionic-native/ionic-native.ts
@@ -27,6 +27,10 @@ export class IonicNativePage {
                 title: 'Get image from camera/gallery',
                 page: 'GetImagePage'
             },
+            {
+                title: 'Google Maps',
+                page: 'NativeGoogleMapsPage'
+            },
             {
                 title: 'Runtime permissions',
                 page: 'RuntimePermissionsPage'
diff --git a/src/pages/ionic-native/native-google-maps/README.md b/src/pages/ionic-native/native-google-maps/README.md
@@ -0,0 +1,3 @@
+
+
+ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="AIzaSyBaTVlHDndpSgbdDnRsCy2xFJt2tB41NB0" --variable API_KEY_FOR_IOS="AIzaSyBaTVlHDndpSgbdDnRsCy2xFJt2tB41NB0" && npm install --save @ionic-native/google-maps
diff --git a/src/pages/ionic-native/native-google-maps/native-google-maps.html b/src/pages/ionic-native/native-google-maps/native-google-maps.html
@@ -0,0 +1,17 @@
+<ion-header>
+  <ion-navbar>
+    <ion-title>NativeGoogleMaps</ion-title>
+  </ion-navbar>
+</ion-header>
+
+<ion-content text-center>
+  <div #map id="map" style="height: 100%"></div>
+</ion-content>
+<ion-footer>
+  <button ion-button
+          no-margin large
+          full color="secondary"
+          (click)="addMarker()">
+    Add Marker
+  </button>
+</ion-footer>
diff --git a/src/pages/ionic-native/native-google-maps/native-google-maps.module.ts b/src/pages/ionic-native/native-google-maps/native-google-maps.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { NativeGoogleMapsPage } from './native-google-maps';
+
+@NgModule({
+  declarations: [
+    NativeGoogleMapsPage,
+  ],
+  imports: [
+    IonicPageModule.forChild(NativeGoogleMapsPage),
+  ],
+  exports: [
+    NativeGoogleMapsPage
+  ]
+})
+export class NativeGoogleMapsPageModule {}
diff --git a/src/pages/ionic-native/native-google-maps/native-google-maps.scss b/src/pages/ionic-native/native-google-maps/native-google-maps.scss
@@ -0,0 +1,2 @@
+page-native-google-maps {
+}
diff --git a/src/pages/ionic-native/native-google-maps/native-google-maps.ts b/src/pages/ionic-native/native-google-maps/native-google-maps.ts
@@ -0,0 +1,33 @@
+import { NativeGoogleMapsProvider } from '../../../providers/native-google-maps/native-google-maps';
+import { Component, ViewChild, ElementRef } from '@angular/core';
+import { IonicPage, NavController } from 'ionic-angular';
+
+@IonicPage()
+@Component({
+  selector: 'page-native-google-maps',
+  templateUrl: 'native-google-maps.html',
+})
+export class NativeGoogleMapsPage {
+
+  @ViewChild('map') mapElement: ElementRef;
+
+  constructor(
+    public navCtrl: NavController,
+    public mapsCtrl: NativeGoogleMapsProvider) {
+  }
+
+  // Load map only after view is initialized
+  ngAfterViewInit() {
+    this.mapsCtrl.create(this.mapElement).then( () => {
+      this.mapsCtrl.centerToGeolocation();
+    });
+  }
+
+  addMarker(){
+    this.mapsCtrl.addMarkerToGeolocation('Click me!', this.callbackSample);
+  }
+
+  callbackSample() {
+    alert('The callback was called :D');
+  }
+}
diff --git a/src/providers/native-google-maps/native-google-maps.ts b/src/providers/native-google-maps/native-google-maps.ts
@@ -0,0 +1,90 @@
+import { Injectable, ElementRef } from '@angular/core';
+
+import {
+ GoogleMaps,
+ GoogleMap,
+ GoogleMapsEvent,
+ LatLng,
+ CameraPosition,
+ MarkerOptions,
+ GoogleMapsAnimation
+} from '@ionic-native/google-maps';
+
+import { Geolocation } from '@ionic-native/geolocation';
+
+@Injectable()
+export class NativeGoogleMapsProvider {
+  map: GoogleMap;
+
+  constructor(
+    public geolocation: Geolocation,
+    private googleMaps: GoogleMaps) {
+  }
+
+  // Note: Call this method on ngAfterViewInit
+  create(element: ElementRef) {
+    const options = {
+      backgroundColor: 'white',
+      controls: {
+        compass: true,
+        myLocationButton: true,
+        indoorPicker: true,
+        zoom: true
+      },
+      gestures: {
+        scroll: true,
+        tilt: true,
+        rotate: true,
+        zoom: true
+      }
+    };
+
+    this.map = this.googleMaps.create(element.nativeElement, options);
+    return this.map.one(GoogleMapsEvent.MAP_READY);
+  }
+
+  centerToGeolocation(){
+    return this.getGeolocationPosition().then((position) => {
+      return this.centerToPosition(position);
+    }, error => {
+      return Promise.reject(error);
+    });
+  }
+
+  getGeolocationPosition(){
+    return new Promise((resolve, reject) => {
+      this.geolocation.getCurrentPosition().then((position) => {
+        let latLng: LatLng = new LatLng(position.coords.latitude, position.coords.longitude);
+        resolve(latLng);
+      }, error => {
+        reject(error);
+      });
+    });
+  }
+
+  centerToPosition(latLng: any, zoom?: number, tilt?: number){
+    let cameraPosition: CameraPosition = {
+      target: latLng,
+      zoom  : zoom || 18,
+      tilt  : tilt || 10
+    };
+    return this.map.moveCamera(cameraPosition);
+  }
+
+  addMarker(position, title: string, infoClickCallback, animated = true){
+     let markerOptions: MarkerOptions = {
+       position: position,
+       title: title,
+       animation: animated ? GoogleMapsAnimation.BOUNCE : null,
+       infoClick: infoClickCallback
+     };
+
+     return this.map.addMarker(markerOptions);
+  }
+
+  addMarkerToGeolocation(title: string, infoClickCallback, animated?: boolean) {
+    this.getGeolocationPosition().then(position => {
+      this.addMarker(position, title, infoClickCallback, animated);
+    });
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+`
	`2`	`+`
	`3`	`+ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="AIzaSyBaTVlHDndpSgbdDnRsCy2xFJt2tB41NB0" --variable API_KEY_FOR_IOS="AIzaSyBaTVlHDndpSgbdDnRsCy2xFJt2tB41NB0" && npm install --save @ionic-native/google-maps`