Trouble Adding Markers to Google Maps via Ajax - ajax

Question

What I am trying to achieve:
Generate Map
Get Bounds information for Map
Make Ajax call passing Bounds information, data returned is Marker info
Populate Map with Markers
I am stuck because I cannot get the Ajax call to trigger.
The code seems to stop running after the alert("ajax ready"). I have a breakpoint on my controller action which never gets hit.
The only error I am getting is that "nE is undefined", however if I put in an alert the line after I am setting the value, then the the value is shown, so am not even sure that is relevant.
I have worked successfully with an earlier version of Google Maps, V3 seems a bit different. I couldn't get the lines of code to set the bounds to run until they were placed in an event listener. I tried the same with the Ajax call but doesn't make a difference.
I do know that I am not adding the markers to the map within the ajax call, I have yet to get to that part.
Javascript:
function initMap() {
var markers = [];
var map = new google.maps.Map(document.getElementById('local-map'), {
center: { lat: 51.509865, lng: -0.118092 },
zoom: 15
});
var bounds = undefined;
var nE = undefined;
var sW = undefined;
google.maps.event.addListener(map, 'bounds_changed', function () {
bounds = map.getBounds();
nE = bounds.getNorthEast();
sW = bounds.getSouthWest();
});
alert("ajax ready");
$.ajax({
type: "POST",
url: '/Home/GetMapMarkers',
data: { neLatitude: nE.lat(), neLongitude: ne.lng(), swLatitude: sW.lat(), swLongitude: sW.lng() }
}).done(function (data) {
for (i = 0; i < data.length; i++)
{
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data[i].Latitude, data[i].Longitude),
map: map,
title: data[i].RestaurantName
});
markers.push(marker);
}
});
}

Answer 1

The "bounds_changed" listener will fire asynchronously when the map bounds changes. You need to put your AJAX call inside its callback function (when/where the new bounds is available):
google.maps.event.addListener(map, 'bounds_changed', function () {
bounds = map.getBounds();
nE = bounds.getNorthEast();
sW = bounds.getSouthWest();
alert("ajax ready");
$.ajax({
type: "POST",
url: '/Home/GetMapMarkers',
data: { neLatitude: nE.lat(), neLongitude: ne.lng(), swLatitude: sW.lat(), swLongitude: sW.lng() }
}).done(function (data) {
for (i = 0; i < data.length; i++)
{
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data[i].Latitude, data[i].Longitude),
map: map,
title: data[i].RestaurantName
});
markers.push(marker);
}
});
});