株式会社ライブキャストロゴ 株式会社ライブキャスト

flashcast:フリーで働くITエンジニア集団のブログ: iPhone OS 3.0のSafariでGPS機能を使ったWeb Applicationを作る!(google編)の続きです。

画面のデザインを検討します。

とのさまのflashcast:フリーで働くITエンジニア集団のブログ: ipod touch用のWeb Applicationを作成してみる(画面作り編)と同様、こちらを参考にしました。
画面表示関係 – iPhone 3G DevWiki

iPhone特有の書式は基本的にはtonomemoと同じです。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=320px, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name=”viewport” content=”width=320px, user-scalable=no” />

iPhoneの操作で地図を拡大・縮小したいので、横幅は320px固定、コンテンツ自体の拡大・縮小は不可にします。

<meta name=”apple-mobile-web-app-capable” content=”yes” />

フルスクリーンモードにします。

地図の表示は、iPhoneの表示領域をフルに使います。

<body onload="initialize()">
<div id="map_canvas"></div>
</body>
body {
margin:0px;
padding:0px;
}

#map_canvas {
width:100%;
height:100%;
}

load時にinitialize関数をコールし、地図を表示しています。

<body onload=”initialize()”>

緯度・経度のデフォルト値は「東京タワー」にしています。「東京タワー」が地図の中心点になります。

var lat = 35.658587;
var lng = 139.745425;

また、DOCTYPEはGoogle Maps推奨のXHTMLにしています。

地図を含むページでは、標準準拠の XHTML を使用することをお勧めします。ブラウザにより、ページ上部にある XHTML DOCTYPE が検出されると、「標準準拠モード」でページのレンダリングが行われます。これにより、レイアウトや動作をブラウザにかかわらず、より正確に予測できるようになります。この宣言がないページは「下位互換モード」でレンダリングされ、ブラウザごとにレイアウトが異なる原因となる場合があります。

Google Maps API の概念 – Google Maps API – Google Codeより引用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

ただ、DOCTYPEを指定するとなぜだか地図が表示されなくなってしまいます。

いろいろ試したところ、cssに以下の定義を追加すれば表示されることがわかりました。

html, body {
width:100%;
height:100%;
}

ナゾです。

あと、とのさまのflashcast:フリーで働くITエンジニア集団のブログ: ipod touch用のWeb Applicationを作成してみる(画面作り編)にあるように、

window.scrollTo(0,1);

と書くとアドレスバーを隠せますが、heightを100%にしていると効かないようです。サイズ指定した場合、iPhoneを横向きに変えたりするとサイズが合わなくなり、Google Mapsのフッターが出なくなったりするので今回はアドレスバーを隠すのはやめました。

var map;
var geocoder;

var lat = 35.658587;
var lng = 139.745425;

function initialize() {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(lat, lng), 15);
//map.setUIToDefault();
GEvent.addListener(map, "click", getAddress);
geocoder = new GClientGeocoder();
}

function getAddress(overlay, latlng) {
if (latlng != null) {
geocoder.getLocations(latlng, showAddress);
}
}

function showAddress(response) {
map.clearOverlays();

if (response != null && response.Status.code == 200) {
place = response.Placemark[0];
point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml('<b>Address:<¥/b>' + place.address);
}
else {
alert("Not found.");
}
}

表示は極力、地図だけにしたいのでGoogle Mapsのデフォルトコントロールは非表示にしています。

//map.setUIToDefault();

ここまでで、こんなのが出来ました。

地図上のタップした位置の住所を表示します。もし良かったら、試してみてください!
iPhone GPS Sample

■参考サイト
Google Maps JavaScript API Example: Reverse Geocoder
画面表示関係 – iPhone 3G DevWiki
flashcast:フリーで働くITエンジニア集団のブログ: ipod touch用のWeb Applicationを作成してみる(画面作り編)