<p class="thumb"><img src="http://web-marketing.zako.org/images/2009/10/UMapper-Interactive-Map.jpg" alt="画像をインタラクティブなマップにしてしまう「UMapper」" title="画像をインタラクティブなマップにしてしまう「UMapper」" width="514" height="204" class="alignnone size-full wp-image-9592" /></p><p>以前にご紹介した<a href="http://web-marketing.zako.org/web-service/umapper-interactive-flash-google-maps.html">FlashベースのGoogleマップをブログに貼り付けられる「UMapper」</a>に、画像をアップして埋め込める機能が追加されたそうです。</p><p>これによって、古地図やWeb Trend Map にマーカーを付けて埋め込むなんてことも可能になりました。</p><!--more--><h3 class='header-label'>画像をインタラクティブなマップにしてしまう「UMapper」</h3><p>「<a href="http://web-marketing.zako.org/web-service/umapper-interactive-flash-google-maps.html">UMapper</a>」は、<strong>アップロードした画像にマーカーなどを付けて、Flashベースのマップとしてブログやサイトへ埋め込めるサービス。</strong></p><p>つまり、<a href="http://web-marketing.zako.org/tag/google-maps-api">Google Maps API</a> を利用してやるようなことをカンタンに実現してしまったことになります。</p><h4 class='tips'>古地図（世界地図）</h4><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="522" height="300" id="umapper_embed">  <param name="FlashVars" value="kmlPath=http://umapper.s3.amazonaws.com/maps/kml/42714.kml"/>  <param name="allowScriptAccess" value="always"/>  <param name="allowFullScreen" value="true"/>  <param name="movie" value="http://umapper.s3.amazonaws.com/templates/swf/embed.swf"/>  <param name="quality" value="high"/>  <embed src="http://umapper.s3.amazonaws.com/templates/swf/embed.swf" FlashVars="kmlPath=http://umapper.s3.amazonaws.com/maps/kml/42714.kml" allowScriptAccess="always" allowFullScreen="true" quality="high" width="522" height="300" name="umapper_embed" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/></object><p>↑国毎にマーカーを付けてあり、それぞれクリックすると当時の国名が表示されるようになっています。</p><h4 class='tips'>Web Trend Map（ウェブトレンドマップ）</h4><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="522" height="300" id="umapper_embed">  <param name="FlashVars" value="kmlPath=http://umapper.s3.amazonaws.com/maps/kml/42717.kml"/>  <param name="allowScriptAccess" value="always"/>  <param name="allowFullScreen" value="true"/>  <param name="movie" value="http://umapper.s3.amazonaws.com/templates/swf/embed.swf"/>  <param name="quality" value="high"/>  <embed src="http://umapper.s3.amazonaws.com/templates/swf/embed.swf" FlashVars="kmlPath=http://umapper.s3.amazonaws.com/maps/kml/42717.kml" allowScriptAccess="always" allowFullScreen="true" quality="high" width="522" height="300" name="umapper_embed" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/></object><p>↑サンプルなので、一箇所にしかマーカーが付いていませんが、それぞれのサービスにマーカーを付けることも可能です。</p><h4 class='tips'>ハッブル望遠鏡 から見た宇宙</h4><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="522" height="300" id="umapper_embed">  <param name="FlashVars" value="kmlPath=http://umapper.s3.amazonaws.com/maps/kml/42716.kml"/>  <param name="allowScriptAccess" value="always"/>  <param name="allowFullScreen" value="true"/>  <param name="movie" value="http://umapper.s3.amazonaws.com/templates/swf/embed.swf"/>  <param name="quality" value="high"/>  <embed src="http://umapper.s3.amazonaws.com/templates/swf/embed.swf" FlashVars="kmlPath=http://umapper.s3.amazonaws.com/maps/kml/42716.kml" allowScriptAccess="always" allowFullScreen="true" quality="high" width="522" height="300" name="umapper_embed" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/></object><p>↑こういったものも、アイデア次第で素晴らしいものが出来上がりそうですよね。</p><h4 class='tips'>自作してみました</h4><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="522" height="319" id="umapper_embed"><param name="FlashVars" value="kmlPath=http://umapper.s3.amazonaws.com/maps/kml/43087.kml" /><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="true" /><param name="movie" value="http://umapper.s3.amazonaws.com/templates/swf/embed.swf" /><param name="quality" value="high" /><embed src="http://umapper.s3.amazonaws.com/templates/swf/embed.swf" FlashVars="kmlPath=http://umapper.s3.amazonaws.com/maps/kml/43087.kml" allowScriptAccess="always" allowFullScreen="true" quality="high" width="522" height="319" name="umapper_embed" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object><p>↑サクッと作ったものですが、いろいろ出来てしまう印象です。 <a href="http://umapper.s3.amazonaws.com/maps/kml/43087.kml">KMLファイル</a>も取得可能なので、グーグルアースで表示させることも。</p><h4 class='tips'>画像からFlashマップを作る手順</h4><p class="picture2"><img src="http://web-marketing.zako.org/images/2009/10/UMapper-Interactive-Map1.jpg" alt="UMapper-Interactive-Map1" title="UMapper-Interactive-Map1" width="522" height="417" class="alignnone size-full wp-image-9601" /> ↑<a class='web-site-link' href='http://www.umapper.com/' onclick="window.open('http://www.umapper.com/'); return false;">UMapper</a>のページでログイン、または無料登録し、マップ作成画面でタイトルなどを入力して画像をアップロード。その後に「Submit」ボタンを押します。</p><p class="picture2"><img src="http://web-marketing.zako.org/images/2009/10/UMapper-Interactive-Map2.jpg" alt="画像をインタラクティブにする編集画面" title="画像をインタラクティブにする編集画面" width="522" height="365" class="alignnone size-full wp-image-9602" /> ↑するとマップ編集画面が開くので、吹き出しやポリゴン、ラインなどを追加します。コメントにはHTMLタグや画像、サイトへのリンクを入れることも可能になっています。</p><h4 class='tips'>デモ動画</h4><object data="http://www.youtube.com/v/-_XblEniTq0&amp;hl&amp;ap=%2526fmt%3D18&amp;rel=0" type="application/x-shockwave-flash" width="522" height="326"><param name="movie" value="http://www.youtube.com/v/-_XblEniTq0&amp;hl&amp;ap=%2526fmt%3D18&amp;rel=0" /><param name="wmode" value="transparent" /></object><p>興味のある方は<a class='web-site-link' href='http://www.umapper.com/' onclick="window.open('http://www.umapper.com/'); return false;">UMapper</a>へどうぞ。</p><p>これは本当にすごいかもしれませんね。今までGoogle Maps API を使わないとできなかったものがこんなにカンタンに出来てしまうのですから。</p><p>Via:<a class='web-site-link' href='http://www.umapper.com/blog/?p=1596' onclick="window.open('http://www.umapper.com/blog/?p=1596'); return false;">UMapper Blog</a></p>