地図蔵 ▷ 2012年までの記事「Google Maps をスマートフォン向けに使う覚書」

Google Maps をスマートフォン向けに使う覚書

(2012年3月 3日)

Android(Docomo / Arrows F-07D)でグーグル・マップ API の表示を試行錯誤。
まず、約1500のマーカーをプロットしてみた(下左)。
・・・フザケンナ、という感じ。Marker に埋め尽くされ地図が見えない。
そこで、アイコンを10pxの小型にしてみた(下右、ズームしたところ)。
・・・ピンチ・インで拡大した時アイコンがジャギーになって見苦しく、infoWindow まで巨大化。コントロール類はデフォルトのほうがいい。

normal user-scale-no

しかもオッサンのゴツい指先で10ピクセルのアイコンをタップするのは、至難の業だ。
表示領域の狭いスマホでは、欲張り過ぎてはいけない。謙虚になろう。

プロットするポイントを290に減らし、アイコンのサイズを20pxにした場合(次の画像)。

ok

このへんが現状ではベストかと? meta タグは;

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

スタイルシート;

<style type="text/css">
 html {height: auto;}
 body {height: auto; margin: 0; padding: 0;}
 #map_canvas {height: auto; position: absolute; bottom:0; left:0; right:0; top:28px;}
</style>

ただ、iPhone ではどうなるか分からない。