iOS6でGoogleストリートビューを見るWebアプリ（その２）

iOS6でGoogleストリートビューを見るWebアプリを作りました - W&R : Jazzと読書の日々
純正品が出るまでの一時凌ぎ。Googleマップの代わりを探してたら、Google自身が地図用アプリの書き方をまとめてくれてました。そうか、自分で組めばいいのか。パーツを寄せ集め、自分好み...
その後、修行を積みました。住所をポップアップしたり、緯度経度をリアルタイムに出したり、口から火を吹いたり。けれど、それは必要なことなんだろうか。初めは多機能化に進みかけたけれど、複雑なことなら専用アプリを使えば良い。このWebアプリの利点は「フルスクリーンでストリートビュー」。なので、機能を絞るほうに考え直してみました。



下記スクリプトをSafariのURL欄に貼り付けて「ホーム画面に追加」。

data:text/html;charset=UTF-8,<head><meta name=viewport content="initial-scale=1.0, user-scalable=no"><meta name=apple-mobile-web-app-capable content=yes><link rel=apple-touch-icon-precomposed href="http://googlediscovery.com/wp-content/uploads/pegman.png"><title>StreetView</title><script src="https://maps-api-ssl.google.com/maps/api/js?v=3&sensor=true"type="text/javascript"></script><script>var geocoder;var map;function initialize(){geocoder = new google.maps.Geocoder();myOptions = {zoom:17,mapTypeId:google.maps.MapTypeId.ROADMAP,overviewMapControl: true,mapTypeControlOptions: {style:google.maps.MapTypeControlStyle.DROPDOWN_MENU},zoomControl:true,zoomControlOptions: {style: google.maps.ZoomControlStyle.LARGE,position: google.maps.ControlPosition.LEFT_BOTTOM}};map = new google.maps.Map(document.getElementById("canvas"), myOptions);navigator.geolocation.getCurrentPosition(function(position){initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);MapSet(initialLocation)})}function MapSet(x){map.setCenter(x);var marker=new google.maps.Marker({map:map,position:x,draggable:true,animation:google.maps.Animation.DROP});google.maps.event.addListener(marker,"click",function(){geocoder.geocode({latLng:marker.getPosition()},function(results){new google.maps.InfoWindow({content:results[0].formatted_address}).open(map, marker);})});google.maps.event.addListener(marker,"dragend",function(){var svp = new google.maps.StreetViewPanorama(document.getElementById("canvas"), {position : marker.getPosition(),enableCloseButton:true});map.setStreetView(svp);})}function codeAddress(){address = document.getElementById("address").value;geocoder.geocode({address:address}, function(results,status){if(status == google.maps.GeocoderStatus.OK){MapSet(results[0].geometry.location)}else{alert("見つかりませんでした")}});}</script></head><body onload=initialize() style="margin:0;"><div style="position:absolute;bottom:0;right:0;z-index:99;"><input id="address" type="textbox" value="現在地"><input type="button" value="検索" onclick="codeAddress()"></div><div id="canvas" style="height:100%"></div></body>

登録用リンクはこちら→ http://tinyurl.com/9dplq7w



上の余白がなくなった。本当の「全画面」になります。検索窓を右下にしまい込む。Twitter上で見かけた写真からアイデアをいただきました。ありがとうございます。地図全体が引き締まり、いい感じになりました。



中央に落ちるマーカー。考えてみると、これがストリートビューになるのが自然。ペグマンさんも残留してますけど、それは青い道チェックくらいにし、真ん中のマーカーをドラッグしてみてください。スピード感が違います。
右上の「×」ボタンは、一回タップで白くなり、もう一回タップすると閉じるようです。Google側のデフォルトなので、ケアレスミス対策なのかな。



それと、右上のメニューもドロップダウンに変えました。航空写真に切り替えやすい。左下の「Google」のロゴからは、Safariのルート検索に切り替わります。
また、マーカー自体をタップすると、気分によって住所を表示します。
MyScriptsを使うとどんなサイトもフルスクリーンに出来ます


ナウシカがiPad使ってる？：小鳥ピヨピヨ
１巻か２巻。ガンシップの中でmapアプリを……１巻か２巻。ガンシップの中でmapアプリを……kotoripiyopiyo メ： “もはや電子書籍は安心して買えるものではなくなったと言っていい。最初から...
「どうしたんだろう。胸がどきどきする」。なんと、ナウシカさんもiPadでGoogleマップを使っていました。これは気づかなかった。
DraftPadにGoogleMapsを組み込んでみました