Google Maps API・マイマップの使い方・活用法をご紹介しています。

マイマップで作成したKMLからポリラインGPS座標を取得・加工する|GoogleMyMaps

GoogleMyMaps(Googleマイマップ)はマウス操作で、
Googleマップ上にマーカーやライン、ルートなどを描画できる便利なツールです。
このツールを利用するとラインやルートのGPS座標リストを、
効率的に生成・取得することができるようになります。
ここではGoogleマイマップを利用したGPS座標収集の小技をご紹介します。

 

マイマップで作成したKMLからポリラインGPS座標を取得・加工する|GoogleMyMaps

まず、GPS座標のリスト(GoogleMapsAPIなどに転用)を取得したい
ルートやポリラインをGoogleマイマップ上で描画しエクスポートを行う事から始めます。

Googleマイマップの作成とポリライン描画

今回利用しているマイマップは以下を利用します。

 

マイマップから出力したGPS座標をもとにして、
以下のようにGoogleMapsAPIでポリラインの描画を行います。

 

なお、こうしたゴリゴリした作業は何が正しいという事はありません。
人によってやり方は様々かと思います。
その為、あくまでも「私はこうやっている」というアプローチをここではご紹介しています。
もっといいやり方がある方は、そちらの方法で作業されてください。

あくまでも1つの例をご紹介するまでです。

長々とご紹介していますが、
やっていることは慣れてしまえば単なるルーチンワークです。

ルーチンワークという事はマクロを記録して2回目以降はマクロ実行で、
一気に処理が可能という事です。

 

GoogleマイマップからのKMLエクスポート

描画ができたらそのデータをKMLにエクスポートします。

 

エクスポートしたKMLファイルは以下のようなものになります。

pline.kml

KMLファイルからGPS座標抜き出し(エディタ利用)

作成したKMLファイルをサクラエディタで開きます。
※正規表現が利用可能なエディタであれば問いません。

\t - 水平タブコード(HT,TAB)
\n - ラインフィード(LF)

(抜粋引用)利用可能な正規表現|正規表現

 

まず、サクラエディタでKMLファイルを開きます。
ファイルを開いたら「<coordinates>・・・</coordinates>」の行をコピーします。

get-latlng-kml_01

KMLファイルを開く・GoogleMyMaps+MapsAPI

 

実際には以下のようになっています。

コピーしたら新しいエディタウィンドウに貼り付けます。

「134.6926939,34.8382587,0.0 」の2つのカンマで区切られた
3要素が1GPS座標のセットです。
3番目の「0.0」は高度ですがマイマップからは常に0.0が出力されます。

get-latlng-kml_02

1GPS座標の塊・GoogleMyMaps+MapsAPI

 

以下のコーディングに合った形に取得した座標の体裁を整えます。

(補足)GoogleMapsAPIのポリラインGPS座標指定例

パスの指定は以下のようなオプション指定で行えます。

 

この例は以下でご紹介したものです。

または、以下のような連想配列で指定する事もできます。
個人的には、new.new.new…とnewが連呼される感が嫌いなので、
以下を利用することが多いです。

 

エディタによる置換処理

実際に置換を行っていきます。
「検索(S)」-「置換(R)」を選択します。

get-latlng-kml_03

置換メニューの選択・GoogleMyMaps+MapsAPI

 

置換メニューが開きます。
中程の「正規表現」に必ずチェックを入れ、以下の置換を行います。

置換前: ,0.0
置換後: \n (改行の正規表現)

入力が完了したら「すべて置換」で処理を実行します。

get-latlng-kml_04

高度情報の置換・GoogleMyMaps+MapsAPI

 

以下の通り、1GPS座標ごとに改行されリストになります。
最初と最後の部分は手で削除して、右のリストのように整えます。

get-latlng-kml_05

最初・最後の体裁調整・GoogleMyMaps+MapsAPI

 

次にカンマの置換を行います。
同じく正規表現にチェックを入れておきます。

置換前: ,
置換後: \t,\t (タブの正規表現)

入力が完了したら「すべて置換」で処理を実行します。

get-latlng-kml_06

カンマのタブ置換・GoogleMyMaps+MapsAPI

 

置換後の状態です各GPS座標の前半と後半の間にタブが2つ挿入されました。

get-latlng-kml_07

置換完了後・GoogleMyMaps+MapsAPI

 

これで一旦、エディタによる置換は完了です。
以後は、Excelで処理します。

ここまでの作業をルーチン化するには、
サクラエディタのマクロ機能を使うと便利です。

 

GPS座標のExcelによる体裁処理

ここでは以下の形式にExcelで編集します。

目標は以下の2,3行目に貼り付ける形式のデータを作成する事です。

エクセルを起動し、B1セルを選択した状態で、
エディタから全行をコピーし、貼り付けます。

get-latlng-kml_08

ExcelのB1へ貼り付け・GoogleMyMaps+MapsAPI

 

貼り付けを行うと、以下のようになります。

get-latlng-kml_09

貼り付け結果・GoogleMyMaps+MapsAPI

 

(注意)
Googleマイマップから出力したKMLデータのLat,LngのGPS座標は、
出力時点で「Lng,Lat」と順番が逆(GoogleMapsAPIから見て)になっています。

連想配列なので「{Lng:xxxxxxx, Lat:xxxxxxx}」と指定しても問題はありませんが、
一般に「{Lat:xxxxxxx, Lng:xxxxxxx}」の順で表現することが多いので、
間違いを減らす意味でも、Lat,Lngの順に入れ替えを行います。

Excelでは列を切り取って、貼り付けを2回行えば、
簡単に列の入れ替えは可能です。

入れ替えを終えた状態です。

get-latlng-kml_10

Lat,Lngの列入れ替え・GoogleMyMaps+MapsAPI

 

次に、プログラム内の連想配列で利用する構文に必要な情報を入力します。
以下のように、3つの列にそれぞれ入力します。

A列 {lat:
C列 , lng:
E列 },

get-latlng-kml_11

プログラム記述の追加・GoogleMyMaps+MapsAPI

 

それぞれの列に入力した値を、全行に反映します。

get-latlng-kml_12

全行へコピー反映・GoogleMyMaps+MapsAPI

 

以上でExcelでの作業は終了です。
このままソースとして貼り付けてもタブが入っているだけなので動作はします。

気分的にもう一度エディタでタブの置換を行います。

サクラエディタで最終体裁処理

サクラエディタにExcelで作成したセルをすべて選択し貼り付けます。
1セルごとにタブが入っています。

get-latlng-kml_13

Excelからエディタへ貼り付け・GoogleMyMaps+MapsAPI

 

置換でタブを空白に置き換えます。
ここでも同じく正規表現にチェックを入れておきます。

置換前: \t(タブの正規表現)
置換後: (空白)

入力が完了したら「すべて置換」で処理を実行します。

get-latlng-kml_14

タブの空白置換・GoogleMyMaps+MapsAPI

 

置換が完了した状態です。
これで連想配列部分のソースは完了です。

get-latlng-kml_15

連想配列の完成・GoogleMyMaps+MapsAPI

 

開発ツール(IDE)へ連想配列の貼り付け

JavaScriptをどのような開発ツール(IDE)で書かれているかは人それぞれかと思いますが、
私はEclipseを利用しています。

以下のように、ポリラインの「path:[・・・]」部分に、
作成した連想配列を貼り付けて導入します。

get-latlng-kml_16

JavaScript内へ貼り付け・GoogleMyMaps+MapsAPI

 

貼り付けた状態です。
連想配列の最後にある「,」は不要ですので手で削除します。

これでパスの定義が完了しました。

get-latlng-kml_17

連想配列とその他調整・GoogleMyMaps+MapsAPI

 

 

今回は20ポイント程度のパスデータを、
エディタで変換しつつソースにする例をご紹介しました。

 

実際の利用ではデータベースにCSVでインポート

この手法を利用すれば、ポイント数が多くなった長いポリラインも、
一括して処理が行えます。

 

通常、パスデータをJavaScriptに直接記述するのは稀でしょうし、
データベースからJSONなどで受け取るような仕組みになると思います。

そのような場合も、Excelで必要なデータ(座標以外の情報等)を、
テーブルで作成し、CSV形式で出力し、
データベースにインポートすることで一気にデータの作成が可能になります。

Googleマイマップで作成したポリライン(画面で確認ができる)を、
そのままGoogleMapsAPIに再現することができますので、
GPS座標データを効率的に集めることができます。

 

Googleマイマップで2点間のルートを作成させ、
途中の経由点のみを調整し、KMLで出力すれば、
最少の労力でポリライン座標を集めることができます。

 

以下に本投稿で表示しているGoogleMapsAPIのサンプルソースを書き添えます。

サンプルコード

HTML

HTMLではGoogle Mapを表示するエリア(<div id=”gmap_canvas”></div>)を配置しています。
エリアを囲んでいる「<div class=”aspect”></div>」部分は、
ページ表示用の高さ制御用のタグです。

 

CSS

CSSではclass=”aspect”に対して、 幅100%を指定し、 高さをビューポートの50%としています。 GoogleMapを表示するエリア(id=”gmap_canvas”)のサイズを、 class=”aspect”に対しての幅・高さを100%として指定しています。

JavaScript

Polylineインスタンスを生成時に、
対象のmapインスタンスをパラメータで渡します。
同時にラインを描画する座標を指定し、表示の色・透明度・重なり順を指定しています。

別途、GoogleMapsAPIのライブラリを読み込む記述が必要です。 ご自分が取得されたAPIキーを以下のコードの(YourAPIkey)部分に置き換えて設定してください。

 

参考

参考情報は特にありません。

 


公開日:

コンテンツ
すべて展開 | すべて省略