1

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?

Jason
  • 654
  • 1
  • 11
  • 27
  • When initMap function called in every controller then it will reload every time. If you dont want to reload then call it when initialise the app and change the center coordinates only as per the controller. – Anbu Dec 09 '16 at 14:14
  • Thanks, that worked. I feel stupid now. – Jason Dec 09 '16 at 14:25

1 Answers1

1

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

Jason
  • 654
  • 1
  • 11
  • 27