GoogleMapでマーカーを1000置いたらどれくらい時間がかかるか測ってみた

GoogleMapでマーカーを1000置いたらどれくらい時間がかかるか測ってみました。

結論から言うと、「~~チッチャイことは気にするな! それ! ワカチコ!ワカチコ!~~ 細かいことは気にせず、立てまくろうぜ！」って感じでした。

f:id:nakaji999:20141223012336p:plain

緯度経度を指定すれば1秒以内でサクッと立っちゃいます。

ソース

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>1000個マーカーを置いたときにかかる時間</title>
    <script src="scripts/jquery-1.10.2.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
        $(function () {
            google.maps.event.addDomListener(window, 'load', initialize);
            function initialize() {
                var myLatlng = new google.maps.LatLng(33.839193, 132.765563);
                var mapOptions = {
                    zoom: 10,
                    center: myLatlng
                }
                var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
                var start = new Date();

                for (var i = 0; i < 1000; i++) {
                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(33.839193 + Math.random() - 0.5, 132.765563 + Math.random() - 0.5),
                        map: map,
                        title: 'Hello World!'
                    });
                }
                var end = new Date();;
                $("#addressList").val((end - start) / 1000 + '秒');

            }
        });
    </script>

</head>
<body>
    <h1>1000個マーカーを置いたときにかかる時間</h1>
    <textarea style="width: 100%; height: 50px;" id="addressList"></textarea>
    <div id="map-canvas" style="height: 500px;width: 500px;margin: 20px;padding: 20px;"></div>
</body>
</html>

きっかけ

この前、愛媛FreeWi-Fiのオレオレサイトを作りました。

そこで、

約400箇所全てピンを立てててクソ遅いので、表示されてる部分だけピンを立てるとかできたらなぁ

ということを書きました。ここで使ってたスクリプトは「住所を指定してピンを立てる」っていうものでしたが、ピンを立てるには位置情報が必要ですよね。という事は、住所から位置情報を取得して、それからピンを立ててるわけですね。

こんな風に。

   geocoder.geocode( { 'address': address[index].address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            address[index].location = results[0].geometry.location;