center position is displayed at top left corner in ionic modals

[andreasmaier]

Hey, I ran into an issue where angular-google-maps would not display maps correctly in ionic modals.

I created a little sample repo to describe and reproduce this issue. It basically has a tab with a google map that on load displays the map centered correctly. It also provides a possibility to show a modal overlaid on the same page which has the same map, but moves the same center/location to the top left.

The app basically just consists of one tab whose controller is serving the static centerlocation to both the map on the tab view and the modal. Does anybody have an idea what could create this behavior?

controller

angular.module('starter').controller('ModalTabCtrl', function ($ionicModal, $scope) {
    ...
    $scope.map = {
        center: {
            latitude: 37.778414,
            longitude: -122.389212
        },
        zoom: 8
    };
});

tab

<ion-view view-title="Tab">
    <ion-content class="padding">
        <ui-gmap-google-map center='map.center' zoom='map.zoom'>
        </ui-gmap-google-map>
    </ion-content>
    ...
</ion-view>

modal

<ion-modal-view>
    ...
    <ion-content>
        <ui-gmap-google-map center='map.center' zoom='map.zoom'>
        </ui-gmap-google-map>
    </ion-content>
</ion-modal-view>

Here are two images showcasing the shift of the center:

[nmccready]

See #1395 , probably same issue.

[andreasmaier]

Ok got it. I updated the code to use a control and refresh it when the modal gets shown. This works so far for me and was totally already in the api doc.

    $scope.openModal = function () {
        $scope.modal.show();
        $scope.modalControl.refresh({
            latitude: 37.778414,
            longitude: -122.389212
        });
    };