Google Maps API for Flash の情報ウィンドウについて

[やま]

初めて投稿します。いままで　Flash CS3 、ActionScript 2.0　を使っていろいろやってたんですが、今回、Google
Mapsを取り入れたものを作りたくて　Google Maps API for Flash とActionScript 3.0　に初めて手を出し
て挑戦しているのですが、情報ウィンドウのカスタマイズのところで躓いています。
プロパティ　contentHTML　で
contentHTML: "くわしくは\n<a href=\"http://www.ｘｘｘｘ.com/\"><b>こちら</b></a>",
みたいな文を入れ、リンクの部分を青色下線付きにしたいのですが、なかなかできません。たぶんcontentStyleSheet　を使うんだなと思
い、公式のリファレンスのclass InfoWindowOptions
にあるソースをいじってみたのですが、うまくいきません。
公式、その他のサイトのデモを見てソースを開いたりするのですが、ぴったしくるものがみつからなく、またfor Flashだと本も出てないようで、ど
うやって調べたらいいか分からない状況です。
どなたかヒントや参考になるものを教えていただければ助かります。よろしくお願いします。

[Masashi.K]

やまさん

はじめまして。

Google Maps API for Flash は Action Script 3.0 が前提ですので
Action Script 2.0 だと、うまく動かないと思いますよ。試してないですけど。

-----------------------------------------
情報ウィンドウは、こんな感じでできると思います。

var opts : InfoWindowOptions = new InfoWindowOptions();
opts.contentHTML = "<a href='http://hogehoge.com'
target='_blank'>link</a>";
marker.openInfoWindow(opts);
-----------------------------------------

例－41：オリジナル の吹き出しを開く (Adobe Flash CS3)
Flash CS3のサンプルは、少しくらいでよければ、私のサイトにもありますよ。

http://googlemaps.googlermania.com/map_example_41.html

参考になれば幸いです。

[やま]

Masashi.Kさん、こんにちは。
早速の返事ありがとうございます。
「Google Maps 活用講座」は、ここ数週間、参考にさせていただいております。
本当は、向こうのサイトに質問上げようかな思ったのですが、「技術的な質問は・・・」とありましたので、こちらに投稿してみました。
for Flash関係がまだまだ少ないのはさびしいですが、基本的なことはずいぶん学ばせていただきました。
ありがとうございます。こういったサイトがあると、初心者にとっては大助かりです。

え～と、私の書き方がごちゃごちゃしてて分かりにくかったかと思いますが、いまはActionScript 3.0で作業しております。
オリジナルのふきだしも実験させていただきましたが、今回やりたいと思っているのは、普通の情報ウィンドウの中の文章にスタイルシートを反映させる方法
です。

というのは、いまのところリンク部分がふつうの黒い文字であり、このままじゃリンクなのかどうか分からないので、
なんとかして「青文字下線付き」にならないものかと思っているところです。
また、応用が利くならば、特定の文字だけ色とサイズを変えたり、ゆくゆくは画像を入れるなどできればいいなと思っています。
太字にするくらいなら<b>タグで何とかなったのですが、
下線などは<p style="text-decoration:underline">とやっても反映されません。

公式リファレンスの　class InfoWindowOptions
http://code.google.com/intl/ja/apis/maps/documentation/flash/reference.html#InfoWindowOptions
のところを読むと
「すべての情報ウィンドウに適用される、デフォルトのオプション セット・・・」とか書いてあったりして、
ここで設定してあげないといけないのかなと思ったりするんですが、違いますでしょうか？

いずれにしても、これから先、いろいろと分からないことが続出しそうな感じなので、
なるべく自力で調べたいと思いますが、みなさんよろしくお願いします。

[K.Murakami]

やま　様

　

・・・・・いまのところリンク部分がふつうの黒い文字であり、

　　このままじゃリンクなのかどうか分からないので、なんとかして

　　　　「青文字下線付き」にならないものかと思っているところです。・・・・・・

この文意に関して、お役に立てるかもしれないと考え、投稿させて

　　いただきます。当方もＧｏｏｇｌｅ　Ｍａｐを使用させて戴いて、サイトを

　　　作成中ですが、いろいろとリンクをはり、閲覧者に便宜を図りたく考え

　　　　ております。ご指摘の点に関しては、意外と楽観しております。

 

リンクを張るときの基本タグは<a href="xxxxxx.html">*****</a>ですね。

　このaに、ＣＳＳの中で数々の装飾を指定して、ＨＴＭＬ側に反映させますと

　　いろいろなリンクボタン等もできたりして楽しいものです。

　　　「青文字下線付き」のみならず、クリック状態に応じていろいろな色文字で、

　　　　下線の太さもかえられます。aの装飾に関して詳しくまとめたＣＳＳの

　　　　参考書もありますので書店で確認されることをお勧めします。

　　　　　頑張って下さい。

　　　　　　　K-Mura

[やま]

K.Murakami 様

アドバイスありがとうございます。いろいろ勉強してみたいと思います。

ちなみに↓
http://www.walkerz.info/test/flash_01.html
こちらが問題の今製作中のコンテンツ（テスト中）です。

数字つきマーカーをクリックして開くウィンドウの太字の部分がリンクになっています。

で、スクリプトは、以下の感じです。
-----------------------------------------------------------------------------------------------
import com.google.maps.*;
import com.google.maps.controls.*;
import com.google.maps.overlays.*;
var map:Map = new Map();
map.key = "*****";
map.language = "ja";
map.setSize(new Point(700, 560));
map.addEventListener(MapEvent.MAP_READY, onMapReady);
function onMapReady(event:Event):void {
map.setCenter(new LatLng(39.748982,-105.009685), 15,
MapType.SATELLITE_MAP_TYPE);
//コントロールを追加
map.addControl(new ZoomControl());
map.addControl(new PositionControl());
map.addControl(new MapTypeControl());
map.addControl(new ScaleControl());
（略）
//マーカー03
var marker03 : Marker = new Marker(
new LatLng(39.753179,-105.000147),
new MarkerOptions({
label: "3",
tooltip: "ユニオン・ステーション"
})
);
map.addOverlay(marker03);//マーカー設置
//情報ウィンドウ03
var option03:InfoWindowOptions = new InfoWindowOptions({
contentHTML: "ユニオン・ステーション\n<a style=\"color:#0000FF\" href=\"http://
www.denverunionstation.org/\"><b>公式ＨＰ</b></a>",
customOffset: new Point(0, 10),
hasShadow: false
});
marker03.addEventListener(MapMouseEvent.CLICK, function(e:Event):void
{;
marker03.openInfoWindow(option03);
});

//マーカー04
var marker04 : Marker = new Marker(
new LatLng(39.753723,-105.001595),
new MarkerOptions({
label: "4",
tooltip: "Union Station LRT Nb"
})
);
map.addOverlay(marker04);//マーカー設置
//情報ウィンドウ04
var option04:InfoWindowOptions = new InfoWindowOptions({
contentHTML: "ライトレール乗り場\nUnion StationからCラインに乗って、Invesco Field at
Mile High駅で下車。\n<a style=\"text-decoration:underline\" href=\"http://
www.rtd-denver.com/\"><b>RTDのホームページ</b></a>",
customOffset: new Point(0, 10),
hasShadow: false
});
marker04.addEventListener(MapMouseEvent.CLICK, function(e:Event):void
{;
marker04.openInfoWindow(option04);
});
（略）
//オリジナルマーカー01を作成する
var markerIcon01:MovieClip = new myIcon01();
var marker01 : Marker = new Marker(
new LatLng(39.743925, -105.020050),
new MarkerOptions({
icon : markerIcon01,
iconAlignment: MarkerOptions.ALIGN_HORIZONTAL_CENTER |
MarkerOptions.ALIGN_BOTTOM
})
);
map.addOverlay(marker01);
}
this.addChild(map);
-----------------------------------------------------------------------------------------------
マーカー03の<a>要素に style=\"color:#0000FF\" href=\"http://
www.denverunionstation.org/\"
で青色を
マーカー04の<a>要素に style=\"text-decoration:underline\" href=\"http://
www.rtd-denver.com/\"
でアンダーラインを設定しているのですがやはり反映されていません。
やはり、この書き方ではダメなのでしょうか？
（ \ は " のためのエスケープ）

引き続き、アドバイスやダメ出しなどありましたら、皆さんよろしくお願いします。

[K.Murakami]

やま　様

 

大変レベルの高いお話で失礼しました。

　完成の暁には、作品をご紹介下さい。

　　K-Mura

 

----- Original Message -----

From: やま

To: Google-Maps-API-Japan

[やま]

K.Murakami 様

いえいえ、こちらは、HTMLやCSS、Flashなど、どれも中途半端でずっと勉強中ですし、
Google Maps API に関しては、まったくの初心者です。

初心者といえば、
こういった掲示板に書き込むのも初めてであり、
うまく伝わらなかったり、誤解されるような表現になってたりがあるかと思いますが、
温かい目で見守っていただけたら幸いです。

今後ともよろしくお願いします。

[Masashi.K]

やま さん

時間が開いてしまってすみません。Masashi.Kです。
えっと、うちのサイトを参考にしていただいていて有難うございます。
そうゆう声をいただけると励みになり、とてもうれしいです。

では本題で。
Action Scriptの場合、インラインスタイルシートは使うことが出来ません。（たぶん）
代わりに StyleSheet クラスが用意されています。
使い方はこんな感じです。
(細かいコードは省略しております。)
-----------------------------------------------
import flash.text.StyleSheet;

var classTag:Object = new Object(); //スタイルクラスオブジェクト
classTag.color = "#FF0000"; //フォントカラー
classTag.fontSize = "18"; //フォントサイズ
classTag.leading = "12" //行間
classTag.letterSpacing = "5" //文字間

//スタイルを作成
var style:StyleSheet = new StyleSheet();
style.setStyle(".testClass" , classTag);

//情報ウィンドウ を表示する

var opts : InfoWindowOptions = new InfoWindowOptions();

opts.contentHTML = "<p class='testClass'>Google Maps API</p> for Flash!";
opts.contentStyleSheet = style;
this.openInfoWindow(initPos, opts);
--------------------------------------------------------

添付画像のような感じで、個別のクラスに適用することが出来ます。
ご参考にしていただければ幸いです。

[やま]

Masashi.Kさん

できました！
ありがとうございます！
Google Maps API for Flash というよりは ActionScript 3.0 寄りの問題だったんですね。
Flash は2～3年やっているんですが、 ActionScript 3.0 はずっと敬遠してて、
今回 Google Maps を扱う上で仕方なくチャレンジしてみたわけだったんですが・・・
いや～、これは盲点でした。
（っていうか勉強不足ですね。お恥ずかしい。(^_^;)）

皆さんのおかげでいろいろ勉強になりました。
ありがとうございました。