Google places results not showing on mobile[SOLVED]

Ionic Framework ionic-v3
#1

Hey all. Im using @Ionic-native/google-maps, which is working great. I’m also using google autocomplete. In the browser, the results of my autocomplete are showing just fine. I searched the forum for a solution, increasing the z-index of .pac-container. But, when I run on my iOS phone, the results (list of addresses stemming from my searchbar) are not visible.
I have imported the library from google

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDrQa6qfbDpFzKiVUk4eXneID88vGwoonM&libraries=places" async defer></script>

the places API is enabled in my google developers console as well.
Anyone run into a similar problem and find a solution?

There are no errors being thrown, the map works great, etc. Just no visibility. And again, I did search the forums and googled the issue very thoroughly already…

Edit: sometimes the results show, sometimes they don’t.

#2

Got it working. For anyone else who imports @ionic-native/googlemaps and Google Places, this got things working smoothly and consistently.

Combine your 2 scripts, and add async defer to the script.

  1. Script that imports GoogleMaps web API
  2. Script that imports Google Places API
  <script src="https://maps.googleapis.com/maps/api/js?key=******************&libraries=places";
              "https://maps.googleapis.com/maps/api/js?key=******************&callback=initMap" async defer></script>

Place the combined script in your index.html, above

<script src="cordova.js"></script>

And add to whatever component you’re using your search in, in its’ scss, before anything else

.pac-container {
 z-index: 10000 !important
}

Works for me.

Map component achieved with some assistance from @joshmorony’s post:
https://www.joshmorony.com/integrating-native-google-maps-into-an-ionic-2-application/

1 Like
#3

same problem. Work fine on debug mode (browser) but no on device. Input text but not responding.