現在位置: トップ > YOLP公式ブログ > ニュース > Yahoo! JavaScriptマップAPIで、スマートフォン用地図を表示できる機能を追加しました

ここから本文です

Yahoo! JavaScriptマップAPIで、スマートフォン用地図を表示できる機能を追加しました

[ニュース]  2012年8月30日
こんにちは、Yahoo! Open Local Platform (YOLP) の櫻井です。

本日より、Yahoo! Open Local Platform (YOLP)のYahoo! JavaScriptマップAPIで、地図の種類にスマートフォン用地図を追加しました。また、各スマートフォンの画面解像度にあわせて、最適な地図が表示される機能も追加しています。

以前YOLPでは、Yahoo! iOSマップSDKYahoo! AndroidマップSDKでスマートフォン用の地図を利用できるようにリリースしましたが、今回はYahoo! JavaScriptマップAPIでも同等の機能を追加をしました。


スマートフォン用の地図を見る

スマートフォン用の地図をあらためてご紹介します。

スマートフォン用の地図

スマートフォン用地図は、PCの大きな画面で見る情報量の多い地図とは異なり、小さい画面のスマートフォンでの利用を前提に新たに追加した地図デザインです。 外出時に現地で利用される頻度が高いと想定し、その場で素早く周辺の情報を認識できることを目指し、「シンプルで軽くて親しみやすい」をテーマにデザインにしております。

スマートフォン用地図の主な特徴

  • ビル名やマンション名よりも、交差点や建物の1階部分にあるコンビニエンスストアやファストフード店、銀行などを優先して表示

  • 認識しにくい長い文字やわかりにくい地形図記号を、直感的に理解しやすいピクトグラムアイコン(絵文字アイコン)に置き換え

  • ぱっと見ただけで認識できるユニバーサルフォントを使用し、レイアウトも横書き主体で見やすく

  • 道路や建物がはっきり見えるように余分なデザインを排除、地図データも軽量化しより軽快な操作を実現


Yahoo! JavaScriptマップAPIの操作オプションの設定によって、スマートフォンだけでなく、PCでもスマートフォン地図を表示できます。ここで実装したサンプルをご紹介します。

Yahoo! JavaScriptマップAPI スマートフォン用地図 サンプル

サンプルコード
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>スマートフォン用の地図を表示する</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable= no">
<script type="text/javascript" charset="UTF-8" src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=【あなたのアプリケーションID】"></script>
<script type="text/javascript">
window.onload = function() {
    // スマートフォン地図を明示的に指定して初期表示
    var map = new Y.Map("map",{
        configure : {
            scrollWheelZoom : true,
            mapType : Y.Map.TYPE.SMARTPHONE
        }
    });
    map.drawMap(new Y.LatLng(35.6805,139.7696079), 16, Y.LayerSetId.NORMAL);
    map.addControl(new Y.ZoomControl(), new Y.ControlPosition(Y.ControlPosition.TOP_RIGHT));
    map.addControl(new Y.LayerSetControl(), new Y.ControlPosition(Y.ControlPosition.BOTTOM_RIGHT));

    // 地図のタイプを切り替える
    document.getElementById("btn01").onclick = function() {
        map.setConfigure('mapType', Y.Map.TYPE.STANDARD);
    };
    document.getElementById("btn02").onclick = function() {
        map.setConfigure('mapType', Y.Map.TYPE.SMARTPHONE);
    };
}
</script>
</head>
<body>
<div id="map" style="width: 800px; height: 600px;"></div>
<input id="btn01" type="button" value="PC用地図" />
<input id="btn02" type="button" value="スマホ用地図" />
</body>
</html>


またスマートフォンで地図を表示する場合は、初期設定ではスマートフォン用地図が表示されるようになっていますが、操作オプションの設定でPC用の地図を表示させることも可能です。
詳細な設定方法は、Yahoo! JavaScriptマップAPI - 操作オプションの設定をご覧ください。

スマートフォンでの地図表示と解像度

スマートフォンは各端末によって解像度の違いがあり、極端に地図の文字が小さくなってしまう場合がありました。今回の機能追加により、ディスプレイの解像度に合わせて、自動的に最適な拡大率で地図を表示することができるようになっています。
高解像度端末(例:iPhone 4S)と従来解像度端末(例:iPhone 3GS)での画像を拡大してみると、どちらも同じ範囲で地図が表示されていますが、解像度の違いが良くわかります。

左:高解像度端末(例:iPhone 4S) 右:従来解像度端末(例:iPhone 3GS)

解像度

今後について

ここ数年、スマートフォンの普及が進んでいます。YOLPではスマートフォンでの地図の活用をどんどん進めていきたいと考えております。スマートフォンでの利用は、他にもYahoo! iOSマップSDKや、Yahoo! AndroidマップSDKなどをご用意しておりますので、こちらもぜひご活用ください。
今後もスマートフォンを便利に活用いただけるようにしていきますので、Yahoo! Open Local Platformをよろしくお願いいたします。

Yahoo! Open Local Platform(YOLP): http://olp.yahoo.co.jp/
YOLP@Facebook(外部リンク): http://www.facebook.com/yahoojpYOLP
YOLP@Twitter(外部リンク): http://twitter.com/yahoojpYOLP
YOLP@GitHub(外部リンク): https://github.com/yahoojpYOLP/
Yahoo!地図アプリ iPhone版/Android版(無料)
Yahoo!地図ブログ
本文はここまでです このページの先頭へ