前提・実現したいこと
####前提
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>
試したこと
非同期通信を繰り返し行おうと、setTimeout()でdownloadUrl()を繰り返したが、できなかった
補足情報
Windows、ブラウザ:chrome
まだ回答がついていません
会員登録して回答してみよう