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

追加された行はこの色です。
削除された行はこの色です。
Flex/Flexを利用したGoogleMapsAPIforFlashによる地図表示/言語指定の方法へ行く。
Flex/Flexを利用したGoogleMapsAPIforFlashによる地図表示/言語指定の方法の差分を削除
 ** Flex/Flexを利用したGoogleMapsAPIforFlashによる地図表示/言語指定の方法 [#wf8905c1]
 
 *** はじめに [#ce5313db]
 GoogleMapsAPIforFlashのTipsというか、気になったことを単体で調査してアウトプットしています。
 今回は、言語の指定方法についてです。
 
 通常、GoogleMapsを表示した時は、日本語で地域の名称やランドマークが書かれています。
 ですが、英語がネイティブのヒトには漢字は分かりづらいですね。
 
 今回は、GoogleMapsAPIforFlashで言語を変える方法と、どう表示されるかについてまとめてみました。
 
 #blikimore
 
 *** GoogleMapsAPIforFlashの使い方など [#g09f937b]
 
 『Google Maps API for Flash』を利用した地図表示について、別途勉強した内容が下記にありますので参考までに^^
 
 - [[第1回 基礎編:http://www.ark-web.jp/sandbox/wiki/326.html]]
 -- 動作環境の構築と簡単なマップの描画
 
 - [[第2回 マーカー編:http://www.ark-web.jp/sandbox/wiki/327.html]]
 -- マップ上に表示するアイコン(マーカー)について
 
 - [[第3回 実験編 (本編):http://www.ark-web.jp/sandbox/wiki/329.html]]
 -- JavaScriptとの連携や、Polylineで円の描画と、四角の描画が何個まで耐えられるのか
 
 
 ** GoogleMapsのデフォルトの挙動 [#a2bc2b19]
 GoogleMapsはデフォルトで''『ブラウザのカルチャ設定』''を参照しています。
 
 「ブラウザのカルチャ」はあまり聞きなれないかもしれませんが、要するにブラウザから指定できる『言語』です。
 
 IE7の場合は、[ツール(T)]から[インターネット オプション(O)]で開くダイアログの[言語(L)]で現在の言語が確認できます。
 
 よって、言語を追加して、一番上に持ってきて適用させると、その言語に対応したマップを表示します。
 
 *** 言語ごとのマップの違い (東京タワー周辺) [#l19d95a1]
 マップクリックで拡大画像を表示します。
 
 - 日本語(ja)
 #ref(gm_01ja.gif,,50%)
 -- 当然日本語
 
 - 英語(en)
 #ref(gm_02en.gif,,50%)
 -- ローマ字補足付き
 
 - 中国語(zh-cn)
 #ref(gm_03zh.gif,,50%)
 -- 日本語ママ
 
 - 韓国語(ko)
 #ref(gm_04ko.gif,,50%)
 -- ローマ字補足付き
 
 - イタリア語(it)
 #ref(gm_05it.gif,,50%)
 -- ローマ字補足付き
 
 - フランス語(fr)
 #ref(gm_07fr.gif,,50%)
 -- ローマ字補足付き
 
 - ドイツ語(de)
 #ref(gm_06de.gif,,50%)
 -- ローマ字補足付き
 
 - ロシア語(ru)
 #ref(gm_08ru.gif,,50%)
 -- なぜか日本語ママ
 
 
 ** GoogleMapsAPIforFlash上での設定 [#t4cef6c2]
 実は、何気に簡単で下記のように map.language にセットするだけです。
 
  map.language = 'en'
 
 
 *** 1.MXMLの記述してコンパイルし、SWFファイルを作る [#n5b64574]
 
  <?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>
 
 - loaderInfo.parameters['language']; は、下記で書いていますが、パラメータとして渡された値です。
 
 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>
 
 - $sLanguage にはマップ変更のプルダウンの値を反映させています。デフォルトは日本語。
 
 コンパイルします
  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)
 
 
 *** 2.表示するウェブページを作り、アクセスして動作確認する [#ke78d0e9]
 
 - HTMLとSWFをアップロードしたものが↓こちらです
 #ref(another_language_map.gif,nolink)
 -- http://okra.ark-web.jp/~takemura/public/flex/googlemapsapiforflash/10another_language_map.php
 --- 画面下にある言語を変更すると、該当言語に変更されます
 
 
 *** このサンプルを一式ダウンロードする [#p9cfcacb]
 #ref(10another_language_map.zip,nolink)
 
 
 *** 参考資料 [#fc3d3de6]
 - Map.language プロパティ
 -- http://code.google.com/apis/maps/documentation/flash/reference.html#Map.language
 
 
 #blikifooter(竹村);
 #comment
 
 tag: [[Flex>tag/Flex]]、[[Google>tag/Google]]、[[GoogleMaps>tag/GoogleMaps]]、[[GoogleMapsAPIforFlash>tag/GoogleMapsAPIforFlash]]
 
 oishiso
アークウェブシステム開発SandBox

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