Googleマップを利用する (3/8)

では、実際に簡単な静止画マップを作って表示させてみることにしましょう。ここでは簡単な例として、地名や住所などを入力すると、その場所の地図をダイアログで表示するサンプルです。

スプレッドシートからスクリプトエディタを開き、下のリスト欄の関数myFunctionを記述してください。そしてスクリプトエディタの＜実行＞メニューからmyFunctionを選んで実行します。すると、スプレッドシートに地名を入力するダイアログが現れます。

ここに地名や住所を書いてOKすると、ダイアログが開き、その場所の地図が表示されます。

ここでは、Browser.inputBoxを使って住所や地名などを入力してもらい、これを中心位置に指定して地図を作成しています。見てみると、このようになっていますね。

var map = Maps.newStaticMap().setSize(400, 300)
      .setCenter(getname).setZoom(14).setLanguage('ja')
      .setMapType(Maps.StaticMap.Type.HYBRID);

先ほど紹介した、StaticMapの設定を行うメソッドは、設定変更済みの自分自身（このStaticMapオブジェクト自身）を返すようになっています。このため、このようにメソッドをどんどん続けて既述し呼び出すことが可能なのです。これで変数mapには、大きさ・中心位置・ズーム・使用言語・マップの種類がすべて設定済みとなったStaticMapオブジェクトが代入されます。



また、「作成した地図をどうやって画面に表示するか？」の問題も重要です。こうした画面へ独自の表示を行う場合、UiAppオブジェクトでGUI画面を作成し、それを表示するシートにaddしてshowするのが基本でしょう。

UiAppは、既にGUIビルダーなどで説明しましたが、GUIを扱うアプリケーションオブジェクトでしたね。ここにcreateVerticalPanelでVerticalPanelオブジェクト（縦に部品を並べていくパネル）を組み込み、その中にイメージを表示するImageオブジェクトを組み込んでやります。このImageオブジェクトに、StaticMapのイメージを設定して表示してやれば良いのです。

var url = map.getMapUrl();
panel.add(app.createImage(url));

StaticMapには、作成されたマップのイメージをサーバーから受け取る機能があります。必要な設定をした後、「getMapUrl」で、そのマップのURLを取得します。このURLにアクセスすると、マップイメージが送られてくるのです。ここでは、createImageの引数にこのURLを設定することで、そのイメージを表示するImageオブジェクトを作成しています。後はそれをパネルに組み込んで表示するだけ、というわけです。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

function myFunction() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet();
  // 地名をたずねる
  var getname = Browser.inputBox("地名", 
      "住所または地名・建造物名を入力：", Browser.Buttons.OK_CANCEL);
  // 静止画マップを取得する
  var map = Maps.newStaticMap().setSize(400, 300)
      .setCenter(getname).setZoom(14).setLanguage('ja')
      .setMapType(Maps.StaticMap.Type.HYBRID);
  // UiAppとVerticalPanelを作成する
  var app = UiApp.createApplication();
  var panel = app.createVerticalPanel();
  // マップのイメージを設定したImageコンポーネントを追加する
  var url = map.getMapUrl();
  panel.add(app.createImage(url));
  // あとはパネルを追加して表示するだけ
  app.add(panel);
  sheet.show(app);
}