I’m following this tutorial advanced google maps component in ionic 2.
I made it step by step and works perfectly but in single pages only. On my project I’m planning to use tabs or sidemenu design.
I’ve already asked on the blog of this tutorial but still no responses.
Thanks in advance any help or advice will be apreciated.
map.js:
import {Page, NavController} from 'ionic-angular';
import {ConnectivityService} from '../../providers/connectivity-service/connectivity-service';
@Page({
templateUrl: 'build/pages/map/map.html',
})
export class MapPage {
static get parameters() {
return [[NavController], [ConnectivityService]];
}
constructor(nav,connectivityService) {
this.nav = nav;
this.connectivity = connectivityService;
this.map = null;
this.mapInitialised = false;
this.apiKey = null;
this.loadGoogleMaps();
}
loadGoogleMaps(){
var me = this;
this.addConnectivityListeners();
if(typeof google == "undefined" || typeof google.maps == "undefined"){
console.log("Google maps JavaScript needs to be loaded.");
this.disableMap();
if(this.connectivity.isOnline()){
console.log("online, loading map");
//Load the SDK
window.mapInit = function(){
me.initMap();
me.enableMap();
}
let script = document.createElement("script");
script.id = "googleMaps";
if(this.apiKey){
script.src = 'http://maps.google.com/maps/api/js?key=' + apiKey + '&callback=mapInit';
} else {
script.src = 'http://maps.google.com/maps/api/js?callback=mapInit';
}
document.body.appendChild(script);
}
}
else {
if(this.connectivity.isOnline()){
console.log("showing map");
this.initMap();
this.enableMap();
}
else {
console.log("disabling map");
this.disableMap();
}
}
}
initMap(){
this.mapInitialised = true;
navigator.geolocation.getCurrentPosition( (position) => {
let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
let mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.map = new google.maps.Map(document.getElementById("map"), mapOptions);
}, (error) => {
console.log(error);
});
}
disableMap(){
console.log("disable map");
}
enableMap(){
console.log("enable map");
}
addConnectivityListeners(){
var me = this;
var onOnline = function(){
setTimeout(function(){
if(typeof google == "undefined" || typeof google.maps == "undefined"){
me.loadGoogleMaps();
} else {
if(!me.mapInitialised){
me.initMap();
}
me.enableMap();
}
}, 2000);
};
var onOffline = function(){
me.disableMap();
};
document.addEventListener('online', onOnline, false);
document.addEventListener('offline', onOffline, false);
}
}
app.js:
import {App, Platform} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';
import {ConnectivityService} from './providers/connectivity-service/connectivity-service';
@App({
template: '<ion-nav [root]="rootPage"></ion-nav>',
providers: [ConnectivityService],
config: {}
})
export class MyApp {
static get parameters() {
return [[Platform]];
}
constructor(platform) {
this.rootPage = TabsPage;
platform.ready().then(() => {
});
}
}
connectivity-service.js:
import {Injectable} from 'angular2/core';
import {Platform} from 'ionic-angular';
@Injectable()
export class ConnectivityService {
static get parameters(){
return [[Platform]]
}
constructor(platform) {
this.platform = platform;
this.onDevice = this.platform.is('ios') || this.platform.is('android');
}
isOnline() {
if(this.onDevice && navigator.connection){
let networkState = navigator.connection.type;
return networkState !== Connection.NONE;
} else {
return navigator.onLine;
}
}
isOffline(){
if(this.onDevice && navigator.connection){
let networkState = navigator.connection.type;
return networkState === Connection.NONE;
} else {
return !navigator.onLine;
}
}
}
tabs.js:
import {Page} from 'ionic-angular';
import {MapPage} from '../map/map';
import {ListadoPage} from '../listado/listado';
@Page({
templateUrl: 'build/pages/tabs/tabs.html',
})
export class TabsPage {
constructor() {
this.mapPage = MapPage;
this.listPage = ListadoPage;
}
}