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を作成してみる（画面作り編）