地図上にマーカーを表示させる

地図上にマーカーを表示させる

　「addMarkers()」では、2種類のマーカーを生成する処理が記述されています。マーカーを地図上に表示させるためには、Markerクラスのインスタンスを作成し、引数でマーカーを表示させる座標を指定します。

marker1 = new Marker(new LatLng(35.689516,139.691857));
marker1.addEventListener(MapMouseEvent.CLICK, onMarkerClick);
googleMaps.addOverlay(marker1);

　そして、マーカーをクリックした時のCLICKイベントをリスナー登録し、addOverlay()メソッドでマーカーを配置します。

　「marker2」では、マーカーの色や大きさ、ラベルやアイコン表示などを、MarkerOptionsクラスを用いてカスタマイズしています。

marker2 = new Marker(new LatLng(35.691043,139.740826), new MarkerOptions( {
[パラメータオブジェクト]
}));

　上記のパラメータオブジェクトの部分で、strokeStyle（線）、fillStyle（塗り）、radius（大きさ）など必要な設定を記述していきます。また、それぞれのマーカーがクリックされた際には「onMarkerClick()」が実行されます。「onMarkerClick()」では、openInfoWindow()メソッドで簡単なインフォウィンドウを表示させています。

テキスト表示ができるマーカーのカスタムクラス

　さらに機能を向上させるために、Markerクラスを継承したカスタムクラスを作っていきます。

　Markerクラスを継承することで、図2-1のように既存の機能をそのまま利用でき、なおかつ自由に機能追加を行うことが可能となります。

　それでは、テキストを表示できるマーカーのカスタムクラスを作成していきます。サンプルは、会員限定特典としてダウンロードできます。記事末尾をご確認ください。サンプルファイルの構成は図2-2のような内容となっています。また、図2-3のようなコンテンツが表示されます。サンプルの処理の流れについては、図2-4に簡単にまとめてあります。

　まず最初に、「TextMarkerSample.fla」を見てください。ライブラリに「textMarkerBase」というシンボルがあります。横長の吹き出しでテキストの長さに合わせて可変するように作成し、マーカーのベースオブジェクトとして使用していきます。そして「textMarkerBase」のシンボルプロパティのリンケージで、クラス名を「textMarkerBase」、基本クラスは「flash.display.Sprite」と記述します。これで「textMarkerBase」シンボルをクラスとして扱うことができるようになります。

　次に「TextMarker.as」を見てきます。これがMarkerクラスを継承したカスタムクラス「TextMarker」となります。

　クラスを継承する際の構文は以下のように、「extends」の後に継承したいクラス名を指定します。今回はマーカーを継承していくので「extends Marker」と記述しています。

public class TextMarker extends Marker { ... }

　そして「TextMarker」クラスのコンストラクタの引数に座標とMapオブジェクトを指定しておきます。

public function TextMarker(latLng:LatLng, maps:Map) {
baseObj = new textMarkerBase();
super(latLng, new MarkerOptions( { icon : baseObj } ));

　コンストラクタ内では、まず「baseObj」変数で「textMarkerBase」クラスのインスタンスを生成します。注意点として、Markerクラスは座標の引数が必須となるため、コンストラクタ内で「super()」を実行し、最低でも座標を引数で渡し初期化を行う必要があります。

　今回のサンプルでは、「super()」の引数に座標とMarkerOptionsクラスを指定します。このMarkerOptionsクラスのiconプロパティに「baseObj」を割り当てます。これでオリジナルデザインのマーカーを表示させることができます。そのほか、情報を表示させるための「setUp()」や各種マウスイベントを記述し「TextMarker」クラスが完成になります。

　次に、ドキュメントクラス「Main.as」を見ていきます。「addMarkers()」で今回の「TextMarker」クラスのマーカー作成と配置処理を行っています。

var marker:TextMarker = new TextMarker(new LatLng(35.691143,139.740772), googleMaps);

　そして、テキストやインフォウィンドウに表示するための情報を渡していきます。

marker.titleTxt = "株式会社インプレスIT";
marker.linkList.push(["テクノロジーポータル TEDIA", "http://tedia.jp/"]);
：

　最後に、情報の表示を反映させる「setUp()」を実行しマーカーを配置させます。

marker.setUp();
googleMaps.addOverlay(marker);

　これで、カスタムクラス「TextMarker」のマーカーが地図上に表示されます。