Google Map Issue - Ionic 2

Question

Google map shows in the browser but when I run command ionic run android it build successfully and launch the app but everything works fine except Google map there are no errors in chrome://inspect it just says DEVICE READY FIRED AFTER 630 ms but no error for google map. I did register app on console.developers.google.com got the key and using it in www/index.html in the head but still no changes. Please help thank you. home.ts (Map function is inside of this file)

  // Get the current location
   Geolocation.getCurrentPosition().then((position) => {
  // Set latitude and longtitude variable
  this.lat = position.coords.latitude;
  this.long = position.coords.longitude;

  // This function will get the name of the city where user is located
  this.getCityName(this.lat, this.long);

  // this function sets up the google map 
  let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

  let mapOptions = {
    center: latLng,
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var  mapi  =  new  google.maps.Map(this.mapDiv.nativeElement, mapOptions);  
  // Below code is provided by a ai pollution control website (http://aqicn.org/faq/2015-09-18/map-web-service-real-time-air-quality-tile-api/)
  // haven't changed anything in below code copied as it is from web
  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",  
    });  
  // Insert above received data into map
  mapi.overlayMapTypes.insertAt(0,waqiMapOverlay);  

`

Answer 1

Probably your map is not getting coordinates(position.coords.latitude, position.coords.longitude) , that's why your map is not rendering. try with navigator.Geoloaction.getCurrentPosition... or check if any plugin is required to get user geolocation. & prefer to give some fallback coordinates.

this.lat = position.coords.latitude || "21.1610858";
this.long = position.coords.longitude || "79.0725101";