Q:

Google map marker not displaying dynamically via ajax

My problem is my map marker didn't update dynamically via ajax, by right once my xml file being updated the map marker will change accordingly to the xml but it wasn't working, i have to re run the whole website in order to get the changes from the xml (refresh doesn't work as well).
Here is my code
function createTooltip(marker, key) {
    //create a tooltip 
    var tooltipOptions = {
        marker: marker,
        content: places[key].tooltip_html,
        cssClass: 'tooltip' // name of a css class to apply to tooltip
    };
    var tooltip = new Tooltip(tooltipOptions);
}

function refresh() {
    setInterval(function () {
        loadMarker();

    }, 5000);
};

function initialize() {
    var initialLocation;
    var northpole = new google.maps.LatLng(90, 105);
    var KL = new google.maps.LatLng(3.1597, 101.7000);
    var browserSupportFlag = new Boolean();
    var map;
    var marker;
    var mapOptions;
    var mapDiv = document.getElementById("map_canvas");
    if (places.length) {
        mapOptions = {
            center: new google.maps.LatLng(3.1597, 101.7000),
            maxZoom: 21,
            zoom: 17,
            disableDefaultUI: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: true,

            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                position: google.maps.ControlPosition.TOP_LEFT
            }
        };

        map = new google.maps.Map(mapDiv, mapOptions);
        var markers = [];
        for (var key in places) {
            (function (myPlace) {
                if (myPlace) {
                    var icon = {
                        url: myPlace.icon_html,
                        origin: new google.maps.Point(0, 0),
                        anchor: new google.maps.Point(8, 41)
                    };
                    var shadow = {
                        url: "image/shadow.png",
                        origin: new google.maps.Point(0, 0),
                        anchor: new google.maps.Point(8, 41)
                    };
                    var marker = new google.maps.Marker({
                        map: map,
                        shadow: shadow,
                        url: myPlace.URL_html,
                        icon: icon,
                        position: new google.maps.LatLng(myPlace.position.lat, myPlace.position.lng)
                    });
                    markers.push(marker);

                    createTooltip(marker, key);
                    google.maps.event.addListener(marker, 'click', function () {
                        marker.setAnimation(google.maps.Animation.BOUNCE);
                        setTimeout(function () {
                            marker.setAnimation(null);
                        }, 2000);
                        openNewBackgroundTab(marker.url);
                    });

                    function openNewBackgroundTab(url) {
                        var a = document.createElement("a");
                        a.href = url;
                        var evt = document.createEvent("MouseEvents");
                        //the tenth parameter of initMouseEvent sets ctrl key
                        evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
                            true, false, false, false, 0, null);
                        a.dispatchEvent(evt);
                    }
                }

            })(places[key]);
        }
    }
    var markerCluster = new MarkerClusterer(map, markers);
    // Try W3C Geolocation (Preferred)
    if (navigator.geolocation) {
        browserSupportFlag = true;
        navigator.geolocation.getCurrentPosition(function (position) {
            initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            var marker = new google.maps.Marker({
                position: initialLocation,
                icon: 'image/footprint.png',
                title: 'You are here !'

            });
            $('#findout').on('shown', function (e) {

                google.maps.event.trigger(map, 'resize');
                marker.setMap(map);
                map.setCenter(initialLocation);

            });

        }, function () {
            handleNoGeolocation(browserSupportFlag);
        });
    }
    // Browser doesn't support Geolocation
    else {
        browserSupportFlag = false;
        handleNoGeolocation(browserSupportFlag);
    }

    function handleNoGeolocation(errorFlag) {
        if (errorFlag === true) {
            alert("Geolocation service failed.");
            initialLocation = KL;
        } else {
            alert("Stop using IE");
            initialLocation = northpole;
        }
        map.setCenter(initialLocation);
    }

}
google.maps.event.addDomListener(window, "load", initialize);
var places = Array();

function loadMarker() {
    $.ajax({
        url: "js/datatesting.xml",
        dataType: 'xml',
        success: onLoadMarker
    });
};

function onLoadMarker(data) {
    $(data).find("merchantMarker").each(function () {
        places.push({
            URL_html: "" + $(this).find('merchantProfileUrl').text() + "", //mapshop profile url
            tooltip_html: "<div id='tooltips'>\n\
                    <div class='cover' style='background-image:url(image/default.jpg);'>\n\
                        <table style='margin-left:20px;'>\n\
                            <tr>\n\
                                <td><img class='photo img-circle' src='" + $(this).find('merchantProfilPicture').text() + "'>\n\
                                </td>\n\
                            </tr>\n\
                            <tr>\n\
                                <th class='text-center'>\n\
                                        " + $(this).find('merchantName').text() + "\n\
                                </th>\n\
                            </tr>\n\
                        </table>\n\
                    </div>\n\
                <div class='status'>\n\
        <p>" + $(this).find('merchantAboutUs').text() + "</p>\n\
                </div>\n\
            </div>",

            icon_html: '' + $(this).find('merchantMapMarker').text() + '', //mapshop marker 
            position: {
                lat: $(this).find('merchantLat').text(),
                lng: $(this).find('merchantLon').text()
            } // shop lat and lon
        });
    });
};

$(document).ready(function () {
    $('#findout').click(function () {
        $('#suggestion').hide();
        $('#function_stream').hide();
        $('#function_me').hide();
        $('#function_findout').show();

    });
    loadMarker();
    refresh();
});

I'm not sure what's wrong with it, please enlighten me  your help is appreciated.
UPDATED
var page = new Date().getTime(); 
$.ajax({
    url:"js/datatesting.xml",
    dataType: 'xml',
        data: {page: page},
    success: onLoadMarker        
});

and another problem occurs , may i know how to delete the existing marker ? and replace it with the new one ? because now the new marker is stack on the old one if i'm not mistaken , usually, i will use $(#something).children().remove; before append some data into it , but for map i have no idea ..

A:

The xml is being cached by the  browser, add a URL parameter that changes every time the content changes (I usually use a function of the current time)
function loadMarker() {
    var page = new Date().getTime();
    $.ajax({
        url: "js/datatesting.xml,
        dataType: 'xml',
        data: {page: page},
        success: onLoadMarker
    });
};

Prevent caching of AJAX call

