詳しい人求む！

googlemap10件以上表示できない

締切済

質問者：キリンジパパ
質問日時：2017/01/17 00:12
回答数：2件

初質問になります。
書き方などに変なところがあれば指摘お願いいたします。
googlemapに関しての質問です。
現在MICROSOFTACCESS+HTML+JAVASCRIPTを使用してgooglemapに複数のポイントを表示しております。

ですが10件までは表示ができますが、以降は表示の間隔が短いため表示されません。

原因自体はわかっているのですが、javascriptに関して今回初めて開発を行ったためどの部分に間隔をあけていいか不明のため投稿させていただきました。

htmlとjavascript内容を載せますので、ご指摘をお願いいたします。

html内容

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="IE=11; charset=UTF-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=11" />
<title></title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" …
<script type="text/javascript" src="mapdata.js"></script>
<script type="text/javascript">
var geocoder;
var map;
var currentInfoWindow = null;
function initialize() {
geocoder = new google.maps.Geocoder();
var myOptions = {zoom: mapzoom, mapTypeId: google.maps.MapTypeId.ROADMAP}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
for (var i = 0; i < places.length; i++) {
var place = places[i];
var info = '<b>' + place[1] + '</b><br/><br/>' + place[0];
codeAddress(place[0], info, place[2], place[3]);
}
}
function codeAddress(address, info, flg ,iconad) {
geocoder.geocode({'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (flg == 0) {
map.setCenter(results[0].geometry.location);
}
else {
var marker = new google.maps.Marker({map: map , position: results[0].geometry.location , icon: iconad});
var infowindow = new google.maps.InfoWindow({content: info ,position: marker });
google.maps.event.addListener(marker, 'click', function() {
if (currentInfoWindow) {
}
infowindow.open(map,marker);
currentInfoWindow = infowindow;
});
}
}
});
}
</script>
</head>
<body onload="initialize()" style="margin:0px; padding:0px">
<div id="map_canvas" style="width:100%; height:100%;"></div>
</body>
</html>
javascript内容
var mapzoom = 15;
var places = [
['住所', "", 0],
['住所','1', 1,'画像1.png'],
['住所1','2', 1,'画像2.png'],
['住所2','3', 1,'画像3.png'],
['住所3','4', 1,'画像4.png'],
['住所4','5', 1,'画像5.png'],
['住所5','6', 1,'画像6.png'],
['住所6','7', 1,'画像7.png'],
['住所7','8', 1,'画像8.png'],
['住所8','9', 1,'画像9.png'],
['住所9','10', 1,'画像10.png'],
['住所10','11', 1,'画像11.png'],
['住所11','12', 1,'画像12.png'],
['住所12','13', 1,'画像13.png'],
['住所13','14', 1,'画像14.png'],
['住所14','15', 1,'画像15.png'],
['住所15','16', 1,'画像16.png']
];

どうぞよろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： fujillin
回答日時：2017/01/17 17:35

ANo1です。

事前にジオコーディングを行っておくのがお勧めです。

＞どういった風な変更を行えばいいか教えていただけますでしょうか？
例えば、データを
　['住所1', 'Lat1', 'Lng1', '2', 1, '画像2.png'],
とでもしておけば、住所データは表示用などで使用するとしても、マップの表示に際しては、検索処理を行わなくても、LatLngデータを用いて直接マーカー表示などが可能になりますよね？（順序等は使いやすいように）

事前の処理なら余程大量でもない限り、御提示の方法で10件ずつやっても大した手間にはならないものと想像します。
もしもデータが大量な場合は、それこそ事前に処理しておかないと大変なことになってしまいますね。

とは言え、間欠的にリクエストする方法は、事前のリクエストでも使うことは可能です。
例えば、住所データが変数address_dataに配列ですでにあるとして、以下のような要領でしょうか。
（処理の手順のみです。エラー処理等は考慮していません）

var address_data = [ ～～～～ ]; //住所データ
var dataIndex = 0; //次の処理順のインデックス
var rest = address_data.length; //終了処理カウント用

var interval = 50; //リクエスト間隔（mmsec）
intermit();

function intermit(){
//geocoderへリクエスト送信
　geocoder.geocode({'address': address_data[dataIndex] },
　　//callback処理
　　function(results, status) {
　　　if (status === google.maps.GeocoderStatus.OK) {
　　　　//結果の記録　（または表示等の処理）
　　　}
　　　if( --rest <= 0 ) alert("全処理完了 !"); //callback処理の完了チェック
　　}
　});

　//次のリクエスト処理
　if( address_data[++dataIndex] ) setTimeout(intermit, interval);
}

※ 制限の具体的な時間間隔を把握できていませんので、リクエスト間隔は適当に調節する必要があると思います。

- 0
- 件

通報する

参考程度に

No.1

回答者： fujillin
回答日時：2017/01/17 11:13

こんにちは

ご存知のように、ジオコーディングは負荷が大きいので、使用制限が設けられているようです。

簡単に検索してみたところ「50 requests per second」の記載は見つかりましたが、10件で止まるものは見つけられませんでした。（くまなく探したわけではありません）
https://developers.google.com/maps/documentation …
（api v2の頃に試したことがありますが、20件までいけたような… 確か、超えると、レスポンスにその旨のメッセージが返されたと記憶しています）

ともあれ、そのままで実行させたいのであれば、タイマーを設けて前回のリクエストから0.02秒（?）ほど経ったら次のリクエストを行うといったようにすればよさそうですね。（時間間隔は調整が必要かも知れません）
タイマーを設けるのが面倒なら、setTimeoutなどで繰り返すような仕組みにすることでも、同様のことが可能と思います。

しかしながら、同じデータに対して表示する度にリクエストを行うのは、非効率的ではないのでしょうか？
住所データ（mapdata.jsかな？）作成時に、事前に一度だけジオコーディングを行っておいて、座標を併せてデータ化しておくのが良さそうに思います。
これによって、表示にも時間がかからなくてすむという利点もあります。（都度リクエストすると、制限でトータルの表示時間がかかる）