CodeZine(コードジン)

特集ページ一覧

OpenLaszloでGoogleマップを使う

第4回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

 オープンソースのRIA言語「OpenLaszlo」でGoogle Maps APIを使い、地図アプリを作る方法について説明します。

目次

はじめに

 本連載では、FlashやDHTMLによるリッチクライアントアプリケーションを作成できるOpenLaszloについて説明していきます。前回は、OpenLaszloとサーバーサイド連携について説明しました。今回は、OpenLaszloからGoogleマップを使用する方法を、簡単なサンプルプログラムを通して説明していきます。

これまでの記事

対象読者

  • HTML、JavaScriptを使用した開発を行ったことがある方
  • Flashを使用した開発を行ったことがある方
  • OpenLaszloについて興味がある方

Googleマップの準備

 Googleマップを使用すると、 OpenLaszloで作成するアプレットに地図を埋め込んで表示することができます。マーカーの表示、吹き出しの表示といったカスタマイズが、 OpenLaszloからGoogle Maps APIを呼び出すことで、簡単に実現できます。

Google Maps API キーの取得

 Googleマップを使用するには、Google Maps API キーが必要になります。APIキーは、Google Maps APIのページから取得できます。利用方法の「1. 登録して Google Maps API キーを取得します」のリンクをクリックすると登録画面が表示されます。今回のサンプルプログラムは、ローカルホスト上で動かすので、申請するURLは、 http://localhost:8080/ で申請します。

Google Maps API for Flash SDKのダウンロード

 SDKは、Google MAPS APIのページから取得できます。利用方法の「2. Google Maps API for Flash SDK をダウンロードします」のリンクをクリックするとSDKのダウンロードが始まります。ダウンロードしたsdk.zipを解凍して、libフォルダにある map_1_9a.swcを、「OpenLaszloのインストール先¥Server¥lps-4.3.0(※インストールしたバージョンで異なります)¥WEB-INF」に、flexlibフォルダを作成してこの中に入れておきます。

Google Mapsの使い方

 OpenLaszloで com.google.mapsパッケージのMapクラスを生成して、OpenLaszloのviewクラスの子として追加すると、Googleマップが画面に表示されます。コンパイルするときのランタイムはswf9、またはswf10を選択してください。その他では動作しません。

サンプルソース(map.lzx)
<?xml version="1.0" encoding="UTF-8"?>
<canvas width ="468"
        height="530"
        debug ="false">

  <!-- gmap.lzxのインクルード -->
  <include href="./gmap.lzx"/>

  <!-- Googleマップを表示するビュー -->
  <view id="GMapView" x ="10" y ="30" options="ignorelayout">

    <attribute name="_gmap" type="expression" value="null"/>

    <handler name="oninit">
    <![CDATA[
      this._gmap = new GMap();
      //viewにMapsを子として追加する
      this.sprite.addChildAt(this._gmap.map, this.sprite.numChildren);
    ]]>
    </handler>

  </view>

</canvas>
サンプルソース(gmap.lzx)
<?xml version="1.0" encoding="UTF-8"?>
<library>

<script when="immediate"><![CDATA[

public final class GMap {

#passthrough (toplevel: true) {
  //Google Maps APIライブラリをインポートする
  import com.google.maps.*;
  import com.google.maps.controls.*;
  import com.google.maps.overlays.*;
  import com.google.maps.styles.*;
  import flash.geom.*;
}#

  //Google Maps APIキー
  private const KEY = '発行されたAPIキーをここに記入してください。';

  private var _map:Map;

  public function GMap() {
    super();
    this._map = new Map();
    this._map.key = KEY; //Google Maps APIキーをセットする
    this._map.setSize(new Point(450, 340)); //Google Mapsのサイズを設定
  }

#passthrough {
  //Mapオブジェクトのゲッター
  public function get map() {
    return this._map;
  }
}#

}

]]></script>

</library>
サンプルソースを実行した結果
サンプルソースを実行した結果

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 株式会社ドゥアイネット 前田慎治(マエダシンジ)

    株式会社ドゥアイネットに勤務するプログラマーです。制御系から事務系まで 様々な開発を経験し、現在はCurlやOpenLaszloを使ってRIAの開発を担当してい ます。 OpenLaszloで開発した「スマートスケジューラー」 http://www.dinss.jp/

バックナンバー

連載:OpenLaszlo(オープンラズロ)をはじめよう
All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5