Hatena::ブログ(Diary)

W&R : Jazzと読書の日々 このページをアンテナに追加 RSSフィード

2012/09/22

iOS6Googleストリートビューを見るWebアプリを作りました

純正品が出るまでの一時凌ぎ。


Google Maps JavaScript API V3 チュートリアル - Google Maps API — Google Developers
注: このページに記載されている Google Maps JavaScript API バージョン 3 は、正式な JavaScript API となりました。JavaScript API バージョン...

Googleマップの代わりを探してたら、Google自身が地図用アプリの書き方をまとめてくれてました。そうか、自分で組めばいいのか。


f:id:wineroses:20120922074853j:image

パーツを寄せ集め、自分好みの地図アプリが作れます。でもこれ、公開してアクセスが集中すると課金されるシステム。アップルもそれが理由で自前のマップ・アプリを作らざるを得なくなった。個人でそういうページをアップするのはリスクが高いので、data形式にしてみました。下記のスクリプトSafariURL欄に貼り付け、開いてみてください。現在地が表示されるようになってます。個人で使う分なら無料です。

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 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,zoomControl:true,zoomControlOptions: {style: google.maps.ZoomControlStyle.LARGE,position: google.maps.ControlPosition.LEFT_BOTTOM}};map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);navigator.geolocation.getCurrentPosition(function(position){initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);map.setCenter(initialLocation);marker = new google.maps.Marker({map: map,position: initialLocation,animation: google.maps.Animation.DROP});});}function codeAddress() {var address = document.getElementById("address").value;geocoder.geocode({ "address": address}, function(results, status){if(status == google.maps.GeocoderStatus.OK) {map.setCenter(results[0].geometry.location);marker = new google.maps.Marker({map: map,position: results[0].geometry.location,animation: google.maps.Animation.DROP});}else{alert("見つかりませんでした");}});}</script></head><body onload="initialize()"><div><input id="address" type="textbox" value="現在地"><input type="button" value="検索" onclick="codeAddress()"></div><div id="map_canvas" style="height:100%"></div></body>

このアドレスからも登録できます: http://tinyurl.com/9f6p446

(追記)パワーアップしました。こちらのほうが爽快。

iOS6でGoogleストリートビューを見るWebアプリ(その2)


f:id:wineroses:20120922074912j:image

ホーム画面に追加すると、フルスクリーン表示になります。左上ボックスに地名を入力し「検索」を押せば、きちんと地図が表示される。そして、左上隅にいるのが・・・。


f:id:wineroses:20120922074929j:image

ペグマンさん。このオレンジの人が、Googleの看板息子ペグマンさんです。この人を道路上にドラッグ&ドロップ。すると無事ストリートビューが見れました。キャンセルは右上隅の「×」で。これが小さすぎてタップしにくいけれど。

とりあえずストリートビューは復活。これがないと「家にいながら世界旅行」ができないものなあ。貧乏の心強い味方です。

iOS6でGoogleMapsをフルスクリーン表示にしてみました

DraftPadに地図検索機能を組み込んでみた


Geekなぺーじ:Google Maps JavaScript APIプログラミング
English Versionここでは、Google Maps JavaScript API(version 3)を使って遊ぶ方法を説明したいと思います。 Google Maps JavaScript...

さらにパワーアップしたいときは、こちらのページが参考になるかも。


(追記)

StreetViewerLite 1.1
カテゴリ:ナビゲーション,ユーティリティ
価格:無料 (mymapplus.com)

iPhone用アプリもあるんですけど、地図データはアップルのマップを利用。その代わり、移動してるときにペグマンさんも位置を変えるので、どこにいるのかわかりやすいです。

http://mymapplus.com/