Flex/Flexを利用したGoogleMapsAPIforFlashによる地図表示/言語指定の方法 http://www.ark-web.jp/sandbox/wiki/3051.html

[edit]

Flex/Flexを利用したGoogleMapsAPIforFlashによる地図表示/言語指定の方法

[edit]

はじめに

GoogleMapsAPIforFlashのTipsというか、気になったことを単体で調査してアウトプットしています。
今回は、言語の指定方法についてです。

通常、GoogleMapsを表示した時は、日本語で地域の名称やランドマークが書かれています。
ですが、英語がネイティブのヒトには漢字は分かりづらいですね。

今回は、GoogleMapsAPIforFlashで言語を変える方法と、どう表示されるかについてまとめてみました。

[edit]

GoogleMapsAPIforFlashの使い方など

『Google Maps API for Flash』を利用した地図表示について、別途勉強した内容が下記にありますので参考までに^^

[edit]

GoogleMapsのデフォルトの挙動

GoogleMapsはデフォルトで『ブラウザのカルチャ設定』を参照しています。

「ブラウザのカルチャ」はあまり聞きなれないかもしれませんが、要するにブラウザから指定できる『言語』です。

IE7の場合は、[ツール(T)]から[インターネット オプション(O)]で開くダイアログの[言語(L)]で現在の言語が確認できます。

よって、言語を追加して、一番上に持ってきて適用させると、その言語に対応したマップを表示します。

[edit]

言語ごとのマップの違い (東京タワー周辺)

マップクリックで拡大画像を表示します。

[edit]

GoogleMapsAPIforFlash上での設定

実は、何気に簡単で下記のように map.language にセットするだけです。

map.language = 'en'
[edit]

1.MXMLの記述してコンパイルし、SWFファイルを作る

<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright 2007 Google Inc. -->
<!-- All Rights Reserved. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
  <mx:Panel title="Google Maps API for Flash - Another languages map" width="100%" height="100%">
    <mx:UIComponent id="mapContainer" 
        initialize="startMap(event);" 
        resize="resizeMap(event)" 
        width="100%" height="100%"/>
  </mx:Panel>
  <mx:Script>
    <![CDATA[
import flash.events.Event;
import com.google.maps.MapEvent;
import com.google.maps.Map;
import com.google.maps.MapType;
import com.google.maps.LatLng;
import com.google.maps.controls.ZoomControl;
import com.google.maps.controls.PositionControl;
import com.google.maps.controls.MapTypeControl;

  private var map:Map;

  public function startMap(event:Event):void {
    map = new Map();
    map.addEventListener(MapEvent.MAP_READY, onMapReady);
    mapContainer.addChild(map);
  }
  
  public function resizeMap(event:Event):void {
    map.setSize(new Point(mapContainer.width, mapContainer.height));
  }
  
  private function onMapReady(event:Event):void {
    // 指定した言語
    var language:String = loaderInfo.parameters['language'];
    
    map.language = language;
    map.setCenter(new LatLng(35.658586,139.745429), 15, MapType.NORMAL_MAP_TYPE);
    map.addControl(new ZoomControl());
    map.addControl(new PositionControl());
    map.addControl(new MapTypeControl());
  }
    ]]>
  </mx:Script>
</mx:Application>

HTML(php)側のFlashに渡すパラメータを↓このようにしています。

<object (...)>
<param name="movie" value="gmapsapi4fl10another_language_map.swf" />
<param name="quality" value="high" />
<param name="flashVars" value="key=GoogleMapsのAPIキー&language=<?php echo $sLanguage; ?>" />
<embed (...)flashVars="key=GoogleMapsのAPIキー&language=<?php echo $sLanguage; ?>">
</embed>
</object>

コンパイルします

C:\work\flex\googlemapsapiforflash>mxmlc -library-path+=lib\map_flex_1_3.swc gma psapi4fl10another_language_map.mxml
Loading configuration file C:\flex_sdk_3\frameworks\flex-config.xml
C:\work\flex\googlemapsapiforflash\gmapsapi4fl10another_language_map.swf (191642 bytes)
[edit]

2.表示するウェブページを作り、アクセスして動作確認する

[edit]

このサンプルを一式ダウンロードする

[edit]

参考資料

投稿者竹村 | パーマリンク | コメント(0)

| append.gif

tag: FlexGoogleGoogleMapsGoogleMapsAPIforFlash


添付ファイル: fileanother_language_map.gif 459件 [詳細] file10another_language_map.zip 760件 [詳細] filegm_08ru.gif 974件 [詳細] filegm_07fr.gif 1009件 [詳細] filegm_06de.gif 957件 [詳細] filegm_05it.gif 960件 [詳細] filegm_04ko.gif 1091件 [詳細] filegm_03zh.gif 1119件 [詳細] filegm_02en.gif 1147件 [詳細] filegm_01ja.gif 1224件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2008-12-04 (木) 12:47:10 (3939d)

アークウェブのサービスやソリューションはこちら