map is not rendering second time or on other pages second time ionic 1

Question

I want to show map for two different functionality. when click fist map page its work fine but when after that navigate to other page map its not working show blank page.can any one help ...!!!

first controller code

.controller('ShowMapCtrl', function($scope, Chats, global, $timeout,loader,geolocation,apiservice,local,$cordovaGeolocation,$stateParams) {
        $scope.init = function(){
          var lat = $stateParams.lat;
          var long = $stateParams.long;
          var name = $stateParams.name;
          var time = $stateParams.time;
          var address = $stateParams.address;
           //alert(name+"Map Controller"+time);
           //var options = {timeout: 10000, enableHighAccuracy: true};
           //$cordovaGeolocation.getCurrentPosition(options).then(function(position){
            var latLng = new google.maps.LatLng(lat, long);
            var address = null;
            var map=null;
            var marker=null;
            var mapOptions = {
              center: latLng,
              zoom: 15,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            if(address == 'Not Found Data' || address == null){
                var geocoder = new google.maps.Geocoder;

                var latlng = {lat: lat, lng: long};

             geocoder.geocode({'location': latlng}, function(results, status) {
                if (status === 'OK') {
                    if (results[1]) {
                        address=results[1].formatted_address;
                        //infowindow.setContent();
                    } else {
                        window.alert('No results found');
                    }
                } else {
                    window.alert('Geocoder failed due to: ' + status);
                }
                });
            }
                    if(map!=null){
                        //alert("Map not clear")
                        map.setOptions(mapOptions);
                    }

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



            //Wait until the map is loaded
            google.maps.event.addListenerOnce(map, 'idle', function(){

             if(marker){
              marker.setMap(null);
             }
              marker = new google.maps.Marker({
                  map: map,
                  animation: google.maps.Animation.DROP,
                  position: latLng
              });




                var contentstr="<div><strong>Name:</strong>"+name+"<br/><strong>Time:</strong>"+time+"<br/><strong>Location:</strong>"+address+"</div>";  
              var infoWindow = new google.maps.InfoWindow({
                    content: contentstr
                });

                google.maps.event.addListener(marker, 'click', function () {
                    infoWindow.open(map, marker);
               });

            });
        }



            $scope.$on('$ionicView.beforeEnter', function() {
                $scope.init();
            });

          /*}, function(error){
            console.log("Could not get location");
          });*/

           /*var map;
            document.addEventListener("deviceready", function() {
              var div = document.getElementById("map_canvas");

              // Initialize the map view
              map = plugin.google.maps.Map.getMap(div);

              // Wait until the map is ready status.
              map.addEventListener(plugin.google.maps.event.MAP_READY, onMapReady);
            }, false);

            function onMapReady() {
              var button = document.getElementById("button");
              button.addEventListener("click", onBtnClicked, false);
            }

            function onBtnClicked() {
              map.showDialog();
            }
            */


    })

page for first controller

<ion-view view-title="Map Loaction">
   <ion-content class="has-header">
     <div id="map" data-tap-disabled="true"></div>
    </ion-content>

</ion-view>

SecondControler

.controller('AllEmpLoc', function($scope, Chats, global, $timeout,loader,geolocation,apiservice,local,$cordovaGeolocation,$stateParams) {
            //alert("All Location Emp");

            $scope.init = function(){
                loader.show();
                var url = global.API_URL + "getAlluserlocation/" + local.getData('uid');
                apiservice.callJson(url).then(function(response) {

                    //alert(JSON.stringify(response));
                    console.log("CurrentLocation" + JSON.stringify(response.data));
                    console.log("Name"+response.data[0].name);
                    $scope.userlist = response.data;
                    //alert("length"+response.data.length);
                    //alert("scope length"+$scope.userlist.length);
                    var lat = response.data[0].latitude;
                    var lon = response.data[0].longitude;
                    var address = null;
                    var locations = [];
                    var map=null;
                    var marker=null;
                    var cnt=0;
                    for(var i=0;i<response.data.length;i++){
                            locations[i]=[response.data[i].name,response.data[i].latitude,response.data[i].longitude,response.data[i].address,response.data[i].time];
                    }

                    console.log("Locations->"+JSON.stringify(locations));
                    var mapOptions = {
                                zoom: 8,
                                center: new google.maps.LatLng(lat, lon),
                                mapTypeId: google.maps.MapTypeId.ROADMAP
                            }
                    if(map!=null){
                        //map.clear();
                        map.setOptions(mapOptions);
                    }

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



                        var infowindow = new google.maps.InfoWindow();  
                        for(var i=0;i<locations.length;i++){
                        //alert(locations[i][0]);

                        marker = new google.maps.Marker({
                                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                                map: map
                            });


                            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                                return function() {
                                    var contentStr = "<div> <strong>Name:</strong>"+locations[i][0]+"<br/>"+"<strong>Time:</strong>"+locations[i][4]+"<br/><strong>Location:</strong>"+locations[i][3]+"</div>";    
                                    infowindow.setContent(contentStr);
                                    infowindow.open(map, marker);

                                }
                                })(marker, i));
                    }       

                    //console.log(JSON.stringify(locations));
                    loader.hide();

                }, function(err) {
                    console.error("eroor " + JSON.stringify(err));
                    //alert("error occur->" + err.data);
                });

            }
            $scope.$on('$ionicView.beforeEnter', function() {
                $scope.init();
            });




    }) 

page for second controller

<ion-view view-title="User Location">
   <ion-content class="has-header">
     <div id="map" data-tap-disabled="true"></div>
    </ion-content>
</ion-view>

if one of these two load map succefully second one is not load

Answer 1

Most of the time it is due to ionic caching, add the function below to trigger the map to render again.

$scope.$on( "$ionicView.enter", function( scopes, states ) {
               // This view runs every time you move between tabs
               google.maps.event.trigger( map, 'resize' );
          });