コンテンツにスキップするには Enter キーを押してください

タグ: JavaScript

Google Maps APIのストリートビューで擬似AR

こないだ仕事で、Google Maps JavaScript API V3を利用してとあるサービスのサービス拠点を検索・表示するページを作成しました。
要はマップを動かすとその中心点から近いサービス拠点を検索してマップ上にマーカーを表示するというよくあるアレです。

さて。

Google Maps API V3でストリートビューを表示できるようにするためには、streetViewControlというパラメータがtrueである必要があります。

今まではデフォルトではfalseだったため、明示的にtrueにしなければストリートビューが表示されることはありませんでした。

ところが。
先月10月ごろから、デフォルトがtrueに変更されました。

冒頭のサービス拠点検索ページもその影響でストリートビューが表示されるようになってしまい、納品前で余計な不具合を出したくなかったのですぐにfalseに変更しました。
が、どうやら先方の社内でストリートビューが見られることの評判が良かったらしく、戻して欲しいと言われたので戻しました。

そんなにいいものなのかと思って、実際にストリートビューで表示させてみたんですが、これがなかなか面白くて、マップ上に配置したマーカーがセカイカメラのエアタグのように表示されるんです。
近くにあるマーカーは大きく、遠くにあるマーカーは小さく。ちゃんと遠近感があります。さすがに高さは無理みたいですが。
たしかにこれは表示できたほうが拠点の案内サービスとしては親切でしょうし、納得です。

んで。
適当にデモを作ってみました。
30個ほどランダムでマーカーを配置してあるので、左上のペグマン(黄色いの)を道にドラッグ&ドロップしてストリートビューを表示させてみてください。

コードは以下のとおりです。


コメントする

Python・JavaScript・PHPでのループ処理のやり方まとめ

最近、仕事でもプライベートでもよくPythonを使っているのですが、ループのやり方が今まで使ってきたJavaScriptやPHPと少し使い勝手が違っていて迷うことがよくあるので防備録としてまとめておきます。
比較対照として、JavaScriptとPHPで同じことをする方法もまとめてみました。
こうやって比較してみるとそれぞれ特徴があって面白かったですよ。


コメントする