Header over status bar problem when using Google Maps

ionic-v1
1

When I add the Google Maps script into my index.html for use throughout my app, the header bar (e.g.: ion-view title) goes over the status bar on my iPhone.

The script I use in my index.html for Google Maps:

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>

Header taking over status bar’s space when including the previous script:

When I remove that particular script, the header takes its normal position (below the status bar).

I’ve also looked at some sample code here: http://codepen.io/ionic/pen/uzngt

How should I go about integrating Google Maps and yet not breaking the header?

2

I’ve tried adding the script before any other JavaScript (before the importing of app.js, controllers.js and ionic.js, etc) and now it works without breaking the header.

1 Like
3

Yeah, any external script need to be placed before the ionic js files.

Glad to here you got this worked out!

1 Like