Google Map Doesn't work in Mobile Ionic 2


#1

I have created an application which is using google map. It works fine in the browser when I test it. But when I run it in my android phone in debug mode. The map doesn’t show in the mobile. Read few post on stackoverflow regarding whitelisting and all but it didn’t work for me. It’s Ionic 2 project.
Then I tried to debug from chrome by going to chrome://inspect then I choose my android phone and then in the console there are no errors or warning. Just one log which says DEVICE READY FIRED AFTER 571 ms. Please help me its out of my mind.
Thank you.

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import { Geolocation } from 'ionic-native';
import { NavController, Tabs, AlertController } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

declare var google;

// Get Components
import {Footer} from '../footer/footer';
import { Device } from '../device/device';
import { Community } from '../community/community';
import { More } from '../more/more';
import { Stats } from '../stats/stats';
import { City } from '../city/city';




@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  entryComponents: [Footer]
})


export class Home implements AfterViewInit {
	@ViewChild('mapDiv') mapDiv:ElementRef;
  @ViewChild('footerTabs') tabRef: Tabs;
	map;
	t;
  tab1Root: any = Home;
  tab2Root: any = City;
  tab3Root: any = Device;
  tab4Root: any = Community;
  tab5Root: any = More;
  city;
  lat;
  long;
  labels = 'MiyabiPurifier';
  constructor(public navCtrl: NavController, public _http:Http, public alertCtrl:AlertController){}
  
  ngAfterViewInit(){
	  this.initMap();
  }
  
  initMap()
  {
  	 Geolocation.getCurrentPosition().then((position) => {
 
      let latitude = position.coords.latitude;
      let longtitude = position.coords.longitude;

      // Set for this class
      this.lat = latitude;
      this.long = longtitude;

      console.log('lat '+ this.lat);
      console.log('long ' + this.long);
      this.getCityName(latitude, longtitude);


      let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
 
      let mapOptions = {
        center: latLng,
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var  map  =  new  google.maps.Map(this.mapDiv.nativeElement, mapOptions);  
   
      var  waqiMapOverlay  =  new  google.maps.ImageMapType({  
                  getTileUrl:  function(coord,  zoom)  {  
                            return  'http://tiles.aqicn.org/tiles/usepa-aqi/'  +  zoom  +  "/"  +  coord.x  +  "/"  +  coord.y  +  ".png?token=_TOKEN_ID_";  
                  },  
                  name:  "Air  Quality",  
        });  
  
      map.overlayMapTypes.insertAt(0,waqiMapOverlay);  



    }, (err) => {
      if(err.code == 1)
      {
        let alert = this.alertCtrl.create({
          title: 'GPS Not Avaiable',
          subTitle: 'Please allow GPS permission for MiyabiAir',
          buttons: ['OK']
        });
        alert.present();
      }else{
        let alert = this.alertCtrl.create({
          title: 'GPS Not Avaiable',
          subTitle: 'Unable to use GPS. Please Try again letter',
          buttons: ['OK']
        });
        alert.present(); 
        console.log(err);
      }
    });
  }

  openStats(){
    this.navCtrl.setRoot(Stats, {
      lat: this.lat,
      long: this.long,
      city: this.city
    });
  }

  getCityName(latitude, longitude){
    
    // google api link
    let url = "http://maps.googleapis.com/maps/api/geocode/json?latlng="+latitude+","+longitude+"&sensor=true";

    this._http.get(url)
      .map((res) => res.json())
      .subscribe((data) => this.setAddress(data));
  }
  

  setAddress(data)
  {
    if(data.status == "OK")
    {
      this.city = data.results[0].address_components[5].long_name;
    }
  }

  // Adds a marker to the map.
  addMarker(location, number) {
    // Add the marker at the clicked location, and add the next-available label
    // from the array of alphabetical characters.
    var marker = new google.maps.Marker({
      position: location,
      label: this.labels[number],
      map: this.map
    });
  }

  // Get the data from miyabiindia.com
  getMapData()
  {
    let url = "URL_HERE";

    this._http.get(url)
      .map(res => res.json())
      .subscribe((data) => {
        
        for(let i =0;i < data.length; i++)
        {
          let location = data[i].location;
          let number = data[i].number

          this.addMarker(location, number);
        }
        
      }, (error) => {

        console.error(error);
      }, () => {
        console.log('Feeding process done ');
      })}}