日本でもGoogleマップでストリートビューのサービスが開始された。既にいろいろなところで話題になっているが、実際に使ってみると確かに凄い。自宅の前の道は車がぎりぎり通れるかどうかと云う細い道なのだが、それでもちゃんと自宅が写っていた。とっても面白かったので、Google Maps APIでストリートビューをいじってみたくなり、何かできないか考えてみた。
そこで、Google Maps API Demo Gallery - Lazy Street Viewを参考に、と云うかほとんどそのままのコードをGoogle App Engineで利用してみた。スクリプトをそのままHTMLとして書き出しているだけなので、Google App Engineである必要はなく、利用したというのもおこがましいのだが、Google Maps APIを一度も使ったことがなく、とりあえずどんなものか試したかっただけなのでご容赦を。でも、Google App EngineとGoogle Maps APIを組み合わせて面白そうなことができそうだなぁ。実際の町を舞台とした3Dロールプレイングゲームとか?(笑)
デモではJR秋葉原駅とヨドバシカメラを結ぶ横断歩道を中心にカメラがぐるりと回っている。あのいつも混んでいる横断歩道だ。因みに位置を変更するには、変更したい場所をGoogleマップで検索しストリートビューを表示させ、そのリンク内の位置情報(赤字で示す)をオリジナルのスクリプトの位置情報と置き換えればよい。
http://maps.google.com/maps?f=q&hl=ja&geocode=&q=%E6%97%A5%E6%9C%AC+%E7%A7%8B%E8%91%89%E5%8E%9F&ie=UTF8&ll=35.700549,139.774622&spn=0.003929,0.006866&z=17&layer=c&cbll=35.698584,139.774216&panoid=HNw-5xoiN5NJCVEWfeSdlA&cbp=1,65.31797388218855,,0,2.5976720953303447
最後に今回使ったソースコードを示す。HTMLを書き出しているだけなので参考にならないかもしれないけど。
# Google Map Street View API Demo class GoogleMapStreetViewDemo(webapp.RequestHandler): def get(self): self.response.out.write(u""" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Maps Street View API Demo</title> <script src="http://maps.google.com/maps?file=api&v=2&key=Google Maps APIのKeyを指定" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ var panorama; var currentYaw = 180; var currentPitch = 0; var timer; var currentZoom = 0; var zoomingIn = true; function load() { panorama = new GStreetviewPanorama(document.getElementById("pano")); panorama.setLocationAndPOV(new GLatLng(35.698584, 139.774216), {yaw: currentYaw, pitch: currentPitch, zoom: currentZoom}); timer = window.setInterval(spiral, 200); } function spiral() { currentYaw += 2; panorama.panTo({yaw:currentYaw, pitch:currentPitch}); } function stopAndZoom() { clearInterval(timer); zoomingIn = true; timer = window.setInterval(zoom, 500); } function zoom() { if (zoomingIn) { currentZoom++; } else { currentZoom--; } panorama.panTo({yaw:currentYaw, pitch:currentPitch, zoom:currentZoom}); if (currentZoom == 2) { zoomingIn = false; } if (currentZoom == 0) { clearInterval(timer); timer = window.setInterval(spiral, 200); } } //]]> </script> <body onload="load()" onunload="GUnload()"> <div id="pano" style='width:500px; height:400px'></div> <br/> <input type="button" onclick="stopAndZoom()" value="クリックするとズームインします"/> <div><p style="font-size:x-small;color:gray;">このWebアプリは、<a href="http://code.google.com/apis/maps/documentation/demogallery.html">Google Maps API Demo Gallery</a>の<a href="http://gmaps-samples.googlecode.com/svn/trunk/streetview/streetview_lazy.html">Lazy Street View</a>を参考にしています。</p></div> </body> </html>""")
そこで、Google Maps API Demo Gallery - Lazy Street Viewを参考に、と云うかほとんどそのままのコードをGoogle App Engineで利用してみた。スクリプトをそのままHTMLとして書き出しているだけなので、Google App Engineである必要はなく、利用したというのもおこがましいのだが、Google Maps APIを一度も使ったことがなく、とりあえずどんなものか試したかっただけなのでご容赦を。でも、Google App EngineとGoogle Maps APIを組み合わせて面白そうなことができそうだなぁ。実際の町を舞台とした3Dロールプレイングゲームとか?(笑)
デモではJR秋葉原駅とヨドバシカメラを結ぶ横断歩道を中心にカメラがぐるりと回っている。あのいつも混んでいる横断歩道だ。因みに位置を変更するには、変更したい場所をGoogleマップで検索しストリートビューを表示させ、そのリンク内の位置情報(赤字で示す)をオリジナルのスクリプトの位置情報と置き換えればよい。
http://maps.google.com/maps?f=q&hl=ja&geocode=&q=%E6%97%A5%E6%9C%AC+%E7%A7%8B%E8%91%89%E5%8E%9F&ie=UTF8&ll=35.700549,139.774622&spn=0.003929,0.006866&z=17&layer=c&cbll=35.698584,139.774216&panoid=HNw-5xoiN5NJCVEWfeSdlA&cbp=1,65.31797388218855,,0,2.5976720953303447
最後に今回使ったソースコードを示す。HTMLを書き出しているだけなので参考にならないかもしれないけど。
# Google Map Street View API Demo class GoogleMapStreetViewDemo(webapp.RequestHandler): def get(self): self.response.out.write(u""" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Maps Street View API Demo</title> <script src="http://maps.google.com/maps?file=api&v=2&key=Google Maps APIのKeyを指定" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ var panorama; var currentYaw = 180; var currentPitch = 0; var timer; var currentZoom = 0; var zoomingIn = true; function load() { panorama = new GStreetviewPanorama(document.getElementById("pano")); panorama.setLocationAndPOV(new GLatLng(35.698584, 139.774216), {yaw: currentYaw, pitch: currentPitch, zoom: currentZoom}); timer = window.setInterval(spiral, 200); } function spiral() { currentYaw += 2; panorama.panTo({yaw:currentYaw, pitch:currentPitch}); } function stopAndZoom() { clearInterval(timer); zoomingIn = true; timer = window.setInterval(zoom, 500); } function zoom() { if (zoomingIn) { currentZoom++; } else { currentZoom--; } panorama.panTo({yaw:currentYaw, pitch:currentPitch, zoom:currentZoom}); if (currentZoom == 2) { zoomingIn = false; } if (currentZoom == 0) { clearInterval(timer); timer = window.setInterval(spiral, 200); } } //]]> </script> <body onload="load()" onunload="GUnload()"> <div id="pano" style='width:500px; height:400px'></div> <br/> <input type="button" onclick="stopAndZoom()" value="クリックするとズームインします"/> <div><p style="font-size:x-small;color:gray;">このWebアプリは、<a href="http://code.google.com/apis/maps/documentation/demogallery.html">Google Maps API Demo Gallery</a>の<a href="http://gmaps-samples.googlecode.com/svn/trunk/streetview/streetview_lazy.html">Lazy Street View</a>を参考にしています。</p></div> </body> </html>""")
コメント