Header over status bar problem when using Google Maps

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?

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

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

Glad to here you got this worked out!

1 Like