質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

データベース

データベースとは、データの集合体を指します。また、そのデータの集合体の共用を可能にするシステムの意味を含めます

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

Q&A

1回答

2338閲覧

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

ilab.mei

総合スコア0

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

データベース

データベースとは、データの集合体を指します。また、そのデータの集合体の共用を可能にするシステムの意味を含めます

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

0グッド

0クリップ

投稿2021/07/26 05:36

前提・実現したいこと

####前提
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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

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

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問