Google maps APIを用いてデータベース(MySQL)に格納している位置情報を取得してマーカーのみ更新し、マップはリロードしない方法

前提・実現したいこと

####前提
Google maps APIとデータベース(mysql)を用いて、位置情報の更新を行いたいと考えています。

mysqlのデータベースには位置情報が格納されています。位置情報は定期的に更新されます。その位置情報を非同期通信を用いてJavascriptで受信し、そのJavascriptでGoogle maps APIによって、Google mapにマーカーを置いていきます。
####現状
画面全体を更新して、データベースにある最新の情報を表示させています(htmlファイルのmeta～で更新)。なので、Google mapも全て更新されてしまい、見づらく、地図の中心も動かすことができません。

####実現したいこと
マーカーの位置情報を格納しているデータベースのみを更新し、マーカーを表示させているGoogle mapは更新させない方法を教えてください。

該当のソースコード

Javascript

function initAutocomplete() {
    myOptions = {
        zoom: 20,
        center: new google.maps.LatLng(/*略*/), 
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map'), myOptions);
    
    downloadUrl('ダウンロードするurl(.php)', function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName('marker');
        Array.prototype.forEach.call(markers, function(markerElem) {
            //値の読み込み
            //～（略）～

            //マーカーの表示
            var marker = new google.maps.Marker({
                map: map,
                position: latlng,//データベースから取得した値
                icon: {
                    fillColor: "blue",
                    fillOpacity: 2.0,                    
                    path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW, 
                    scale: 4,                          
                    strokeColor: "blue",           
                    strokeWeight: 1.5,                   
                },
                draggable: true,
            });
        });
    });
}
//非同期通信
function downloadUrl(url, callback) {
    var request = window.ActiveXObject ?
        new ActiveXObject('Microsoft.XMLHTTP') :
        new XMLHttpRequest;
    request.onreadystatechange = function() {
        if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
        }
    };
    request.open('GET', url, true);
    request.send(null);
}
function doNothing() {}

HTML
<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>略</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <meta http-equiv="refresh" content="0.1;URL=">

  </head>

  <body>
    <input id="pac-input" class="controls" type="text" placeholder="Search Box">
    <div id="map"></div>
    <script type="text/javascript" src="script.js">
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=APIkey&sensor=false&callback=initAutocomplete&libraries=places" async defer></script>

  </body>
</html>