title: ionic app google maps displaying - mobile device location issue
body: <p>I am developing an android app with <strong>Ionic Cordova and Angular</strong>. in one of the page my requirement is to display google map with current location.</p>
  <p>So by installing <strong>ionic Cordova google map and geolocation plugins</strong> and with the <strong>google maps API key</strong> and iam able to display google map in one of page with current location. This is working fine if the mobile device location is ON. Incase of mobile device is off and we opened this map page (having location in the mobile off), it continuously loading with the message Fetching your Location and strucking there itself.</p>
  <p><a href="https://i.stack.imgur.com/oYnmF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oYnmF.jpg" alt="loading screenshot" /></a></p>
  <p>I want  Mobile App should display <strong>alert message to user that location in Mobile is OFF</strong> when opened the map page with mobile device location off.</p>
  <p>below is the code i tried:</p>
  <p>Plugins imported in app.module.ts page</p>
  <pre><code>import { GoogleMaps } from '@ionic-native/google-maps/ngx';
  import { Geolocation } from '@ionic-native/geolocation/ngx';
  </code></pre>
  <p>In page.ts file</p>
  <pre><code>import { Component, OnInit, NgZone, ViewChild, OnDestroy } from '@angular/core';
     declare var google;
  
  import {
   ToastController,
   Platform,
   LoadingController,
   AlertController
  } from '@ionic/angular';
  import {
   GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  Marker,
  GoogleMapsAnimation,
  LocationService,
  MyLocation,
  GoogleMapOptions,
  LatLng,
  Environment
   } from '@ionic-native/google-maps/ngx';
   import { NativeGeocoder, NativeGeocoderOptions, NativeGeocoderResult } from 
   '@ionic-native/native-geocoder/ngx';
  
  import { Router } from '@angular/router';
  import { SelectedPickupPoint } from 'src/app/models/map.model';
   import { HelperService } from 'src/app/services/helper.service';
   import { ApiService } from 'src/app/services/api/api.service';
   import { PickupPoint } from 'src/app/models/pickupPoint.model';
   import { Subscription } from 'rxjs';
  
    @Component({
  selector: 'app-pickup-map',
    templateUrl: './pickup-map.page.html',
    styleUrls: ['./pickup-map.page.scss'],
      })
      export class PickupMapPage implements OnInit, OnDestroy {
  
     @ViewChild('map_canvas', { static: true }) mapElement: any;
  private myLocation: MyLocation;
  private loading: any;
  private map: GoogleMap;
  public search: string = '';
  private googleAutocomplete = new google.maps.places.AutocompleteService();
  pickupPointsData: Array&lt;PickupPoint&gt;;
  public searchResults = new Array&lt;any&gt;();
  private pickUpPointsSubscription: Subscription;
  
  constructor(
  public toastCtrl: ToastController,
  private platform: Platform,
  private loadingCtrl: LoadingController,
  private ngZone: NgZone,
  private nativeGeocoder: NativeGeocoder,
  public router: Router,
  private helperService: HelperService,
  private apiService: ApiService,
  private alertController: AlertController
  
  )
  
   ngOnInit() {
  this.helperService.showLoader('Fetching your location');
  this.mapElement = this.mapElement.nativeElement;
  this.getUserLocation().then(
    res =&gt; {
      
      this.myLocation = res;
      this.helperService.hideLoader();
      return this.myLocation;
    }
  ).then(
    res =&gt; {
      this.apiService.pickupList(this.apiService.loggedInUser.value.id, this.myLocation.latLng.lat, this.myLocation.latLng.lng, this.selectedRadius)
        .then(
          res =&gt; {
            // alert('ONINITRESP' + JSON.stringify(res));
            this.pickUpPointsSubscription = this.apiService.castpickUpPointsList.subscribe(
              data =&gt; {
                // alert('uppper' + JSON.stringify(data));
                if (data.length === 0) {
                  this.pickupPointsData = data;
                  this.loadMapWithoutMarkers(this.myLocation.latLng.lat, this.myLocation.latLng.lng).then(
                    res =&gt; {
                      alert('There are no pickup points in this location, Please try with a different one or change the Radius');
                    }
                  );
                } else if (data.length !== 0) {
                  this.nearestCenter = data[0];
                  this.pickupPointsData = data;
                  try {
                    this.loadMap(this.myLocation.latLng.lat, this.myLocation.latLng.lng);
                  } catch (err) {
                    alert(err);
                  } finally {
                    this.loading.dismiss();
                  }
                }
              },
              error =&gt; {
                 alert(JSON.stringify(error));
              });
          },
          err =&gt; {
             alert(err);
            }
          )
      }
    )
  }
  
  
  
  
  
    async getUserLocation(): Promise&lt;MyLocation&gt; {
     let myLocation: MyLocation = await LocationService.getMyLocation();
     return myLocation;
    }
  
   async loadMapWithoutMarkers(latitude, longitude) {
    this.loading = await this.loadingCtrl.create({
    message: 'Loading Map. Please wait...'
     })
      await this.loading.present();
  
     try {
    const mapOptions: GoogleMapOptions = {
      controls: {
        zoom: false
      }
    }
    if (!this.map) {
      this.map = GoogleMaps.create(this.mapElement, mapOptions);
    }
    this.addOriginMarker(latitude, longitude);
    this.loading.dismiss();
  } catch (error) {
    alert(error);
    this.loading.dismiss();
   }
   }
  
   async loadMap(latitude, longitude) {
   this.loading = await this.loadingCtrl.create({
    message: 'Loading Map. Please wait...'
    })
    await this.loading.present();
     const mapOptions: GoogleMapOptions = {
      controls: {
      zoom: false
      }
    }
  
  
  
  
    }
  </code></pre>
  <p>In HTML :</p>
  <pre><code>&lt;ion-content&gt;
  &lt;div #map_canvas id=&quot;map_canvas&quot;&gt;
  
   &lt;/div&gt;
  
   &lt;/ion-content&gt;
  </code></pre>
  <p>please help me on this, how can i show message to the user to turn on his mobile location.</p>
  <p>thanks a lot</p>