Inhibit google map reload on Angularjs route change

Question

I have a google map as the background for my site. It is used on separate routes to add a visual feature to data shown in the various routes. I would like to make sure this does not get reloaded on every route change which causes a flash of white that is very annoying and not visually pleasing.

I thought I could achieve this by moving it out of my ng-view since everything outside should be static (so I thought).

<div id="map"></div>
<div ng-view class="main-container"></div>

My js to initialize the map

function initMap() {
    var mapOptions = {
        zoom: 5,
        center: new google.maps.LatLng(50, 10),
        mapTypeIds: "ROADMAP",
        mapTypeControl: false,
        styles: [/*map styles*/]
    };

    var mapElement = document.getElementById('map');
    map = new google.maps.Map(mapElement, mapOptions);
    var infoWindow = new google.maps.InfoWindow();

}

Currently, this is being called in every controller that corresponds to a view (Otherwise it won't be loaded after a route change).

How do I stop it reloading or deleting as soon as I change route?

Answer 1

Move initMap() out of the Angular view controllers to the initialization point of the site.