Google Maps JavaScript API v3でマップ上に線を引く

公開日: : API, JavaScript/jQuery

スポンサーリンク

GoogleMapsAPIを使って地図上に線を引いたときに気を付けたことなどをメモしておきます。

線を引く

GoogleMapsAPIではオーバーレイと呼ばれる地図上のオブジェクトを作成してそれをGoogleMap(Mapクラス)に埋め込む(setMap)ことで画像を表示させたり線を引かせたりします。位置は緯度経度を表すLatLngクラスで指定します。

以下のスクリプトは公式ページからの引用となります。

function initialize() {
  var myLatLng = new google.maps.LatLng(0, -180);
  var mapOptions = {
    zoom: 3,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);
  var flightPlanCoordinates = [
    new google.maps.LatLng(37.772323, -122.214897),
    new google.maps.LatLng(21.291982, -157.821856),
    new google.maps.LatLng(-18.142599, 178.431),
    new google.maps.LatLng(-27.46758, 153.027892)
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}

ID名「map_canvas」の要素に「flightPlanCoordinates」配列にて指定した線を2本引く処理となっています。線のプロパティはオーバーレイの一つである「Polyline」クラスによってなされ、そのパラメータとして座標値、色、線の幅サイズなどが指定されます。

注意すべき点としては、上記の例でいうと「flightPlanCoordinates」配列で座標値を指定する際、必ず始点と終点のペアで入力する必要があるので2の倍数になっているかどうか確認するということが挙げられます。

詳細は以下のページを参考にしてください。

複数の線を引くメソッドを作る

Pointという座標を格納するクラスの配列から線をGoogleMap上に引くという関数を作成しました。参考程度に見てください。

再度になりますが、座標値は線の始点と終点のペアで渡す必要があります。

var Point = function(x,y){
    this.x = x ;
    this.y = y ;
}
//線を引く。引数はPointの配列とカラーコード、線の幅サイズ
var drawLine = function(pointlist,colorcode,linewidth){
    var myLatLng = new google.maps.LatLng(0, -180);
    var mapOptions = {
      zoom: 3,
      center: myLatLng,
      mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);
        
    /*
     * ここから変更
     */
        
    //引数の座標リストからLatLngの配列を作成する
    var flightPlanCoordinates = [] ;
    var len = pointlist.length ;
    var last_x = 0 ;
    var last_y = 0 ;
    for(var i=0;i<len;i++){
        var p = pointlist[i] ;
        var x = p.x ;
        var y = p.y ;        
        if( i> 0 ){ //2組セットで線となる座標を加えていく
            var latlng0 = new google.maps.LatLng(x,y) ; 
            var latlng1 = new google.maps.LatLng(last_y,last_x) ; 
            flightPlanCoordinates.push(latlng0); 
            flightPlanCoordinates.push(latlng1);                     
        }
        last_x = x ;
        last_y = y ;
    }
    var flightPath = new google.maps.Polyline({
      path: flightPlanCoordinates,
      strokeColor: colorcode,
      strokeOpacity: 1.0,
      strokeWeight: linewidth
    });

    flightPath.setMap(map);
}

色を0~255で設定する

色の指定はWebサイトでおなじみのカラーコードとなっていますが、256階調のRGB値で指定したいということもあるとおもいます。というか私はそちらの方がなじみがあるので0~255の値をカラーコードに変換して使いました。

使用したのは「rgbcolor.js」というプラグインで以前このブログでも紹介したので気になる方は一度ご覧ください。

今回はランダムに取得した0~255の値をカラーコードに変換する関数を作成しました。

function getRandomColorCode(){
    var rgb = [
        parseInt( Math.random()*256 ),
        parseInt( Math.random()*256 ),
        parseInt( Math.random()*256 )
    ];
    var color = new RGBColor("rgb("+rgb[0]+","+rgb[1]+","+rgb[2]+")");
    return color.toHex();
}

「RGBColor」というのがrgbcolor.jsで記されているクラスで、これに色の情報を渡すことで(相互に)RGB値、カラーコード値に変換することができます。作成した色の値は「”rgb(○○,××,△△)”」の文字列にして渡して、「toHex」メソッドにてカラーコード化します。

前回紹介した『HeartRails Express』と組み合わせて指定の駅同士を結びました。(ちょっと過程は複雑なので省きます。ごめんなさい。)

googlemapapilineimage1

ランダムに色を付け、複数の線を引いてみました。曲線のようになっているのは直線の集合です。わかりやすいように始点と終点にマーカーも設置しました。

スポンサーリンク
Amazon
  • このエントリーをはてなブックマークに追加

関連記事

PHPでページリロードをしようと思ったができなかったので

header("Location: ".$_SERVER); とすればページをリロードでき

記事を読む

【3DCG・MMD】カメラレンズによる見え方シミュレータ作成について

カメラのレンズが違うことでどのくらい出来上がる写真に差が出てくるのかを確かめることのできるシミュレー

記事を読む

ニコニコ動画のURLリンクから外部プレイヤーのスクリプトに正規表現で置換する

ニコニコ動画の動画のアドレスを抽出して外部プレイヤー貼りつけソースのスクリプトに変換するソースです。

記事を読む

【javascript】privateのメソッドからpublicなメンバを呼ぶ

javascriptでのクラス定義 javascriptではいわゆる正確なクラスは作れませんが、そ

記事を読む

【jQuery】大量の画像で重くなったページを遅延ロードで軽くする方法【Lazy Load】

画像をふんだんに使っているページでは読み込みの際に非常に時間がかかるという問題点があります。数枚なら

記事を読む

【jQuery/javascript】Tweetボタンを動的に設置する

Twitterボタンをブログやサイトに設置するとき読み込みに時間がかかってしまって困るといったことや

記事を読む

【javascript】正規表現文字置換簡易ツール

jQueryで作成した正規表現による文字抽出用スクリプトです。 (使い方) 「正規表

記事を読む

【javascript】RSSを読み込んで表示させる【Google Feed API】

jQueryで簡単にRSSフィードを表示させる方法としてGoogleFeedAPIを利用するというの

記事を読む

【jQuery】hasClass is not a functionエラー

jQueryでセレクタを使って取得してきたjQueryオブジェクトからその子要素をchildrenで

記事を読む

AAアニメーション

javascriptでAAアニメーションしました。AAは以下のところから参照しました。(AAアニメー

記事を読む

NVIDIA DIGITSをSupervisorを使って自動起動する

はじめに 先日Ubuntu14.04にDIGITS 5をGPUなしP

【2017年度】GeForce 1080 Ti搭載BTOパソコン比較

はじめに 最近ディープラーニング用にGPUのないPCにDIGITSを

Windows用のシンプルなストップウォッチソフト紹介

Windows(10)でも使える使いやすいKAZAMITimerという

MNISTをDIGITS 5のCPUのみで試す(GPUなし)

はじめに DIGITSを使えばGUI操作で簡単にディープラーニングが

Windowsユーザが初めてMacBookを購入したときの注意点や感想

最近12インチのMacBookを購入しました。今までWindowsしか

Redmine3.2をUbuntu14.04にインストールして躓いた所についてメモ

はじめに Ubuntu14.04 ServerにRedmine3.2

UWSCを使ったソフト自動立ち上げ【SoftEther VPN Server】

やりたいこと 最近SoftEtherという筑波大学発のベンチャー企業

→もっと見る

  • Author : ががんぼ
    プログラミングやWeb関係で気付いたことについてメモしていく予定。だいたいが備忘録ですが、自分でサンプルを作って動かしてみたりしています。
PAGE TOP ↑