2012年6月28日木曜日

Google Maps JavaScript API V3のPanoramio レイヤについて


Google Maps API V3のPanoramio レイヤについて


今日はPanoramio レイヤについてやってみた!
Panoramioってなんぞ?って人はWiki参照

GoogleMapsを表示したきに写真レイヤにあたるものがPanoramio レイヤってことになるみたい。
PanoramioからGoogleMapsに写真が載るんだろと調べてみたらPanoramioのHPで日本語で説明されてました。

写真は自分オリジナルのもので人物が写ってないのが重要ぽいな。
具体的な項目はPanoramio 写真の承認ポリシー参照。

ここで問題発生

ブログのテンプレート編集でlibraries ブートストラップ パラメータ(下の太字の部分)が追加できない!!!追加すると編集画面が落ちる。。。。
http://maps.google.com/maps/api/js?sensor=false&libraries=panoramio

とりあえず、マップ設定してみたものの写真レイヤは表示されないよな。。。
ソースは以下の通り。
----

var map;
//座標一覧
var fukui = new google.maps.LatLng(36.0651779, 136.2215269);
//Panoramioレイヤ
var panoramioLayer;

function initialize13() {
  var myOptions = {
    zoom: 15,
    center: fukui,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map_canvas13"),myOptions);
   panoramioLayer = new google.maps.panoramio.PanoramioLayer({
    suppressInfoWindows: true
  });
  panoramioLayer.setMap(map);
//福井タグでフィルタかけてる。
  panoramioLayer.setTag("fukui");
  var photoDiv =  document.createElement('div');

  var photoWidgetOptions = {
    width: 256,
    height: 144
  };

  var photoWidget = new panoramio.PhotoWidget(photoDiv, null,photoWidgetOptions);

  var infoWindow = new google.maps.InfoWindow();

  google.maps.event.addListener(panoramioLayer, 'click', function(e) {
    var photoRequestOptions = {
      ids: [{
        'photoId': e.featureDetails.photoId,
         'userId': e.featureDetails.userId
      }]
    };
    photoWidget.setRequest(photoRequestOptions);
    photoWidget.setPosition(0);
    infoWindow.setPosition(e.latLng);
    infoWindow.open(map);
    infoWindow.setContent(photoDiv);
  });
}
google.maps.event.addDomListener(window, 'load', initialize13);

----

0 件のコメント:

コメントを投稿