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


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="[my_key_value]"></script>

my map function is in controller :-


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"

    $ = map;


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

		url: '/',
        templateUrl: 'templates/firstPage.html',
        controller: 'Ctrl'
		url: '/map',
        templateUrl: 'templates/home.html',
        controller: 'mapCtrl'


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.