Google Maps API V3でパノラミオの超美麗写真を表示する方法
Googleの写真サービスと言いますと「Picasa」を思い浮かべますが、実は「Panoramio」というサービスも持っています。
たしかどこかを買収して取得したサービスですね。
Picasaはflickrのようなアルバムサービスで、Panoramioは写真を地図上に配置するためのサービスです。
よって基本的に、座標データを持っているわけです。
Google Maps API V2にはこのパノラミオと連携し、地図上へ写真を表示するオプションがありましたが、Google Maps API V3のドキュメント上では見当たりません。
しかし実際は、地図上へパノラミオの写真を表示する方法が用意されていましたので、今回はそれを紹介します。
Google Maps APIは地図を表示するAPIとしてスタンダードであり、広く利用されています。
他のAPIとマッシュアップすることで、便利なサービスも多数存在します。
便利かどうかは別にして、私も「携ログ」というサービスを作っています。
今回の方法を使うことで、サービスとして華を添えることもできますし、周辺の風景を知らせることもできますので、利便性向上の役にも立つと思います。
ローカルで実行し、見ているだけでも十分楽しめますよ。(笑)
Google Maps APIの地図上に写真を表示
まず、通常のGoogle Mapsの表示方法はこうですよね。
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(35.68923,139.752274),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
</script>
パノラミオの写真を地図上に表示する場合は、下記の赤字部分を追加するだけ。
<script type="text/javascript">
function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(35.68923,139.752274),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var panoramio = new google.maps.panoramio.PanoramioLayer();
panoramio.setMap(map);
}
</script>
実際の表示サンプルはこちらです。
Google Maps API V3でパノラミオの超美麗写真を表示するサンプル
実に簡単なコード追加で、ここまでのエフェクトが付けられます。
マップ上の写真をクリックすれば、ちゃんと情報ウィンドウ(バルーン)が表示され、写真を拡大して見ることも可能です。
今後Google Maps APIを使用する際は、この機能を選択肢の１つとしてお考えいただければ、と思います。
Tweet
|
||
| カテゴリー | ： | WEB API |
| キーワード | ： | WEB API,Google Maps API,写真,パノラミオ,panoramio |
コメントを記入する
コメントを受け付けました。
コメントは管理人の承認後、表示されます。
PHP自体は4年ほど触ってますが、触れる時間が少ない事もあってそこそこの技術力しかないです。
深夜12時に帰宅してから作業…ということも多いため、生産能力も著しく低いです。
こんな私ですが、今後もよろしくお願いします。
育児や仕事、日々思うことなどプライベートなブログはこちら。
イクメンはね丸の思うこと
@hanemaru_comをフォロー
