title: google map error - ReferenceError: google is not defined in ionic 3 app
body: <p>I am loading google map into my ionic 3 app page. When I load the application using the browser the page is loading fine but when i make the application apk (using <em><code>ionic cordova build android --prod</code></em>) the map is not loading and throwing an exception if <strong>ReferenceError: google is not defined</strong>. I have been googling for few days and I have applied all the solution I got but no use at all. Can anyone please help me to overcome this issue.</p>
  
  <p>My map.ts code is as follows: </p>
  
  <pre><code> import {Component, ViewChild, ElementRef} from '@angular/core';
      import {IonicPage, NavController, NavParams, PopoverController, LoadingController, MenuController} from 'ionic-angular';
      import {Keyboard} from '@ionic-native/keyboard';
      import {Geolocation, Geoposition} from '@ionic-native/geolocation';
      import {NativeGeocoder, NativeGeocoderReverseResult} from '@ionic-native/native-geocoder';
      import {LocationAccuracy} from '@ionic-native/location-accuracy';
  
  declare var google: any;
  
  @IonicPage()
  @Component({
    selector: 'page-map',
    templateUrl: 'map.html',
  })
  export class Map {
  
    latLng: any;
    @ViewChild('map') mapElement: ElementRef;
    map: any;
    showFooter: boolean = true;
  
    constructor(public navCtrl: NavController,
                public navParams: NavParams,
                public popoverCtrl: PopoverController,
                private geolocation: Geolocation,
                public locac: LocationAccuracy,
                public loadingCtrl: LoadingController,
                public keyboard: Keyboard,
                private menu: MenuController,
                public geocoder: NativeGeocoder,) {
    }
  
     ionViewDidLoad() {
       this.getLocation();
       this.menu.swipeEnable(false);
    }
  
  getLocation() {
  
      this.geolocation.getCurrentPosition().then((resp) =&gt; {
  
        let map = new google.maps.Map(document.getElementById('map'));
        var uluru = {lat: -25.363, lng: 131.044};
        this.latLng = new google.maps.LatLng(resp.coords.latitude, resp.coords.longitude);
        let mapOptions = {
          center: this.latLng,
          zoom: 18,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          enableHighAccuracy: true
        };
  
        this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
  
        let marker = new google.maps.Marker({
          map: this.map,
          animation: google.maps.Animation.DROP,
          position: this.latLng,
          center: this.latLng,
          icon: {
            url: 'assets/img/pin.png',
            size: new google.maps.Size(25, 48)
          },
          optimized: false,
        });
  
        // geocode reverse
        var geocoder = geocoder = new google.maps.Geocoder();
  
        var latlng = new google.maps.LatLng(resp.coords.latitude, resp.coords.longitude);
        geocoder.geocode({'latLng': latlng}, function (results, status) {
          console.log(results);
          alert('Status : ' + status);
          this.currentLocation = this.value = "My value";
          if (status == google.maps.GeocoderStatus.OK) {
            if (results[1]) {
              document.getElementById("currentlocation").setAttribute('value', results[1].formatted_address);
            }
          }
        });
        // geocode reverse end
  
        // Route and direction
        var source, destination;
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        directionsDisplay = new google.maps.DirectionsRenderer({'draggable': true});
  
        // current location input
        let currentlocationinput = document.getElementById('currentlocation');
        let currentlocationsearchBox = new google.maps.places.SearchBox(currentlocationinput);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(currentlocationinput);
  
        // destination location input
        let destinationinput = document.getElementById('destination');
        let destinationsearchBox = new google.maps.places.SearchBox(destinationinput);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(destinationinput);
  
        // Direction
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer;
        directionsDisplay.setMap(map);
  
        // on drag and dragend header style change
        this.map.addListener('dragstart', function (event) {
          document.querySelector(".header")['style'].transform = 'translate3d(0px, -320px, 0px)';
          document.querySelector(".scroll-content").classList.add("no_margin");
          document.querySelector(".footer")['style'].transform = 'translate3d(0px, 320px, 0px)';
        });
        this.map.addListener('dragend', function (event) {
          document.querySelector(".header")['style'].transform = 'translate3d(0px, 0px, 0px)';
          document.querySelector(".scroll-content").classList.remove("no_margin");
          document.querySelector(".footer")['style'].transform = 'translate3d(0px, 0px, 0px)';
        });
        // on drag and dragend header style change end
  
      }).catch((error) =&gt; {
        alert(error);
        console.log('Error getting location', error);
      })
  
    }
  }
  </code></pre>
  
  <p>i am hanging on this for few days. if any one could solve, please help me out. Thanks in advance.</p>