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
  • このエントリーをはてなブックマークに追加

関連記事

jQueryで要素にappendとafterを使って追加する

jqueryのappendは要素の末尾に指定要素を追加し、afterは要素の後に指定要素を加えます。

記事を読む

【javascript】RGB⇔カラーコード変換ライブラリ

RGBをカラーコードに変換、または、カラーコードをRGBに変換したい場合が出てきたのでどういうも

記事を読む

AmazonのランキングRSSから画像リンクを作る

Amazon RSS Amazonでいい感じのRSSが無いかと探していたのですが実は本家に素晴らし

記事を読む

jQueryのカラーピッカーライブラリFarbtastic Color Pickerを使う

.farbtastic .wheel { background: url(http://mem

記事を読む

スマホ向け幅固定サイトの回転時の幅対応方法

幅固定サイトでのスマホ回転時Webサイトの横幅を合わせる方法のメモ。 下記2点の設定が必要です。

記事を読む

【HTML/jQuery UI】NumericUpDownを設置する【Spinner】

HTMLタグにNumericUpDownがないか探したのですがないみたいなのでそれが使えるようなもの

記事を読む

ニコニコ動画のRSSをjavascriptで読み込んで表示させる

ニコニコ動画のランキングRSSをjQueryで読み込んで表示するプログラムを作成しました。RSSの読

記事を読む

YoutubeのURLリンクを外部プレイヤーのものに正規表現で置換する

Youtubeのアドレスを正規表現を使って抽出して外部プレイヤーのフレームに変換・置換するスクリプト

記事を読む

【javascript/jQuery】Progressbarで処理の進捗状況を表示する

jQuery UIでProgressbarを使う 処理経過を表示する場合プログレスバーにより提示さ

記事を読む

チェスボード画像自動生成ツール

1マスのサイズ(ピクセル) マスの数× 左上が白 枠をつけるか 枠の色白黒

記事を読む

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 ↑