Ajax Request with Googlemap API - ajax

Question

I'm building a page that will display a Googlemap with markers. Since I have about 50000 markers, I decided not to load them all at once.
Therefore I tried building an JSON request to my server (see code below) but here is my problem:
When I use the code as it is presented here, the Map is blank (no Map shows up).
When I remove the $.ajax and leave the function getMarkers emtpy, the map shows properly (whitout marker of course).
Can anyone tell me what I'm doing wrong please?!
Thank you!
(If that is any help, I'm using Django)
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function init_map() {
var mapOptions = {
center: new google.maps.LatLng(48.853,2.35),
zoom: 6,
streetViewControl: false,
};
var myMap = new google.maps.Map(document.getElementById("map-container"),mapOptions);
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(myMap, 'idle', getMarkers);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(initialLocation);
});
}
}
google.maps.event.addDomListener(window, 'load', init_map);
function getMarkers() {
$.ajax({
type: 'POST',
url: {%url 'pointslink'%},
async: "true",
dataType: "json",
contentType: 'application/json',
data: JSON.stringify(
coords: myMap.getBounds(),
zoom: myMmap.getZoom()
),
success: updateMarkers
});
}
function updateMarkers(data) {
{% for city in data %}
var pos = new google.maps.LatLng({{city.latitude}},{{city.longitude}});
var marker = new google.maps.Marker({
position: pos,
map: myMap,
title:'{{city.name}}'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('Name: {{city.name}}<br/>Population: {{city.population}}');
infowindow.open(myMap, this);
});
{%endfor%}
}
</script>