In ionic app, need to display map in the 3rd view there i am getting error “read property 'firstChild' of null”

ionic-v1
1

Hi, In my ionic application, I have created 4 views in templates folder in the 3rd one, i need google map, There I gave map id and defined map api script in the index pagebut still i am facing issue like:- read property ‘firstChild’ of null

If i am adding the same map div in the index page inside or its working fine, Please help me.

Here is the map div i have used in 3rd view :-

<div id="map" data-tap-disabled="true"></div>

my script in index page is :-

<script src="http://maps.googleapis.com/maps/api/js?key=[my_key_value]"></script>

my map function is in controller :-

$scope.mapFn=function(){

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;
});

}

**Here is my .config code :- **

.config(function($urlRouterProvider,$stateProvider){
$stateProvider.state('firstPage',{
		url: '/',
        templateUrl: 'templates/firstPage.html',
        controller: 'Ctrl'
}).state('home',{
		url: '/map',
        templateUrl: 'templates/home.html',
        controller: 'mapCtrl'
});
$urlRouterProvider.otherwise("/");

})

and I have given a button in my firstPage.html on click of button, home.html view will load there i have mentioned my map id, That it is not loading.

Please help me.