ホーム > タグ > javascript

javascript

Google ストリートビューで鬼ごっこ

北海道までライジングサンを見に遊びにいってきました。ただいま！

今回は、現在までのストリートビューのプログラムを組み合わせて、
地図上を複数のキャラクターが動き回るサンプルを作ってみました。

一応IEでも確認しましたが、FireFox３環境を激しく推奨。
（IE謎のエラーがたまにでる・・・）

基本は、以前のサンプルの自動で動き回るキャラクターを複数にしただけです。
当たり判定とかも加えてゲームらしくしようかと思ったんですが、そこは挫折しましたｗ

↓以下ソース全部

前作ったやつを、もうちょっと作りこみ。
曲がるときもっとスムーズに曲がってくれるようにして、歩くスピードをアップ。

ちょっとコレで、ゲームなぞ作ってみようかなーとか。

FlashPlayer9必須みたいです。
環境によってはすごい重いかもしれません。

↓実行サンプルとソース

Googleストリートビュー、日本地域も対応して、にぎやかな事になってますね。
自分の住んでるところとか、なつかしのあの場所とか見ると本当におもしろい！

周囲を360度パノラマで見ることができることにもびっくりです。

というわけで、さっそくGoogleMapsと、このストリートビューを使って、
下北界隈を勝手に散歩するようなものを作ってみた。

↓以下続き

ここで書いた記事の転載と、補足

Google Maps API には、InfoWindowという、
地図上にウィンドウを表示するための機能が備わっています。

このウィンドウは地図上に情報を表示する分には、
十分な機能を持っています。

しかしmillon.jpで使用するにあたって、サイトのイメージと
表示されるウィンドウのイメージが若干合わなかったため、
自分でデザインしたウィンドウを表示しました。

google maps のinfowindow
自分でつくったウィンドウ
自分で作ったウィンドウを表示

GoogleMaps は画像やHTML要素を、オーバーレイ要素として
地図上に貼り付けることができます。

その機能を用いて、DIV要素を独自のウィンドウとしてGoogleMaps上に貼り付けます。

してみた。
有名なソーシャルブックマークへのリンクをつけるやつです。

JavaScriptで、オーバーレイ表示。

addthisで配布しているプラグインとコードだとちょっと不十分だったので、
wordpressテンプレートに以下のように書いて表示確認。

JAVASCRIPT:

<script type="text/javascript">
addthis_pub = 'masahyro'; // 登録したユーザ名
</script>
<a href="http://www.addthis.com/bookmark.php" onMouseOver="return addthis_open(this, '', '<?php the_permalink();?>', '<?php the_title();?>')" onMouseOut="addthis_close()" onClick="return addthis_sendto()">
<img src="http://xx.addthis.com/button1-bm.gif" width="125" height="16" border="0" alt="" />
</a><script type="text/javascript" src="http://xx.addthis.com/js/xxx/addthis_widget.js">
</script>