Google Maps APIのストリートビューで擬似AR

こないだ仕事で、Google Maps JavaScript API V3を利用してとあるサービスのサービス拠点を検索・表示するページを作成しました。
要はマップを動かすとその中心点から近いサービス拠点を検索してマップ上にマーカーを表示するというよくあるアレです。

さて。

Google Maps API V3でストリートビューを表示できるようにするためには、streetViewControlというパラメータがtrueである必要があります。

今まではデフォルトではfalseだったため、明示的にtrueにしなければストリートビューが表示されることはありませんでした。

ところが。
先月10月ごろから、デフォルトがtrueに変更されました。

冒頭のサービス拠点検索ページもその影響でストリートビューが表示されるようになってしまい、納品前で余計な不具合を出したくなかったのですぐにfalseに変更しました。
が、どうやら先方の社内でストリートビューが見られることの評判が良かったらしく、戻して欲しいと言われたので戻しました。

そんなにいいものなのかと思って、実際にストリートビューで表示させてみたんですが、これがなかなか面白くて、マップ上に配置したマーカーがセカイカメラのエアタグのように表示されるんです。
近くにあるマーカーは大きく、遠くにあるマーカーは小さく。ちゃんと遠近感があります。さすがに高さは無理みたいですが。
たしかにこれは表示できたほうが拠点の案内サービスとしては親切でしょうし、納得です。

んで。
適当にデモを作ってみました。
30個ほどランダムでマーカーを配置してあるので、左上のペグマン(黄色いの)を道にドラッグ＆ドロップしてストリートビューを表示させてみてください。

コードは以下のとおりです。

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function() {
    var lat = 34.7;
    var lng = 135.4957;
    var latlng = new google.maps.LatLng(lat, lng);
    var myOptions = {
        zoom: 16,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("svtest"), myOptions);
    var markers = new Array(30);
    for(i=0;i<30;i++){
        markers&#91;i&#93; = new google.maps.Marker({
            position: new google.maps.LatLng(lat+Math.random()*0.005-0.0025, lng+Math.random()*0.005-0.0025),
            map: map,
            title: ''+ i
        });
    }
}
</script>

<div id="svtest" style="width:500px; height:400px;"></div>

Tweet