Nope, my question is about the lack of button in the map and how can I hide the popup that was shown everytime I restart the app (or at least change the message).
I didn’t attach any code because this is due to the plugins. The page is:
<ion-slide>
<ion-row style="height:85%">
<ion-col style="height:100%">
<div #pleaseConnect id="please-connect">
<p>{{ "pleaseconnect" | translate }}</p>
</div>
<div #map id="map"></div>
</ion-col>
</ion-row>
<ion-grid style="height:90%" no-padding>
<ion-row style="height:90%">
<ion-col style="height:100%">
<div #pleaseConnect id="please-connect">
<p>{{ "pleaseconnect" | translate }}</p>
</div>
<div #map id="map"></div>
</ion-col>
</ion-row>
<ion-row no-padding style="background-color: #999;height:10%;">
<ion-col no-padding>
{{newevent.where.name}}
</ion-col>
</ion-row>
</ion-grid>
<ion-footer no-border>
<ion-toolbar>
<ion-row>
<ion-col padding>
<button ion-button full small round icon-left color="light" (click)="goPrevSlide()">
<ion-icon name="arrow-dropleft-circle"></ion-icon> Back
</button>
</ion-col>
<ion-col padding>
<button ion-button full small round icon-right color="blue" (click)="goNextSlide()">
Next <ion-icon name="arrow-dropright-circle"></ion-icon>
</button>
</ion-col>
</ion-row>
</ion-toolbar>
</ion-footer>
</ion-slide>
<ion-slide>
The component is:
ionViewDidLoad(){
let isPublic = this.navParams.get('public');
this.newevent.public = isPublic;
this.platform.ready().then(() => {
let mapLoaded = this.maps.init(this.mapElement.nativeElement,
this.pleaseConnect.nativeElement);
});
}
And the provider that create the map is:
import { NgZone, Injectable } from '@angular/core';
import { Geolocation, GoogleMap, GoogleMapsLatLng, GoogleMapsEvent} from 'ionic-native';
import 'rxjs/add/operator/filter';
import { ConnectivityService } from '../../../app/shared/services/connectivity-service';
import { TrackComponent } from './tracking-provider';
declare var google;
@Injectable()
export class GoogleMapProvider {
apiKey: any = "AIzaSyCCgG0RA56obfSHAMd4eyVt0_UIlyH3yK8";
mapElement: any;
pleaseConnect: any;
map: GoogleMap;
mapInitialised: boolean = false;
mapLoaded: any;
mapLoadedObserver: any;
markers: any = [];
geocoder;
public position:any;
constructor(public connectivityService: ConnectivityService, public zone: NgZone,
public trackComponent:TrackComponent) {}
init(mapElement: any, pleaseConnect: any): Promise<any> {
this.mapElement = mapElement;
this.pleaseConnect = pleaseConnect;
return this.loadGoogleMaps();
}
loadGoogleMaps(): Promise<any> {
return new Promise((resolve) => {
if(typeof google == "undefined" || typeof google.maps == "undefined"){
console.log("Google maps JavaScript needs to be loaded.");
this.disableMap();
if(this.connectivityService.isOnline()){
window['mapInit'] = () => {
this.initMap().then(() => {
resolve(true);
});
this.enableMap();
}
let script = document.createElement("script");
script.id = "googleMaps";
if(this.apiKey){
script.src = 'http://maps.google.com/maps/api/js?key=' + this.apiKey + '&callback=mapInit';
} else {
script.src = 'http://maps.google.com/maps/api/js?callback=mapInit';
}
document.body.appendChild(script);
}
}
else {
if(this.connectivityService.isOnline()){
this.initMap();
this.enableMap();
}
else {
this.disableMap();
}
}
this.addConnectivityListeners();
});
}
initMap(): Promise<any> {
this.mapInitialised = true;
let self=this;
return new Promise((resolve) => {
let options = {timeout:10000, enableHighAccuracy:true};
Geolocation.getCurrentPosition(options).then((position) => {
let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
let mapOptions = {
compass: true,
myLocationButton: true,
indoorPicker: true,
zoomControl: true,
center: latLng,
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(this.mapElement, mapOptions);
resolve(true);
});
});
}
disableMap(): void {
if(this.pleaseConnect){
this.pleaseConnect.style.display = "block";
}
}
enableMap(): void {
if(this.pleaseConnect){
this.pleaseConnect.style.display = "none";
}
}
addConnectivityListeners(): void {
document.addEventListener('online', () => {
console.log("online");
setTimeout(() => {
if(typeof google == "undefined" || typeof google.maps == "undefined"){
this.loadGoogleMaps();
}
else {
if(!this.mapInitialised){
this.initMap();
}
this.enableMap();
}
}, 2000);
}, false);
document.addEventListener('offline', () => {
console.log("offline");
this.disableMap();
}, false);
}
addMarker(lat:number, lng:number): void {
var self = this;
let latLng = new google.maps.LatLng(lat, lng);
self.setPosition(lat,lng);
let marker = new google.maps.Marker({
map: self.map,
position: latLng
});
this.markers.push(marker);
}
updatePosition() {
this.trackComponent.startTracking();
let targetPoint = new GoogleMapsLatLng(this.trackComponent.lat,this.trackComponent.lng);
this.map.setCenter(targetPoint);
}
stopTrack() {
this.trackComponent.stopTracking();
}
setPosition(latitude,longitude) {
let targetPoint = new GoogleMapsLatLng(latitude,longitude);
this.map.setZoom(17);
this.map.setCenter(targetPoint);
}
geocodeAddress(address, callback) {
let self = this;
var pos = { address:"", lat:"", long:""};
this.geocoder= new google.maps.Geocoder();
this.geocoder.geocode({'address': address}, function(results, status) {
if (status === 'OK') {
let latitude = results[0].geometry.location.lat();
let longitude = results[0].geometry.location.lng();
self.addMarker(latitude, longitude);
pos.address = address;
pos.lat=latitude;
pos.long=longitude;
callback(pos);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
}
I hope this can help.
Thanks
