CODEWITHSUNDEEP
google-mapsionic-framework
chems eddine el garrai
chems eddine el garrai

Reputation: 35

Ionic google maps show after refresh

I have a problem in my application Ionic. I use google maps to display a map in my page. The first time it is displayed correctly. However, when I move to another view and I return to my page, that contained the map, the map does not appear.

Here is my code

controller :

.controller('MapController', function($scope, $ionicLoading,$state) {


google.maps.event.addDomListener(window, 'load', function() {
    var myLatlng = new google.maps.LatLng(37.3000, -120.4833);

    var mapOptions = {
        center: myLatlng,
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map"), mapOptions);

    navigator.geolocation.getCurrentPosition(function(pos) {
        map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
        var myLocation = new google.maps.Marker({
            position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
            map: map,
            title: "My Location"
        });
    });

    $scope.map = map;
});

})

Upvotes: 0

Views: 1107

Answers (1)

Alex Pojman
Alex Pojman

Reputation: 68

This may be due to the way Ionic handles loading of views. Depending on how the app is structured (tabbed, master-detail, etc.), your app could be showing the Map when the MapController View is first loaded, but only re-displaying once you return to that view (not "loading" per se). In other words, the "load" event is never triggered again after showing that view for the first time, and the map itself is removed when navigating away.

Since Ionic is based on AngularJS, I would recommend that you check out the Angular Google Maps Directive found here. Might be a bit easier to work with!

Upvotes: 1

Related Questions