2010年12月11日土曜日

Google Map API ver.3とATND API の連携

Google Map ver3.からAPIキーが不要になったので使ってみたメモ。

せっかくなのでATND検索APIを叩いて、その検索結果イベントをGoogle Mapに表示するところまで。
(ATND検索APIからはJSONで取得してます)




①事前に呼び出し元のHTMLページ内に

を組み込んでおく。


②下記のように処理を書いて…

/*
* HTMLページで適当なイベント(onclick等)から呼び出す
*/
function callGMAP(){
  str = location.search;
  str = encodeURI(str);
  str = str.substring(1,str.length);
  str = decodeURI(str);
  getATNDSearchResult(str);
}

/*
 * ATNDイベント検索
 */
function getATNDSearchResult(str){
  // JSONPでrequest投げる
  str ="忘年会";
  url = "http://api.atnd.org/events/?keyword="+str+"&format=jsonp&callback=cbfuncATNDSearch";
  var script = document.createElement("script");
  script.src = url;
  $("body").append(script);
}

/*
 * CallBack of getATNDSearchResult()
 * JSONP返り値処理
 */
function cbfuncATNDSearch(json){

 marker = new Array();
 // 開いているマップ情報ウィンドウ
 var curr_infw;
 contentString = new Array();
 infowindow = new Array();

 // マップ初期化
 var centerPos = new google.maps.LatLng(35.658613, 139.745525);
 var mapOptions = {
   zoom : 10,
   center : centerPos,
   mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

 for(var i = 0; i < json.events.length; i++) {

  // マップ上のマークの設置
  var markerPos = new google.maps.LatLng(json.events[i].lat, json.events[i].lon);
  var markerOptions = {
    position : markerPos,
    map : map,
    title : json.events[i].title
  };
  marker[i] = new google.maps.Marker(markerOptions);

  // ウィンドウのHTML
  contentString[i] = "イベント" + json.events[i].title + "概要"+ json.events[i].catch +"日時/場所"+json.events[i].started_at+"~"+json.events[i].ended_at+" @ "+json.events[i].address+"";

// マップ情報ウィンドウ生成
infowindow[i] = new google.maps.InfoWindow({
content: contentString[i]
});

// 開いているマップ情報ウィンドウを閉じて、クリックされたマーカの情報ウィンドウを開く
google.maps.event.addListener(marker[i], 'click', function(e){
if(curr_infw) { curr_infw.close();}
var gm_num = $(this).attr("__gm_id")-1;
infowindow[gm_num].open(map,marker[gm_num]);
curr_infw = infowindow[gm_num];
});
}
}

③呼び出し元ページにmap_canvasタグを書いて、そこに地図を描写。

Blogger Syntax Highliter