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); とすればページをリロードでき

記事を読む

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

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

記事を読む

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

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

記事を読む

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

はてなブックマークのボタンをページの読み込みが終わった後にjavascript(jQuery)で追加

記事を読む

【jQuery UI】タブをクリックしたときのイベントでselectが使えない

jQuery UIは1.10のバージョンではタブをクリックしたときのイベントの名前が変わっているよう

記事を読む

【Three.js/jThree.js】カメラ内部パラメータを変更して視野などを変える

jThree.jsでカメラの内部パラメータを変更するのに手間取ったのでメモ。参考にしているjThre

記事を読む

【jQuery】サイドバー固定に役立つサイト集

縦スクロール 縦方向にスクロールして指定の位置に来たら要素を固定させる方法のリンク集を紹介させてい

記事を読む

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

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

記事を読む

【ImgToAA】画像をAA化するツール

指定の画像を読み込ませてAA化するツールです。サンプルはこちら。 (使い方) 画像ファイ

記事を読む

【Javascript】1つまたは複数のランダムな値を取得する

#shuffle1btn,#shuffle2btn{ padding: 4px 6px; }

記事を読む

【Unity】他のスクリプトを一括で取得して有効化・無効化を制御する

Unityを使っていて他のスクリプトを一時的に停止させたいと思ったので

テレビの録画をPCやNASで共有する

今までテレビはテレビ用のモニターで見ればいいやと思っていたのですが、さ

【DeepLearning】物体検出手法のSSD(Keras版)を試す (Ubuntu14.04)

はやりのディープラーニングの物体検出手法の一つであるSSDのサンプルを

【Laravel5】既存のDBからデータを取得して表示する

はじめに 今まで作ったWebサイトをLaravel5で見れるようにし

【C++/OpenCV】cv::Matの画像にインパルスノイズを付加する

OpenCVで画像にノイズを付け足したいと思って調べたところ、Pyth

Intel Corei7-7700TでHTC Viveの動作確認

はじめに HTC ViveというVRヘッドセットで遊んでみたのでその

【Python】フォルダ内のカッコ付き数字ファイルを一括でリネームするスクリプト

はじめに タイトルどおりなのですが、指定フォルダ内のファイルのファイ

→もっと見る

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