[Ajax] Google AJAX API ローダーの利用方法

Google Ajax APIローダーの使い方についてのメモです。
Seachについては前に書いてるのでGoogleMapを例にしてます。

GoogleMapやGoogleSearchなどのGoogleが提供するAjaxAPIサービスを利用する際、大抵は各APIのスクリプトタグを逐一挿入していると思います。
たとえばMapなら下記のようなソースです。

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABCDEFG" type="text/javascript"></script>

利用するサービスが複数あるとその分スクリプトタグが増えていくことになりますが、
Google AJAX API ローダーを使用すると、複数または全てのAjaxAPIの読み込みが次の１行で完結します。

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABCDEFG"></script>

V3 APIについて追記

keyの部分にはGoogle APIキーが必要ですが、これはGoogleMapやGoogleSearchなどで取得したAPIキーなら何でもいい。
つまりMapで取得したAPIキーでSeachも利用できるということです。

上記タグでGoogle AJAX API スクリプトがロードされたら、google.load()で使うモジュールを指定します。
GoogleMap(ver2)なら”maps”と書きます。

<script type="text/javascript">
//<!&#91;CDATA&#91;
google.load("maps", "2");
//&#93;&#93;>
</script>

これでGoogleMapAPIがロードできるので、後は地図を表示するソースがあればおｋ。
前に晒したGoogleMapテンプレをこれに合わせて改変すると次のようになります。

google.load("maps", "2");

function initialize() {

	if (google.maps.BrowserIsCompatible()) {
		
		//地図を表示する要素のID
		var map = new google.maps.Map2(document.getElementById("map"));
		
		//地図の中央座標（GPointとは逆になる）
		var point =new google.maps.LatLng(35.6586317,139.7454109);
		
		//マーカー定義（カスタマイズ解説：https://tenderfeel.xsrv.jp/googlemap/33/）
		var marker = new google.maps.Marker(point);
		
		/* Map操作
		map.addControl(new google.maps.SmallMapControl());//小さいコントローラ
		map.addControl(new google.maps.LargeMapControl());//大きいコントローラ
		map.addControl(new google.maps.MapTypeControl());//地図タイプ切り替え（３種）
		map.addControl(new google.maps.HierarchicalMapTypeControl());//地図タイプ切り替え（2種）
		map.addControl(new google.maps.ScaleControl());//スケール
		map.addControl(new google.maps.OverviewMapControl());//右下の縮小地図
		map.enableScrollWheelZoom();//ホイールでのズーム操作
		map.enableDoubleClickZoom();//ダブルクリックでのズーム操作
		*/
		
		//中央設定（２番目の引数が拡大率）
		map.setCenter(point,18);
		
		//マーカー描画
		map.addOverlay(marker);
		
			//マーカークリックしたときのイベント
			google.maps.Event.addListener(marker, 'click', function() {
				//表示するコンテンツ（HTML有効）
				var html = "<strong>Hellow</strong><br />何かコメント入れてください。";
				marker.openInfoWindow(html);
			});
	}
}
 google.setOnLoadCallback(initialize);

google.setOnLoadCallback()はロードが完了したら実行するハンドラ関数を登録するものです。window.onload=function()みたいなもの。
google.load()を使ってAJAX API をロードすると、モジュール名(“maps”)がAPI の名前空間にもなります。
上記ソースでgoogle.mapsとなっているのがそれです。
GMap2を名前空間を利用して書くとgoogle.maps.Map2になります。

他のAjaxAPIも同じ方法で利用が可能です。

応用編

既に全ページから読み込んでる共通のjsファイルがあったとして、後からAjax APIサービスを追加する場合などはローダーの利用が非常に便利です。

common.js（共通のjsファイル）

//APIキー
var gAPIkey = 'ABQIAAAAwrzVu2iAWtCM12EpP4ZXHBSikIx5pdz0kLDBNOV1rj-kFiXjPBQrgtRsnJyZyBh03Inw2hOdPDFMxQ';
//設定
var gmConfig = {
	"gmLat":35.3450207,  //GLat
	"gmLng":137.1270461, //GLng
	"gmDivID":"gmap",    //地図を表示する要素のID
	"gmScope":18,        //拡大率
	"markerAdd":false,  //マーカーの表示
	"SMap_Controler":false, //小さいコントローラ
	"LMap_Controler":true, //大きいコントローラ
	"Type3_Controler":true, //地図タイプ切り替え（３種）
	"Type2_Controler":false, //地図タイプ切り替え（2種）
	"Scale_Controler":true, //スケール
	"OV_Controler":true, //右下の縮小地図
	"WheelZoom":false, //ホイールでのズーム操作
	"DClickZoom":true //ダブルクリックでのズーム操作
}

initLoader("gmap.js");
initLoader('http://www.google.com/jsapi?callback=googleAPIloadings&key='+gAPIkey);

function googleAPIloadings(){
google.load("maps", "2",{"callback" : mapsLoaded, "language" : "ja"});
}

function initLoader(src) {
  var script = document.createElement("script");
  script.src = src;
  script.type = "text/javascript";
  document.getElementsByTagName("head")[0].appendChild(script);
}

goole.loadの”callback”オプションでAPI の準備ができたら実行する関数を登録しています。
googleAPIloadings()　―[callback]→ mapsLoaded()

gmap.js（GoogleMapのスクリプトファイル）

function mapsLoaded() {
if (google.maps.BrowserIsCompatible()) {
var map = new google.maps.Map2(document.getElementById(gmConfig.gmDivID));
var point =new google.maps.LatLng(gmConfig.gmLat,gmConfig.gmLng);
var marker = new google.maps.Marker(point);
if(gmConfig.SMap_Controler){map.addControl(new google.maps.SmallMapControl());}
if(gmConfig.LMap_Controler){map.addControl(new google.maps.LargeMapControl());}
if(gmConfig.Type3_Controler){map.addControl(new google.maps.MapTypeControl());}
if(gmConfig.Type2_Controler){map.addControl(new google.maps.HierarchicalMapTypeControl());}
if(gmConfig.Scale_Controler){map.addControl(new google.maps.ScaleControl());}
if(gmConfig.OV_Controler){map.addControl(new google.maps.OverviewMapControl());}
if(gmConfig.WheelZoom){map.enableScrollWheelZoom();}
if(gmConfig.DClickZoom){map.enableDoubleClickZoom();}
map.setCenter(point,gmConfig.gmScope);
if(gmConfig.markerAdd){map.addOverlay(marker);}
if(gmIWhtml != "" && gmConfig.markerAdd){
google.maps.Event.addListener(marker, 'click', function() {marker.openInfoWindow(gmIWhtml);});}
else if(gmIWhtml != "" && !gmConfig.markerAdd){map.openInfoWindow(point,gmIWhtml);}
}
window.onunload=function(){google.maps.Unload();}
}

あるページだけに限定する場合はスクリプトタグの埋め込み部分を条件化する

//地図はaccsess.htmlだけ表示
if(location.href.indexOf("access.html")!==-1){
initLoader("gmap.js");
initLoader('http://www.google.com/jsapi?callback=googleAPIloadings&key='+gAPIkey);
}

SearchやFeedも使うなら、initLoader()で実行する関数が書いてあるjsファイルをページに埋め込むようにしといて
googleAPIloadings()にgoogle.load(“search”)などを追加すればおｋ。

V3 APIの場合

バージョンを３に指定した上で、
新たに追加されたsensorパラメーターをother_paramsというプロパティで定義します。

google.load("maps", "3",{"callback" : mapsLoaded,"language" : "ja", "other_params": 'sensor=false'});

[Ajax] Google AJAX API ローダーの利用方法

応用編

V3 APIの場合

関連

コメントを残すコメントをキャンセル

応用編

V3 APIの場合

シェア

関連

コメントを残すコメントをキャンセル