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

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

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

関連記事

WordPressサイトのSSL対応(HTTPS化)手順のまとめ【さくらサーバー】

先週頃にこのサイトをSSL対応しましたのでその流れについてまとめておき

【Google Charts】動的にグラフを更新する方法

はじめに Webサイト上でグラフを描こうと思った場合、いくつかのJa

体重変化量計算シミュレータ【ダイエット/肥満】

ツール本体 入力 カロリー入力 1日の余剰摂取/消費カロリー

おサイフケータイ対応ストレージ32GBのSIMフリースマホまとめ【2017年秋版】

はじめに SIMフリーの格安スマホのおサイフケータイ機能付きのもので

リクルート期間限定ポイントの有効な使い道

はじめに  先日クレジットカードの見直し活動の一環でポイント還元率の

初心者がお金を貯めるための節約・財テク手法まとめ【ポイント還元・投資・税金対策】

はじめに  最近なるべく節約しようと思い、お金周りに関して色々調べて

動画講座を効率的にキャプチャして復習する方法

はじめに  最近、動画媒体の講座などをたまに視聴しています。独学だと

→もっと見る

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