I have an app that displays an array of markers on google maps. It was working just fine until recently I noticed this error. What's confusing me is that I haven't touched the code that displays the markers in a while and I am just now getting this error. The map loads successfully but when a button is pressed to get show all the markers, then that's when the map goes blank and I get the call stack error. Any ideas on what might caused this error to suddenly appear? I'll paste in relevant code.
angular.module('mapCtrl',['surfService']) .controller('mapController', function(Surf){ var vm = this; var markers = []; var newMarker = null; var infoWindow = new google.maps.InfoWindow(); // ============================= // Get all Surf Session locations from Ajax Requst // ============================= vm.displaySurfSessions = function(){ //If there are no markers in the array, then display the collection if(markers.length === 0){ Surf.all() .success(function(dataResponse){ //Loop through the database objects for (var i = 0; i < dataResponse.length; i++) { console.log(dataResponse[i]); //Set properties of objects into varibles for later use var title = dataResponse[i].title; var latitude = dataResponse[i].latitude; var longitude = dataResponse[i].longitude; var comment = dataResponse[i].comment; //Set the latitude and longitude var latLng = new google.maps.LatLng(latitude, longitude); //Set a new Marker for each location addMarker(latLng,title,comment); }//End for loop console.log('Markers',markers); });//End success }else { //Marker Must Be Removed vm.removeMarker = "Clear Map First!"; } }; // ============================= // Function to Set Markers on locations // ============================= // Adds a marker to the map and push to the array. function addMarker(location,title,comment) { var marker = new google.maps.Marker({ position: location, map: map, title: title, comment: comment }); //Set the Lat & Lng of the new marker to use in saveSurfSession() newMarker = {latitude: marker.position.H , longitude: marker.position.L}; map.panTo(location); console.log('NewMarker',newMarker); //Set the IW Content for each marker var infoWindowContent = "<h2 class='iw-title'>" + marker.title + "</h2>" + "<p class='iw-comment'> " + marker.comment + "</p>" ; //Create a new click event listerner for each marker google.maps.event.addListener(marker, 'click', function(){ infoWindow.setContent(infoWindowContent); infoWindow.open(map,marker); }); //Push the new marker into the markers array markers.push(marker); } // ============================================= // Map // ============================================= //Create options for the map var mapOptions = { center: new google.maps.LatLng(37.7831,-122.4039), styles: styles, zoom: 8, mapTypeId: google.maps.MapTypeId.TERRAIN }; //Create a new google map map = new google.maps.Map(document.getElementById('map'), mapOptions); // This event listener will call addMarker() when the map is clicked. google.maps.event.addListener(map,'click', function(event) { // Allow for one marker to be placed at a time if(markers.length === 0){ addMarker(event.latLng); console.log('Markers',markers); }else { // Tell User to Clear the Map alert('Clear Map'); } }); });//End mapController 
