Created
April 20, 2019 09:30
-
-
Save mdmoin7/c1224124350709a26dd57a00c0db2922 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core'; | |
import { environment } from 'src/environments/environment'; | |
import { LocationService } from 'src/app/core/services/location.service'; | |
import { ModalController } from '@ionic/angular'; | |
@Component({ | |
selector: 'app-location-picker', | |
templateUrl: './location-picker.component.html', | |
styleUrls: ['./location-picker.component.scss'], | |
}) | |
export class LocationPickerComponent implements OnInit, AfterViewInit { | |
@ViewChild('map') mapBlock: ElementRef; | |
googleMaps: any; | |
newPosition: { lat: any; lng: any; }; | |
constructor(private location: LocationService, private modal: ModalController) { } | |
ngOnInit() { } | |
ngAfterViewInit() { | |
this.getUserLocationAndPlot() | |
} | |
private getUserLocationAndPlot() { | |
let coords; | |
this.location.getCurrentLocation().then( | |
(location) => { | |
coords = { lat: location.coords.latitude, lng: location.coords.longitude }; | |
return this.getGoogleMaps(); | |
}).then((gMaps) => { | |
const map = this.createMap(gMaps, coords); | |
this.addMarker(coords, map); | |
}).catch( | |
err => console.log('error', err) | |
); | |
} | |
private getGoogleMaps(): Promise<any> { | |
const win = window as any; // fetching the window object of browser/platform | |
const googleModule = win.google; // checking if google sdk was loaded | |
if (googleModule && googleModule.maps) { | |
return Promise.resolve(googleModule.maps); // if loaded return sdk | |
} | |
// else : loading the sdk in the dom | |
return new Promise((resolve, reject) => { | |
const script = document.createElement('script'); | |
script.src = `https://maps.googleapis.com/maps/api/js?key=${environment.googleApiKey}`; | |
script.async = true; | |
script.defer = true; | |
document.body.appendChild(script); | |
script.onload = () => { | |
const loadedGoogleModule = win.google; | |
if (loadedGoogleModule && loadedGoogleModule.maps) { | |
resolve(loadedGoogleModule.maps); | |
} else { | |
reject('Google maps SDK not available.'); | |
} | |
}; | |
}); | |
} | |
private createMap(gMaps, coords) { | |
this.googleMaps = gMaps; // storing maps object globally | |
const mapEl = this.mapBlock.nativeElement; // fetching div from ref | |
const map = new gMaps.Map(mapEl, { | |
center: coords, | |
zoom: 20 | |
}); | |
return map; | |
} | |
private addMarker(coords, map) { | |
// add marker on the map | |
const marker = new this.googleMaps.Marker({ | |
position: coords, | |
draggable: true, | |
animation: this.googleMaps.Animation.DROP, | |
map | |
}); | |
// add event listener to track marker change | |
this.googleMaps.event.addListener(marker, 'position_changed', (event) => { | |
this.newPosition = { | |
lat: marker.getPosition().lat(), | |
lng: marker.getPosition().lng() | |
}; | |
}); | |
} | |
closeModal() { | |
this.modal.dismiss(this.newPosition); // send updated position to parent | |
} | |
private addClickEventMap(map) { | |
map.addListener('click', event => { | |
const selectedCoords = { | |
lat: event.latLng.lat(), | |
lng: event.latLng.lng() | |
}; | |
console.log(selectedCoords); | |
}); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment