Utilizing a Google map as the background for my website adds a unique visual element to the data displayed on different routes. However, I have encountered an issue where the map reloads with every route change, resulting in an unsightly flash of white that disrupts the user experience.
To address this problem, I attempted to move the map outside of my ng-view container, assuming that elements outside would remain static.
<div id="map"></div>
<div ng-view class="main-container"></div>
The JavaScript code responsible for initializing the map is as follows:
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 initialization function is being called in each controller associated with a view to ensure the map loads after a route change. How can I prevent the map from reloading or disappearing when switching routes?