SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

OpenLaszlo(オープンラズロ)をはじめよう

OpenLaszloでGoogleマップを使う

第4回

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

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

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

はじめに

 本連載では、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>
サンプルソースを実行した結果
サンプルソースを実行した結果

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
緯度、経度を指定して移動する

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
OpenLaszlo(オープンラズロ)をはじめよう連載記事一覧

もっと読む

この記事の著者

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/4233 2009/08/19 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング