back
Googleマップを利用する (6/8)
■マップにマーカーやパスを追加する
Geoコーディングの使い方がわかったところで、再びStaticMapに話を戻しましょう。
StaticMapによる静止画マップは、リアルタイムに動かすことは出来ませんが、しかしさまざまな情報を地図内に追加し描くことはできます。これを利用することで、単なるマップ以上の情報を盛り込むことが可能です。
地図に盛り込めるのは、地名、パス、マーカーなどの情報です。これらはStaticMapオブジェクトのメソッドとして用意されており、それらを呼び出すことで静止画マップに項目が追加されて描画されます。ではいかにメソッドを整理しておきましょう。
・地名を追加する
・パスを追加する
・パスを順に位置を追加して作成する
・マーカーを追加する
addAddressは、住所を追記するものです。衛星写真モードなどで必要な住所のテキストだけを追加したりするのに役立ちます。
addPathは、ルート検索などで使われていますね。描画するパスの位置の値（緯度・経度）をすべて１つの配列にまとめたものを引数に指定します。[緯度1, 経度1, 緯度2, 経度2,……]というような具合です。
また、位置の値を１つずつ追加してパスを作成していくこともできます。この場合は、beginPathでパスを開始し、位置の値を必要なだけaddPathで組み込み、できあがったところでclosePathする、といった手順になります。
addMarkerは、住所などのテキストで指定するものと、緯度経度を指定するものがあります。どちらでも指定の地点にマーカーを設定することができます。
これらのオブジェクトの表示に関する設定を行うメソッドも別に用意されています。以下に整理しておきましょう。
・パスの設定を行う
・マーカーの設定を行う
色の設定は、StaticMap.Colorに用意されているプロパティを使って指定します。個々に用意されている色の値としては以下のものがあります。
では、これらを利用したサンプルを挙げておきましょう。下のリストは、２つの地名を入力し、その２点にマーカーと、マーカー間を結ぶパスを表示したマップを作成します。実行するとスプレッドシートに２つの地名をたずねてくるので、それぞれ入力してやると、その２点に赤と青のマーカーを、そして２点を結ぶ緑のパスをそれぞれ追加して表示します。
StaticMapによる静止画マップは、リアルタイムに動かすことは出来ませんが、しかしさまざまな情報を地図内に追加し描くことはできます。これを利用することで、単なるマップ以上の情報を盛り込むことが可能です。
地図に盛り込めるのは、地名、パス、マーカーなどの情報です。これらはStaticMapオブジェクトのメソッドとして用意されており、それらを呼び出すことで静止画マップに項目が追加されて描画されます。ではいかにメソッドを整理しておきましょう。
・地名を追加する
《StaticMap》.addAddress( 地名 );
・パスを追加する
《StaticMap》.addPath( [……位置をまとめたdoble配列……] );
・パスを順に位置を追加して作成する
《StaticMap》.beginPath(); // パスの作成開始
《StaticMap》.addPath( 緯度 , 経度 ); // 位置をどんどん追加する
《StaticMap》.closePath(); // パスを終了する
・マーカーを追加する
《StaticMap》.addMarker( 追加する場所の住所等 );
《StaticMap》.addMarker( 緯度 , 経度 );
addAddressは、住所を追記するものです。衛星写真モードなどで必要な住所のテキストだけを追加したりするのに役立ちます。
addPathは、ルート検索などで使われていますね。描画するパスの位置の値（緯度・経度）をすべて１つの配列にまとめたものを引数に指定します。[緯度1, 経度1, 緯度2, 経度2,……]というような具合です。
また、位置の値を１つずつ追加してパスを作成していくこともできます。この場合は、beginPathでパスを開始し、位置の値を必要なだけaddPathで組み込み、できあがったところでclosePathする、といった手順になります。
addMarkerは、住所などのテキストで指定するものと、緯度経度を指定するものがあります。どちらでも指定の地点にマーカーを設定することができます。
これらのオブジェクトの表示に関する設定を行うメソッドも別に用意されています。以下に整理しておきましょう。
・パスの設定を行う
《StaticMap》.setPathStyle( 幅 , 線の色 , 塗りつぶしの色 );
・マーカーの設定を行う
《StaticMap》.setMarkerStyle( 大きさ , 色 , ラベル );
色の設定は、StaticMap.Colorに用意されているプロパティを使って指定します。個々に用意されている色の値としては以下のものがあります。
BLACK BLUE BROWN GLAY GREEN ORANGE PURPLEまたマーカーの大きさは、StaticMap.MarkerSizeに値が用意されています。利用可能な値は「TINY」「SMALL」「MID」です。
RED WHITE YELLOW
では、これらを利用したサンプルを挙げておきましょう。下のリストは、２つの地名を入力し、その２点にマーカーと、マーカー間を結ぶパスを表示したマップを作成します。実行するとスプレッドシートに２つの地名をたずねてくるので、それぞれ入力してやると、その２点に赤と青のマーカーを、そして２点を結ぶ緑のパスをそれぞれ追加して表示します。
(by. SYODA-Tuyano.)
※リストが表示されない場合
AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。
function showMarker() {
var sheet = SpreadsheetApp.getActiveSpreadsheet();
// ２つの地名を取得する
var getname1 = Browser.inputBox("地名",
"１つ目の地名を入力：", Browser.Buttons.OK_CANCEL);
var getname2 = Browser.inputBox("地名",
"２つ目の地名を入力：", Browser.Buttons.OK_CANCEL);
var map = Maps.newStaticMap().setSize(400, 300)
.setLanguage('ja')
.setMapType(Maps.StaticMap.Type.HYBRID);
// マーカーの設定をし追加する
map.setMarkerStyle(Maps.StaticMap.MarkerSize.MID,Maps.StaticMap.Color.RED,"A");
map.addMarker(getname1);
map.setMarkerStyle(Maps.StaticMap.MarkerSize.MID,Maps.StaticMap.Color.BLUE,"B");
map.addMarker(getname2);
// ２点のGeocoderから位置情報を取得する
var geocode1 = Maps.newGeocoder().geocode(getname1);
var point1 = geocode1.results[0].geometry.location;
var geocode2 = Maps.newGeocoder().geocode(getname2);
var point2 = geocode2.results[0].geometry.location;
// パスの設定をし、２点の位置を結ぶパスを追加する
map.setPathStyle(10, Maps.StaticMap.Color.GREEN, Maps.StaticMap.Color.GREEN);
map.addPath([point1.lat,point1.lng,point2.lat,point2.lng]);
// 後はいつもの処理です
var app = UiApp.createApplication();
var panel = app.createVerticalPanel();
var url = map.getMapUrl();
panel.add(app.createImage(url));
app.add(panel);
sheet.show(app);
}
| << 前へ | 次へ >> |