Hi !
I’m trying to modify or erase this alert, i d’ont know why it appear.
Someone knows why ?
home.ts
import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';
import { GoogleMaps } from '../../providers/google-maps';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
@ViewChild('map') mapElement;
map: any;
constructor(public navCtrl: NavController, public maps: GoogleMaps) {
}
ionViewDidLoad(){
this.maps.initMap(this.mapElement.nativeElement);
}
}
Map Provider
import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Geolocation } from '@ionic-native/geolocation';
import 'rxjs/add/operator/map';
@Injectable()
export class GoogleMaps {
map: any;
markers: any = [];
constructor(public http: Http, public geolocation : Geolocation) {}
initMap(mapElement){
console.log('initMap');
let lat: any;
let lng: any;
this.geolocation.getCurrentPosition().then((resp) => {
lat = resp.coords.latitude
lng = resp.coords.longitude
console.log(resp.coords.latitude);
console.log(resp.coords.longitude);
this.endInitMap(lat, lng, mapElement)
}).catch((error) => {
console.log('Error getting location', error);
});
}
endInitMap(lat, lng, mapElement){
let latLng = new google.maps.LatLng(lat, lng);
let mapOptions = {
center: latLng,
zoom: 20,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
this.map = new google.maps.Map(mapElement, mapOptions);
google.maps.event.addListenerOnce(this.map, 'idle', () => {
this.loadMarkers();
google.maps.event.addListener(this.map, 'dragend', () => {
this.loadMarkers();
});
});
}
Index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<!-- cordova.js required for cordova apps -->
<script src="http://maps.google.com/maps/api/js?key="MY_API_KEY"></script>
<script src="cordova.js"></script>
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.error('Error', err));
}
</script>-->
<link href="build/main.css" rel="stylesheet">
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>