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

前提・実現したいこと

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

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

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

該当のソースコード

Javascript
1
2function initAutocomplete() {
3    myOptions = {
4        zoom: 20,
5        center: new google.maps.LatLng(/*略*/), 
6        mapTypeId: google.maps.MapTypeId.ROADMAP
7    };
8    map = new google.maps.Map(document.getElementById('map'), myOptions);
9    
10    downloadUrl('ダウンロードするurl(.php)', function(data) {
11        var xml = data.responseXML;
12        var markers = xml.documentElement.getElementsByTagName('marker');
13        Array.prototype.forEach.call(markers, function(markerElem) {
14            //値の読み込み
15            //～（略）～
16
17            //マーカーの表示
18            var marker = new google.maps.Marker({
19                map: map,
20                position: latlng,//データベースから取得した値
21                icon: {
22                    fillColor: "blue",
23                    fillOpacity: 2.0,                    
24                    path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW, 
25                    scale: 4,                          
26                    strokeColor: "blue",           
27                    strokeWeight: 1.5,                   
28                },
29                draggable: true,
30            });
31        });
32    });
33}
34//非同期通信
35function downloadUrl(url, callback) {
36    var request = window.ActiveXObject ?
37        new ActiveXObject('Microsoft.XMLHTTP') :
38        new XMLHttpRequest;
39    request.onreadystatechange = function() {
40        if (request.readyState == 4) {
41            request.onreadystatechange = doNothing;
42            callback(request, request.status);
43        }
44    };
45    request.open('GET', url, true);
46    request.send(null);
47}
48function doNothing() {}

HTML
1<!DOCTYPE html >
2  <head>
3    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
4    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
5    <title>略</title>
6    <link rel="stylesheet" href="style.css" type="text/css" />
7    <meta http-equiv="refresh" content="0.1;URL=">
8
9  </head>
10
11  <body>
12    <input id="pac-input" class="controls" type="text" placeholder="Search Box">
13    <div id="map"></div>
14    <script type="text/javascript" src="script.js">
15    </script>
16    <script src="https://maps.googleapis.com/maps/api/js?key=APIkey&sensor=false&callback=initAutocomplete&libraries=places" async defer></script>
17
18  </body>
19</html>
20

試したこと

非同期通信を繰り返し行おうと、setTimeout()でdownloadUrl()を繰り返したが、できなかった

補足情報

Windows、ブラウザ:chrome

回答1件

new google.maps.Map(...)は新しい地図を作成するクラスです。
ですので、これを実行すると地図が更新されてしまいます。

解決方法ですが、new google.maps.Map(...)を実行するのはページ読み込み時だけにして、マーカー読み込み時には実行しないようにするのがいいでしょう。
<meta http-equiv="refresh" content="0.1;URL=">は0.1秒ごとにページのリロードをするはずなので、よくないでしょう。もし、0.1秒単位で更新するのであれば、setTimeoutなどを使ってdownloadUrl('ダウンロードするurl(.php)',...の部分のみを実行するように修正した方がいいです。

投稿2021/07/27 00:56

編集2021/07/27 01:01

Lhankor_Mhy

総合スコア33759

回答へのコメント

ilab.mei

2021/07/27 14:31

分かりやすく回答いただき、ありがとうございます！リロードではなく、setTimeout()を使う、ということでしたが、やってみると、更新されません…。私の予想なのですが、downloadUrl('ダウンロードするurl(.php)'…の関数内のforeachから抜け出すことができずに、プログラムが終了しているのかなと思うのですが…。的を得ていないかもしれませんが。アイデアがあれば、お伺いしたいです。よろしくお願いいたします。

Lhankor_Mhy

2021/07/28 01:25

実際のコードを拝見しておらず、エラーメッセージなどもいただいていないので、何が起きているのかわからないです。想像ですが、リクエストしてマーカーを更新するまでに0.1秒以上かかっているのではないですか？そうであれば、Googleマップの描画がいつまでも終わらず更新されない、ということが起きそうな気がします。

Lhankor_Mhy

2021/07/31 04:04

解決しませんか？わからないことがあれば、コメント欄でお知らせください。その際は、コードやエラーメッセージなどもご提示いただけますとお手伝いがしやすいです。