Search

ポリライン

2011/6/26

ポリラインは、地図上に各座標をつなぐ線を描画します。

構文

Polyline options オブジェクトで、ポリラインの線の色、太さ、透明度を指定します。

// LatLng 配列
var flightPlanCoordinates = [
	new google.maps.LatLng(37.772323, -122.214897),
	・・・
];
// Polyline オブジェクト
var flightPath=new google.maps.Polyline({
	path: flightPlanCoordinates, //ポリラインの配列
	strokeColor: '#FF0000', //色(#RRGGBB形式)
	strokeOpacity: 1.0, //透明度 0.0~1.0(デフォルト)
	strokeWeight: 2 //太さ(単位ピクセル)
});

表参道駅から渋谷駅までのドライブルートにポリラインを引く

2011/6/26

下記のサンプルでは、表参道駅から渋谷駅までのドライブルートにポリラインを引きます。

経由地点の緯度・経度は、Google Directions APIで取得したデータを使用しています。

http://maps.google.es/maps/api/directions/json?
origin=omotesando+station
&destination=shibuya+station
&sensor=false
iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html> 
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        /* 地図の初期化 */
        function initialize() {
            /* 緯度・経度:日本 */
            var ne=new google.maps.LatLng(35.668480,139.712330);
            var sw=new google.maps.LatLng(35.65835000000001,139.700280);
            var shibuya=new google.maps.LatLng(35.65835000000001,139.700730);
            var omotesando=new google.maps.LatLng(35.665270,139.712330);
            /* 地図のオプション設定 */
            var myOptions={
                /*初期のズーム レベル */
                zoom: 15,
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            /* 地図オブジェクト */
            var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            /* 指定された境界に合うように地図を設定 */
            var bounds = new google.maps.LatLngBounds(sw, ne);
            map.fitBounds(bounds,15);
            /* ★ポリライン */
            /* 
                表参道駅から渋谷駅までのドライブルートにポリラインを引く
                stepsの緯度経度はGoogle Directions APIで取得
                http://maps.google.es/maps/api/directions/json?origin=omotesando+station&destination=shibuya+station&sensor=false
            */
            var flightPlanCoordinates = [
                omotesando,
                 /* steps - 都道413号線*/
                new google.maps.LatLng(35.665270, 139.712330),
                new google.maps.LatLng(35.668480, 139.705360),
                 /* steps - 神宮橋(交差点)*/
                new google.maps.LatLng(35.668480, 139.705360),
                /* 補正 */
                new google.maps.LatLng(35.664100, 139.702229),
                new google.maps.LatLng(35.659540, 139.702420),
                 /* steps - 宮益坂下(交差点)*/
                new google.maps.LatLng(35.659540, 139.702420),
                new google.maps.LatLng(35.659460, 139.700510),
                 /* steps - 渋谷駅前(交差点)*/
                new google.maps.LatLng(35.659460, 139.700510),
                new google.maps.LatLng(35.65855000000001, 139.700310),
                 /* steps - 左折(交差点)*/
                new google.maps.LatLng(35.65855000000001, 139.700310),
                new google.maps.LatLng(35.65835000000001,  139.700730),
                shibuya
            ];
            var flightPath = new google.maps.Polyline({
                path: flightPlanCoordinates,
                strokeColor: "#FF0000",
                strokeOpacity: 1.0,
                strokeWeight: 2
            });
            flightPath.setMap(map);
        }
    </script>
</head>
<body>
    <h3>ポリライン</h3>
    <p>表参道駅から渋谷駅までのドライブルートにポリラインを引きます。</p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

ドライブルートの経由地点にマーカーを立て、運転ルートを情報ウィンドウで表示

2011/6/26

上記のサンプルにプラスして、表参道駅から渋谷駅までのドライブルートの経由地点にマーカーを立てます。 マーカーをクリックすると運転ルートを情報ウィンドウで表示します。

アイコンは、Google Maps Icons(Creative Commons 3.0 BY-SA)を使用しています。

iPhoneiPhone
AndroidAndroid
設置サンプルサンプルを見る
<!DOCTYPE html> 
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>設置サンプル</title>
    <link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
    <!-- スマートフォン向けviewportの指定 -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- jQuery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        /* ページ読み込み時に地図を初期化 */
        $(function(){
            initialize();
        });
        /* 地図の初期化 */
        function initialize() {
            /* 緯度・経度:日本 */
            var ne=new google.maps.LatLng(35.668480,139.712330);
            var sw=new google.maps.LatLng(35.65835000000001,139.700280);
            var shibuya=new google.maps.LatLng(35.65835000000001,139.700730);
            var omotesando=new google.maps.LatLng(35.665270,139.712330);
            /* 地図のオプション設定 */
            var myOptions={
                /*初期のズーム レベル */
                zoom: 15,
                /* 地図タイプ */
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            /* 地図オブジェクト */
            var map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            /* 指定された境界に合うように地図を設定 */
            var bounds=new google.maps.LatLngBounds(sw, ne);
            map.fitBounds(bounds,15);
            /* ★ポリライン */
            /* 
                表参道駅から渋谷駅までのドライブルートにポリラインを引く
                stepsの緯度経度はGoogle Directions APIで取得
                http://maps.google.es/maps/api/directions/json?origin=omotesando+station&destination=shibuya+station&sensor=false
            */
             /* steps1 - 都道413号線*/
            var steps1_st=new google.maps.LatLng(35.665270, 139.712330);
            var steps1_ed=new google.maps.LatLng(35.668480, 139.705360)
             /* steps2 - 神宮橋(交差点)*/
            var steps2_st=new google.maps.LatLng(35.668480, 139.705360);
            var steps2_md=new google.maps.LatLng(35.664100, 139.702229); /* 補正 */
            var steps2_ed=new google.maps.LatLng(35.659540, 139.702420);
             /* steps3 - 宮益坂下(交差点)*/
            var steps3_st=new google.maps.LatLng(35.659540, 139.702420);
            var steps3_ed=new google.maps.LatLng(35.659460, 139.700510);
             /* steps4 - 渋谷駅前(交差点)*/
            var steps4_st=new google.maps.LatLng(35.659460, 139.700510);
            var steps4_ed=new google.maps.LatLng(35.65855000000001, 139.700310);
             /* steps5 - 左折(交差点)*/
            var steps5_st=new google.maps.LatLng(35.65855000000001, 139.700310);
            var steps5_ed=new google.maps.LatLng(35.65835000000001,  139.700730);
            var flightPlanCoordinates=[
                /* 始点:表参道 */
                omotesando,
                 /* steps1 - 都道413号線*/
                steps1_st,
                steps1_ed,
                 /* steps2 - 神宮橋(交差点)*/
                steps2_st,
                steps2_md,
                steps2_ed,
                 /* steps3 - 宮益坂下(交差点)*/
                steps3_st,
                steps3_ed,
                 /* steps4 - 渋谷駅前(交差点)*/
                steps4_st,
                steps4_ed,
                 /* steps5 - 左折(交差点)*/
                steps5_st,
                steps5_ed,
                /* 終点:渋谷 */
                shibuya
            ];
            var flightPath=new google.maps.Polyline({
                path: flightPlanCoordinates,
                strokeColor: "#FF0000",
                strokeOpacity: 1.0,
                strokeWeight: 2
            });
            flightPath.setMap(map);
             /* ★アイコン */
            var image='/content/img/ajax/gmapv3/marker/car.png';
            
            var marker1=new google.maps.Marker({
                position: steps1_st,
                map: map,
                icon: image
            });
            var marker2=new google.maps.Marker({
                position: steps1_ed,
                map: map,
                icon: image
            });
            var marker3=new google.maps.Marker({
                position: steps2_ed,
                map: map,
                icon: image
            });
            var marker4=new google.maps.Marker({
                position: steps3_ed,
                map: map,
                icon: image
            });
            var marker5=new google.maps.Marker({
                position: steps4_ed,
                map: map,
                icon: image
            });
            var infowindow1=new google.maps.InfoWindow({
                content: "都道413号線を北西に進む",
                maxWidth:200
            });
            var infowindow2=new google.maps.InfoWindow({
                content: "神宮前(交差点)を左折して 明治通り/都道305号線に入る",
                maxWidth:200
            });
            var infowindow3=new google.maps.InfoWindow({
                content: "宮益坂下(交差点)を右折する",
                maxWidth:200
            });
            var infowindow4=new google.maps.InfoWindow({
                content: "渋谷駅前(交差点)を左折する",
                maxWidth:200
            });
            var infowindow5=new google.maps.InfoWindow({
                content: "左折する",
                maxWidth:200
            });
            google.maps.event.addListener(marker1, 'click', function() {
                infowindow1.open(map,marker1);
            });
            google.maps.event.addListener(marker2, 'click', function() {
                infowindow2.open(map,marker2);
            });
            google.maps.event.addListener(marker3, 'click', function() {
                infowindow3.open(map,marker3);
            });
            google.maps.event.addListener(marker4, 'click', function() {
                infowindow4.open(map,marker4);
            });
            google.maps.event.addListener(marker5, 'click', function() {
                infowindow5.open(map,marker5);
            });
        }
    </script>
</head>
<body>
    <h3>ポリライン</h3>
    <p>表参道駅から渋谷駅までのドライブルートにポリラインを引き、経由地点にマーカーを立てます。マーカーをクリックすると運転ルートを情報ウィンドウで表示します。</p>
    <!-- 地図の埋め込み表示 -->
    <div id="map_canvas"></div>
</body>
</html>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women