GoogleMapsAPIの使い方(ストリートビュー編)

Tag:

「Google Maps JavaScript API v3」でStreet View(ストリートビュー)を表示する方法を紹介します。なお、Google Maps APIの基本的な利用例は下記リンク先で紹介しています。
JavaScript/jQuery : Google Maps APIの使い方(基本編) | DN-Web64

サンプルの概要

サンプルでは、マップとストリートビューを表示させています。「フジテレビ前」「スカイツリー前」「上野駅前」を選択できるようにしており、選択と同時にマップとストリートビューがともに切り替わります。

サンプルのHTML/CSS

まずは、HTML/CSSを確認してみましょう。

<!doctype html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="robots" content="noindex,nofollow,noarchive" />
        <title>DN-Web64|Sample|Google Maps</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="js/street.js"></script>

        <style>
            #map_canvas {
                height: 300px;
            }
            #map_view {
                height: 300px;
            }
            #map_buttons {
                margin-top: 10px;
            }
            .map_btn {
                padding: 10px 10px;
                border-bottom: 1px solid #CCC;
                margin: 0px 2px;
            }
            .map_btn:hover {
                background-color: #eee;
            }
            #res{
                margin-top: 20px;
                padding-left: 10px;
            }
        </style>
    </head>
    <body>
        <h1>DN-Web64|Sample|Google Maps</h1>
        <div class ="row">
            <div class="col-sm-4">
                <div id="map_buttons"></div>
                <div id="res"></div>
            </div>
            <div class="col-sm-8">
                <div id="map_canvas"></div>
                <div id="map_view"></div>
            </div>
        </div>
    </body>
</html>

■10行目
Google Maps APIを使用するためのjavascriptを読み込んでいます。「sensor」パラメータでユーザー位置情報の使用するか指定します。ユーザー位置情報を使わない場合でも必ず記述します。なお、Version3ではAPIキーの指定は不要です。

■45行目
ここにマップを表示させます。

■46行目
ここにストリートビューを表示させます。

サンプルのJavaScript

次にJavaScriptのソースを確認してみます。

jQuery(function ($) {
    var points = [];
    var map;
    var svp;

    points[0] = {
        latlng: new google.maps.LatLng(35.627223, 139.77401299999997),
        heading: 143.19859411274888,
        pitch: 47.604296081932716,
        zoom: 0,
        title: "フジテレビ前",
    }
    points[1] = {
        latlng: new google.maps.LatLng(35.709723, 139.811511),
        heading: -35.77428934912274,
        pitch: 54.77805451608379,
        zoom: 0,
        title: "スカイツリー前"
    }
    points[2] = {
        latlng: new google.maps.LatLng(35.713799, 139.77581099999998),
        heading: 120.93017211788424,
        pitch: 11.153057144630985,
        zoom: 0,
        title: "上野駅前",
    }

    var btncnt = 1;
    $("#map_buttons").append("<ul>");
    for (var point in points) {
        var html = '<a><li class="map_btn" id="method' + btncnt + '">' + points[point].title + '</li></a>'
        $("#map_buttons").append(html);
        $("body").on("click", "#method" + btncnt, {opt: btncnt - 1}, function (eo) {
            map_pan(eo.data.opt);
        });
        btncnt++;
    }
    $("#map_buttons").append("</ul");

    google.maps.event.addDomListener(window, 'load', initialize);
    function initialize() {
        var opts = {
            zoom: 15,
            center: points[0].latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: true
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), opts);

        svp = new google.maps.StreetViewPanorama(
                document.getElementById("map_view"),
                {
                    addressControl: true,
                    addressControlOptions: "BOTTOM_RIGHT",
                    clickToGo: true, //移動
                    disableDoubleClickZoom: true,
                    enableCloseButton: false, //閉じるボタンの表示
                    imageDateControl: true,
                    linksControl: true,
                    panControl: true,
                    scrollwheel: true,
                    visible: true,
                    zoomControl: true,
                    position: map.getCenter()
                });
        svp.setPov({heading: points[0].heading, pitch: points[0].pitch, zoom: points[0].zoom});
        map.setStreetView(svp);
        google.maps.event.addListener(svp, 'tilesloaded', review);
        google.maps.event.addListener(svp, 'pano_changed', review);
        google.maps.event.addListener(svp, 'pov_changed', review);
    }

    function review() {
        var pov = svp.getPov();
        document.getElementById("res").innerHTML = "緯度経度:" + svp.getPosition() + "<br>" +
                "方角:" + pov["heading"] + "<br>" +
                "角度:" + pov["pitch"] + "<br>" +
                "ズーム:" + pov["zoom"];
    }

    function map_pan(no) {
        svp.setPosition(points[no].latlng);
        svp.setPov({heading: points[no].heading, pitch: points[no].pitch, zoom: points[no].zoom});
        map.panTo(points[no].latlng);
    }
});

■6行目~26行目
「フジテレビ前」「スカイツリー前」「上野駅前」を表示するにあたり、『緯度経度情報』と『ストリートビューの情報(向き、角度、ズーム)』を設定しています。

■28行目~38行目
動的に要素とイベントを追加しています。

■40行目
ロード時にinitializeメソッドが実行されるように設定しています。

■42行目~48行目
マップを表示させています。

■50行目~67行目
ストリートビューを表示させています。
67行目でマップとストリートビューを一致させています。

■68行目~70行目
次のイベント時にreviewメソッドが実行されるように設定。
・視界内の全てのタイル(地図の図)の読み込みが完了したとき。
 (最初に地図を読み込む時や、思い切りドラッグで移動させた時に発生)
・パノラマのpanoIDが変更されたとき。
 (パノラマ内を移動したりすると、変更される場合がある)
・パノラマの視点が変更されたとき

■74行目
getPovメソッドで、現在の方角や角度の情報をもつStreetViewPovオブジェクトを取得。

■75行目
getPositionメソッドで、現在の緯度経度情報をもつLatLngオブジェクトを取得。

スポンサーリンク