まさはる's Weblog
2015年1月 5日
Google Maps JavaScript API v3を使って温泉マップを作成（その4）
Category : Web 2 / Posted at 2015年1月 5日 21:52温泉マップを公開してから、「スマホでは字が小さすぎて読めない。」、「チェックボックスをチェックすると隣がチェックされる」、「拡大して表示すると他が見えなくなって使いづらい。」という多くの意見が寄せられた...訳ではありませんが、うちのサイトはスマホに対応しておらず見にくいので、温泉マップを今流行りのレスポンシブWebデザインに変更してみました。
レスポンシブWebデザインに変更する場合、まずhtmlの<head>の中にviewportの設定を入れるのが近道です。
<meta name="viewport" content="initial-scale=1.0" />
これを入れると、スマホでもパソコンと同様に等倍で表示されるため文字は読みやすくなりますが、大きい絵や表組みのデザインが崩れます。そこで、cssの@mediaを使って絵の大きさを変えたりして何とかしてみました。ちなみに、温泉マップの場合は、デバイスのスクリーン表示幅が1024px以上だとそのまま、1024px未満だとスマホ用の画面になるようにしています。
変更してみて気がついたのですが、iPhone 4以降やバッタ物ではないAndroid端末はディスプレイの解像度が昔のディスプレイの倍ぐらいあり、パソコン用に作ったGoogle Mapsのアイコンでは解像度が低いためぼやけて見劣りします。そこで、アイコンのファイルを縦横2倍のピクセル数にして縮小して表示するようにしました。
// マーカーオブジェクトの作成
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: {
url: icon_file,
scaledSize: new google.maps.Size(32,41) // ここで半分の大きさに縮小表示
},
title: title_text
});上記の場合は64x82ピクセルの大きさのアイコンファイルを準備し、iconのscaledSizeプロパティに半分の大きさを指定することで、スマホの等倍表示でも綺麗に表示されるようにしています。
