Skip to content

Instantly share code, notes, and snippets.

@c-goosen
Created December 29, 2017 13:54
Show Gist options
  • Save c-goosen/180433c2ac93fbbe02d0c2811312411c to your computer and use it in GitHub Desktop.
Save c-goosen/180433c2ac93fbbe02d0c2811312411c to your computer and use it in GitHub Desktop.
Go to current location immediately with ionic native googlemaps and geolocation
// Most of the guides didn't make this very clear.
// I need to load the map on my immediate position.
// Still needs some improvements
import { Component, ViewChild, ElementRef } from '@angular/core';
import { Platform } from 'ionic-angular';
import { Geolocation ,
} from '@ionic-native/geolocation';
import { GoogleMaps,
GoogleMap,
LatLng,
GoogleMapsEvent,
GoogleMapOptions,
MyLocation
} from '@ionic-native/google-maps';
import {isApp} from '../../app/app-settings';
declare const google;
@Component({
selector: 'page-emergency',
templateUrl: 'emergency.html'
})
export class EmergencyPage {
@ViewChild('map') mapElement: ElementRef;
map: GoogleMap;
private location:LatLng;
constructor(
private platform: Platform,
private geoLocation: Geolocation,
private googleMaps: GoogleMaps,
) {
platform.ready().then(() => {
// Ive added this to prevent loading if in browser mode
// Native apps don't run in browser emulation
if (isApp){
this.loadMap(this.location);
}
});
let watch = this.geoLocation.watchPosition();
watch.subscribe((data) => {
console.log("Data from watchPosition")
console.log(data.coords)
if ('coords' in data){
if ('longitude' in data.coords && 'latitude' in data.coords){
this.loadMap(this.location);
}}
});
}
loadMap(location) {
// Map loaded on location promise
this.geoLocation.getCurrentPosition().then((resp) => {
// this.firebase.logEvent("load_map","Loading Map")
this.location = new LatLng(resp.coords.latitude, resp.coords.longitude);
let mapOptions: GoogleMapOptions = {
camera: {
target: resp.coords,
zoom: 12,
tilt: 30
},
controls: {
compass: true,
myLocationButton: true,
indoorPicker: true,
zoom: true,
mapToolbar: true // currently Android only
},
};
this.map = GoogleMaps.create('map', mapOptions);
this.map.setMyLocationEnabled(true);
this.map.getMyLocation();
// Wait the MAP_READY before using any methods.
this.map.one(GoogleMapsEvent.MAP_READY)
.then(() => {
console.log('EmergencyPage: Map is ready!');
this.map.moveCamera({
target: this.location,
zoom: 15,
tilt: 10
}).catch(error => {
console.log("Error moving camera");
});
// Now you can use all methods safely.
this.map.addMarker({
title: 'Ionic',
icon: 'blue',
animation: 'DROP',
position: this.location
})
.then(marker => {
// marker.on(GoogleMapsEvent.MARKER_CLICK)
marker.on()
.subscribe(() => {
alert('clicked');
});
}).catch(error => {
console.log("Error settings marker with click")
});
});
});
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment