title: Google maps not working with ionic cordova run android
body: <p>I am building an app using the ionic framework. The primary function of the app is based around google maps. I have used <a href="https://www.joshmorony.com/ionic-2-how-to-use-google-maps-geolocation-video-tutorial/" rel="nofollow noreferrer">this tutorial</a> which uses the java script google maps API. Everything works perfectly when I run ionic lab or ionic serve however when using an android emulator by running: ionic cordova run android the place where the google maps should be is totally blank. I do not get any error messages either. Additionally I am using cordova version 7.0.1 and ionic version 3.5.0. I have tried both the solutions listed in <a href="https://stackoverflow.com/questions/30723403/google-maps-on-ionic-framework-cordova-not-working-on-android-build">this question</a> and the problem is still occurring.</p>
  
  <p>Here is the hopefully relevant parts of config.xml as the other post suggested</p>
  
  <pre><code>&lt;content src="index.html" /&gt;
  &lt;access origin="*" /&gt;
  &lt;access origin="http://maps.google.com" /&gt;
  &lt;access launch-external="yes" origin="geo:*" /&gt;
  &lt;allow-navigation href="http://ionic.local/*" /&gt;
  &lt;allow-intent href="http://*/*" /&gt;
  &lt;allow-intent href="https://*/*" /&gt;
  &lt;allow-intent href="tel:*" /&gt;
  &lt;allow-intent href="sms:*" /&gt;
  &lt;allow-intent href="mailto:*" /&gt;
  &lt;allow-intent href="geo:*" /&gt;
  &lt;access origin="*" /&gt;
  &lt;allow-navigation href="*" /&gt;
  &lt;allow-intent href="*" /&gt;
  &lt;allow-intent href="http://maps.google.com" /&gt;
  &lt;preference name="webviewbounce" value="false" /&gt;
  &lt;preference name="UIWebViewBounce" value="false" /&gt;
  &lt;preference name="DisallowOverscroll" value="true" /&gt;
  &lt;preference name="android-minSdkVersion" value="16" /&gt;
  &lt;preference name="BackupWebStorage" value="none" /&gt;
  &lt;preference name="SplashMaintainAspectRatio" value="true" /&gt;
  &lt;preference name="FadeSplashScreenDuration" value="300" /&gt;
  &lt;preference name="SplashShowOnlyFirstTime" value="false" /&gt;
  &lt;preference name="SplashScreen" value="screen" /&gt;
  &lt;preference name="SplashScreenDelay" value="3000" /&gt;
  &lt;platform name="android"&gt;
      &lt;allow-intent href="market:*" /&gt;
  </code></pre>
  
  <p>Additionally here is the index.html where I link to the api</p>
  
  <pre><code>&lt;script src="https://maps.google.com/maps/api/js?key=
  MY_ACTUAL_API_KEY" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="cordova.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>As requested here is the ts html and css for the home page which uses google maps
  html</p>
  
  <pre><code>&lt;ion-header&gt;
  &lt;ion-navbar&gt;
  &lt;ion-title&gt;
    Smell Louisville
  &lt;/ion-title&gt;
  &lt;/ion-navbar&gt;
  &lt;/ion-header&gt;
  
  &lt;ion-content&gt;
  
  &lt;ion-fab top right&gt;&lt;button ion-fab round [color]="refr"id="Refr"     
  (click)="refMap();setStuff();pickColor();getLatLng();markerOnLocal()"&gt;&lt;ion-
  icon name="refresh-circle"&gt;&lt;/ion-icon&gt;&lt;/button&gt;&lt;/ion-fab&gt;
  
  &lt;div #map id="map"&gt;&lt;/div&gt;
  &lt;div id="pad"&gt;&lt;/div&gt;
  &lt;button (click)="openFormPage()" id="hundPer" ion-button outline     
  [color]="button1"&gt;&lt;div #LeavRev id="LeaVRev"&gt;&lt;p id="CenterP"&gt;Report how your     
  air smells&lt;/p&gt;&lt;/div&gt;&lt;/button&gt;
  &lt;div id="pad"&gt;&lt;/div&gt;
  &lt;button (click)="openPastPage();"id="hundPer" ion-button outline 
  [color]="button2"&gt; &lt;div #Prev id="PreV"&gt;&lt;p id="CenterP"&gt;View maps from 
  previous days&lt;/p&gt;&lt;/div&gt;&lt;/button&gt;
  &lt;div id="hundPer"&gt;
  &lt;button id="hundPer"&gt;
  &lt;button (click)="openSettingsPage()"&gt;&lt;ion-icon id="right"name="settings"&gt;    
  &lt;/ion-icon&gt;&lt;/button&gt;
  &lt;button (click)="openAboutPage()"&gt;&lt;ion-icon id="right"name="people"&gt;&lt;/ion-
  icon&gt;&lt;/button&gt;
  &lt;button (click)="openPMPage()" id="pad"&gt;&lt;ion-icon id="right"&gt;PM2.5&lt;/ion-
  icon&gt;    
  &lt;/button&gt;
  &lt;button (click)="openCitationPage()" id="pad"&gt;&lt;ion-icon id="right" 
  name="clipboard"&gt;&lt;/ion-icon&gt;&lt;/button&gt;
  &lt;button (click)="openHelpPage()" id="pad"&gt;&lt;ion-icon id="right" name="help"&gt;
  &lt;/ion-icon&gt;&lt;/button&gt;
  &lt;button (click)="openKeySendPage()" id="pad"&gt;&lt;ion-icon id="right" 
  name="key"&gt;&lt;/ion-icon&gt;&lt;/button&gt;
  &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>page-home {
  #map{height:75%}
  
  
  #LeavRev{border:solid
  ;border-color: green}
  #Prev{border:solid
  ;border-color: royalblue}
  #pad{height:1%}
  #padL{height:1%; width:10%; float:left}
  #padR{height:1%; width:100%; float: right; background-color:#E5E5E5}
  #refr{background-color: #6dc066;border:solid;align-content:right;border-                
  color: green;color:whitesmoke}
  
  #CenterP{text-align: center}
  #hundPer{width:100%}
  
  #right{float:right}
  #left{float:left}
  
  }
  </code></pre>
  
  <p>ts hopefully just the relevant parts</p>
  
  <pre><code>import { Component, ViewChild } from '@angular/core';
  import { NavController, NavParams, Events,AlertController } from 'ionic-
  angular';
  import { Geolocation } from '@ionic-native/geolocation';
  import { FormPage } from '../form/form';
  import { PastPage } from '../past/past';
  import { AboutPage} from '../about/about';
  import { HelpPage} from '../help/help';
  import { KeySendPage } from '../key-send/key-send'
  import { SettingsPage } from '../settings/settings';
  import{ Storage } from '@ionic/storage';
  import{Pm2_5Page} from '../pm2-5/pm2-5';
  import {CitationPage} from '../citation/citation';
  import{SendMarkerProvider } from '../../providers/send-marker/send-
  marker';
  import {NotificationsPage} from '../notifications/notifications';
  
  
  import { AngularFireDatabase } from 'angularfire2/database';
  //leaving out parts not pertaining to google maps
  export class HomePage {
  @ViewChild('map') mapElement;
  map: any;
  constructor(public navCtrl: NavController, public geolocation: Geolocation,         
  public navParams: NavParams,
  public storage:Storage, public events: Events, public     
  sendMarker:SendMarkerProvider, private alertCtrl: AlertController,
  private fdb:AngularFireDatabase){
  //there is some stuff in the constructor but hopefully it is not relevant I 
  //trying to reduce the amount of code you have to read through
   }
   ionViewDidLoad(){
  console.log(this.mapInitDid)
  this.mapInitDid=false;
  this.initMap();
  }
  
  //initMap() is supposed to load the map and it doesnt on the android 
  //emulator
  initMap(){
  this.geolocation.getCurrentPosition().then((position) =&gt; {
  let latLng = new google.maps.LatLng(38.2527, -85.7585)
  pos=new google.maps.LatLng(38.2527, -85.7585);
  console.log(this.havePerms);
  console.log(latLng)
  
    if(this.havePerms==1){
    latLng = new google.maps.LatLng(position.coords.latitude,         
  position.coords.longitude);
    }
    let mapOptions = {
      center: latLng,
      zoom: 10,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
  
    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
  
  }, (err) =&gt; {
    console.log(err);
  });
  
   console.log("map is go");
   this.mapInitDid=true;
  // this.markerOnLocal();
  }
  }
  </code></pre>
  
  <p>Any help would be much appreciated</p>