Google Maps API v3 でマーカーを1万個表示させたらどうなるかの動作確認用
※低スペック端末で広域にするとフリーズ状態になるかもしれないので注意。
単純にforループを10000回繰り返して、ランダムな緯度・経度にマーカーをセットしているだけ。
分かった事、(1)forの繰り返し回数だけ開始が遅くなる。(2)登録数が多くても地図の表示範囲のマーカーが少なければほとんど動作に影響は無い、しかし表示範囲内のマーカーが多いと移動時などで地図の再表示速度が低下する。
思ったほど動作への影響が小さかったが、影響が0では無いのでマーカーが増えそうな場合は何か対策が必要。
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
#mapdiv { height:300px; width:300px;}
</style>
</head>
<body>
<div id="mapdiv"></div>
<script type="text/javascript">
var gmap;
function initMap() {
gmap = new google.maps.Map(document.getElementById('mapdiv'), {
center: {lat: 35.689, lng: 139.692},
zoom: 8
});
var marker=[];
for(var i=0; i<=10000; i++){
var nr=Math.random()*170-85; /* 緯度 -85～+85 */
var er=Math.random()*360-180; /* 経度 -180～+180 */
marker[i] = new google.maps.Marker({
position:{lat: nr, lng: er},
map: gmap
});
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=【あなたのAPIキー】&callback=initMap">
</script>
</body>
</html>