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タグを書いて、そこに地図を描写。