2017-10

スポンサーサイト

このエントリーをはてなブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

google.load を window.onloadの後に「普通に」呼んではいけない

このエントリーをはてなブックマークに追加
Google Loader API Documentation にはあまりはっきりとは書いてない気がするので書いておく。
google が提供しているAPI群(例:Google Maps API、Google Visualization API)などを利用する時に、google.load関数を使うが、これはwindow.onloadの前に呼び出さないと画面が真っ白になってしまい失敗する。

これを回避するためには、dynamic loadingというやりかたで呼び出す必要がある。
Google Loader API Documentation から引用するが


function mapsLoaded() {
var map = new google.maps.Map2(document.getElementById("map"));
map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
}

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

function initLoader() {
var script = document.createElement("script");
script.src = "https://www.google.com/jsapi?key=INSERT-YOUR-KEY&callback=loadMaps";
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
}


google.load() 関数の第3引数で、"callback"オプションに関数オブジェクトを指定する。この関数オブジェクトはGoogle APIの使用準備が出来た時に呼ばれるもので、その中でGoogle APIを使用する必要がある。

また、動的に読み込む場合ヘッダタグに https://www.google.com/jsapi を元にした<script>タグを置く必要があるが、document.getelementByTagName("head").appendChild() を使って、scriptタグを追加している。<body>タグを参照するdocument.body があるからと言って <head>タグを参照するdocument.head もあるかと思ったら間違いなので注意。

ここから先は余談ですが、Google Visualization API のTable は 列を移動ボタンの表示がなんで ←と→ なんでしょうか。直感的には↑と↓の気がするのですが、、、
スポンサーサイト

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

http://fantakeshi.blog50.fc2.com/tb.php/24-7cf7bc2b
この記事にトラックバックする(FC2ブログユーザー)

«  | ホーム |  »

プロフィール

fantakeshi

Author:fantakeshi
Web:ここ
Twitter ID:fantakeshi
自作物やプログラムやまとまった技術的メモについて

RSSに追加

自作物

最新記事

Twitter

最新コメント

最新トラックバック

月別アーカイブ

カテゴリ

自作物 (26)
一般 (1)
将棋 (12)
BONANZA (1)
ponanza (1)
HTML5 (2)
Chrome (1)
WebAPI (1)
Webサイト (2)
プログラム (2)
Tips (1)

カウンター

検索フォーム

RSSリンクの表示

リンク

このブログをリンクに追加する

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。