読者です 読者をやめる 読者になる 読者になる

FUJILOG

見た、聴いた、触れたこと。 動かしたもの、書いたもの。 ウェブとリアルの備忘録です。

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