I'm seeing a lot of answers on StackOverflow that say that JavaScript executes code sequentially, but I can actually see my own JavaScript not doing so. From the following code:

function centre_map(lat, lng, zoom_level) {
    alert('centre_map');
    map = new GMap2(document.getElementById('map_canvas'));
    var latlng = new GLatLng(lat, lng);
    map.setCenter(latlng, zoom_level);
}        
function add_markers_within_bounds() {
    alert('add_markers_within_bounds'); 
    // add numerous BLUE markers within map bounds using MarkerClusterer
}
function add_marker(lat, lng, place_name, grid, county) {
    alert('add_marker');
    // add one ordinary RED Google Maps marker
}
centre_map('{{lat}}', '{{lng}}', 12);
add_markers_within_bounds('{{grid}}', '{{place_name}}');
add_marker('{{lat}}', '{{lng}}', '{{place_name}}', '{{grid}}', '{{county}}');

I get the following sequence of events:

1. 'centre_map' alert
2. 'add_markers_within_bounds' alert
3. 'add_marker' alert
4. individual RED marker appears on map (i.e. add_marker renders)
5. multiple BLUE markers appear on map (i.e. add_markers_within_bounds renders)

Why doesn't add_markers_within_bounds complete before add_marker gets under way: and how can I make it do so?

I know that one way might be to call add_marker from within add_markers_within_bounds, but for various reasons I'd rather keep it as a separate function.