はね丸のWEB工房

Google Maps API V3でパノラミオの超美麗写真を表示する方法と題して、情報共有をします

はね丸のWEB工房WEB API>投稿記事を個別表示

このエントリーをはてなブックマークに追加

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" src="http://maps.google.com/maps/api/js?sensor=false"></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);
 }
</script>


パノラミオの写真を地図上に表示する場合は、下記の赤字部分を追加するだけ。


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=panoramio"></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を使用する際は、この機能を選択肢の1つとしてお考えいただければ、と思います。


スポンサーリンク
hanemaru_comをフォローしましょう このエントリーをはてなブックマークに追加
カテゴリー WEB API
キーワード WEB API,Google Maps API,写真,パノラミオ,panoramio








※コメントは管理人の承認後、表示されます。

コメントを受け付けました。
コメントは管理人の承認後、表示されます。

表示順:新規順 | 投稿順 | 人気順 | 注目順


デル株式会社