【即動く】googlemapでroadMapとstreetViewを同期しペグマンを自動復帰させる【サンプル】

同期させるのは一手間必要なのです。

f:id:treeapps:20170111000706p:plain

仕事でgooglemapを使う事が多いのですが、ロードマップとストリートビューを同期する事が多く、ペグマン（黄色い棒人間の事です）の挙動も大体同じなので、テンプレを作ってみる事にしました。

以下をコピペしてhtmlで保存するだけで、以下の要件が満たせる状態になります。

ロードマップとストリートビューの座標が同期される。
一度ペグマンのドロップ不可領域にドロップするとペグマンはコントロールに戻ってしまうが、ドロップ可能領域になった時にペグマン（ストリートビュー）が自動復帰する。

ペグマンの挙動は、ペグマンを海に落として非表示にさせてから再び有効な地点に戻してあげるとよく解ると思います。

ではもう面倒臭いので、サンプルhtmlを晒しちゃいます。

サンプルhtml

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
</head>
<body>

<div id="map_canvas" style="width: 400px; height: 300px;"></div>
<div id="streetview_canvas" style="width: 400px; height: 300px; color: #000000;">ストリートビューが表示できない座標です！</div>

<script>
    // 中心座標
    var latLng = new google.maps.LatLng(35.681382, 139.766084);

    // ロードマップを描画する
    var roadmapOption = {
        zoom:14,
        center: latLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    };
    var roadmap = new google.maps.Map(document.getElementById("map_canvas"), roadmapOption);

    // ストリートビューを描画する
    var streetviewOption = {
        position: latLng,
        pov: {
            heading: 270,
            pitch: 0,
            zoom: 0
        }
    };
    var streetview = new google.maps.StreetViewPanorama(document.getElementById("streetview_canvas"), streetviewOption);

    // ロードマップとストリートビューを同期
    roadmap.setStreetView(streetview);
    roadmap.bindTo("center", streetview, "position");

    // ロードマップのドラッグ終了イベント
    var STREETVIEW_DISTANCE = 50; // 単位はメートル
    var streetViewService = new google.maps.StreetViewService();
    google.maps.event.addListener(roadmap, "dragend", function() {
        var latestLatLng = roadmap.getCenter();
        // ドラッグ地点がストリートビューが有効かどうか
        streetViewService.getPanoramaByLocation(latestLatLng, STREETVIEW_DISTANCE, function (data, status) {
            if (status === google.maps.StreetViewStatus.OK) {
                // ストリートビューが有効な場所にドラッグされた
                streetview.setPosition(latestLatLng);
                streetview.setVisible(true)
            }
        });
    });
</script>
</body>
</html>

ペグマンの自動復帰について

ロードマップのdragendイベントを監視し、現在座標から50m以内（STREETVIEW_DISTANCEで指定）にストリートビューのデータがあれば、ストリートビューに座標をセットしてvisibleをtrueにすると、自動復帰できます。
STREETVIEW_DISTANCEの値は大体50mくらいが一番いい感じの挙動でした。

streetview.setVisible(true) ですが、これを行うとsetPositionした座標で再描画してくれるのでいれてます。このドラッグ位置の座標がストリートビューが有効かどうかのサンプルはネットであまり見かけないので、これを機に是非コピペしちゃって下さい！！