Google Maps Height Problem

ionic-v1
1

Kind of an old problem, but the maps box isn’t showing up when i set the height to 100%. The ‘set body and html to 100%’ solution isn’t working. The view is nested through ui-router and has an abstract parent state. If i set an absolute height the map is showing. Thanks in advance for any hint or help.

Nested View (‘home.index’):

<ion-view hide-back-button="true" left-buttons="leftButtons" right-buttons="rightButtons">
     <ion-content scroll="false" has-header="true">
          <div id="map" search="address" damage-type="damageType" google-maps></div> <!-- google-maps is an own written directive -->
     </ion-content>
</ion-view>

Parent State (‘home’):

<ion-pane ion-side-menu-content>
    <ion-nav-bar type="bar-energized"
                 back-button-type="button-icon"
                 back-button-icon="ion-ios7-arrow-back"></ion-nav-bar>
    <ion-nav-view name="homeContent"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
 ......

Routes:

$stateProvider
    .state('home', {
        url: "/home",
        abstract: true,
        templateUrl: "templates/home.html"
    })
    .state('home.index', {
        url: "/index",
        views: {
            'homeContent': {
                templateUrl: "templates/home.index.html", 
                controller: 'IndexCtrl',
                resolve: {
                    auth: function (Auth) {
                        return Auth.check()
                    }
                }
            }
        }
    })
1 Like
2

Take a look here and see if there are ideas in it.

3

Thank you for your code but unfortunately the example that you provide doesn’t work.
Anyone knows how to integrate google map into ion-content of ion-views?
Thanks.

4

i had no problems to integrate google maps in an ionic view also without an own directive.
You might inspect your traffic, if the google maps is loading, inspect your dom if there is the google map and so on.

And the code of your directive would be nice.

greetz, bengtler

5

Tnahks @bengtler, I solved my issue following this Ionic Google Map Example in ng-view

6

For anyone having Map height issues, this solution worked for me when no others did - https://github.com/angular-ui/angular-google-maps/issues/287

7

If anyone is still having this issue, my fix was this:
-adding a class to the ion-content

<ion-content class="map-container">

-adding css to make the .scroll div (it’s inserted by ionic inside of content) be full height, and changing the existing .angular-google-map-container to fill that

.map-container .scroll {
  height: 100%;
}
.angular-google-map-container {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

I’m not sure if there’s any problem with setting that single .scroll div to 100% height, but so far my testing didn’t show any issue.

6 Likes
8

work like a charm! thanks to save my life! :smile:

1 Like