CODEWITHSUNDEEP
iosangularjscordovagoogle-mapsionic-framework
kbeckster
kbeckster

Reputation: 45

Ionic ios emulator not loading google maps

I've created an ionic hybrid app that should access google maps using angular-google-maps.min.js.

The problem I'm having is that the app works fine in the browser but I get the "white screen of death" in the ios emulator as well as the ionic view app. However, if I run ionic emulate ios -l-c the map loads as expected within the emulator.

I've read through many possible solutions but they don't seem to help in my instance.

Here are some things I have tried:

1) Added the following code to config.xml:

<access origin="http://maps.google.com"/>

2) Deleted all "/" before linking to google maps js (where XXXX is filled in with my key) in index.html:

<!-- ionic/angularjs-google-maps js -->
<script src="lib/lodash/lodash.min.js"></script>
<script src="lib/angular-simple-logger/dist/angular-simple-logger.min.js"></script>
<script src="lib/angular-google-maps/dist/angular-google-maps.min.js"></script>
<script src="//maps.googleapis.com/maps/api/js?key=XXXX"></script>

3) Checked that I have the cordova plugins in my projects as well as ran:

    cordova build ios
    ionic build ios
    ionic emulate ios

4) Ran

    ionic platform remove ios
    ionic platform add ios

5) Looked at the logs of the emulator, it's possible I'm reading them incorrectly (first time using them) but I'm not seeing any obvious errors or 404 not founds.

Any ideas?

I really think when my app is being built it isn't pulling in the angular-google-maps.min.js and related files but not sure why that would be the case. Below is a screenshot of my www folder structure if that helps:

WWW folder structure

Upvotes: 0

Views: 1148

Answers (1)

pkiv
pkiv

Reputation: 26

Wow, this is my first answer on StackOverflow! I had the exact same problem as you. As it turns out, the problem is in the CSS of the map. This is why you are not seeing any issues in the console.

Here is the bad CSS:

<style type="text/css">
    .angular-google-map,
    .angular-google-map-container {
      height: 90%;
  }
</style>

This causes the map not to appear on the iOS simulator (I have not tested it on an actual iOS device, but the above code works fine on Android 6.01).

By adding a percentage to the parent (scroll in this case), you can then modify the percentage of it's child elements. 

<style type="text/css">
  .scroll {
      height: 100%;
  }
  .angular-google-map, .angular-google-map-container {
      width: 100%;
      height: 100%;
  }
</style>

Upvotes: 1

Related Questions