地図情報を表示する場所を作成しよう！

まずは、「Yahoo!地図」を表示する場所をdivタグで定義し、Map画像（map.gif）を追加します。

【div id="right"の終了位置の下にHTMLを以下のように追加してください。】

<div id="map">
	<div id="map-title"><img src="images/map.gif" /></div>
	<div id="mapdiv"></div>
</div>

【コードビュー】

Yahoo!地図を表示してみよう！

これで地図を配置する場所はできました。あとは、Yahoo!地図を表示するだけです。
今回使用する地図は「Flash版地図API」となります。

• Yahoo!デベロッパーネットワーク

Flash地図コンテンツのページ内での地図の位置や大きさなどは、<object>タグを囲む<div>タグのCSSで指定します。<object>タグのidと<embed>タグのnameは同じ値を設定します。
ここで使用される値は、メソッド呼び出しの際に使用します。

それでは、「Flash版地図API」の内容を元に外部APIを呼び出すコードを記述していきます。

【div id=”mapdiv”内のHTMLを以下のように変更してください。】

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
	codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/
        swflash.cab#version=8,0,0,0" 
    		width="100%" height="100%" id="YFMap" align="middle">
          <param name="allowScriptAccess" value="always" />
          <param name="movie" value="http://map.yahooapis.jp/MapsService/Flash/V2/?appid=**********" />
          <param name="quality" value="high" />
          <param name="bgcolor" value="#ffffff" />
          <embed src="http://map.yahooapis.jp/MapsService/Flash/V2/?appid=**********"
		quality="high" bgcolor="#ffffff" width="100%" height="100%" 
   	 	name="YFMap" align="middle" allowScriptAccess="always" 
         	type="application/x-shockwave-flash" 
         	pluginspage="http://www.macromedia.com/go/getflashplayer" />
        </object>

【コードビュー】

では、AIRでプレビューしてみましょう。
これだけで、地図が表示されます。完成に近づいてきましたね。

ページ 3 / 5

前のページ

次のページ