初めての ROCOCO Google Maps
ROCOCO Google Maps (RCCGM)とは
ROCOCO Google Maps (RCCGM) は、ROCOCOライブラリを用いて、Google Maps API によるコンテンツの作成を補助するためのライブラリです。
シンプルなRCCGMコンテンツ
まず、コーディング前に行うことを参照して、HTMLファイルおよびJavaScriptファイル作成の概要を把握して下さい。
次に、HTMLファイル(ファイル名は、たとえばtest.htmlといったように、末尾に.htmlをつけて下さい)を作成します。
この際、次のことに気をつけて下さい。
sample-1.jsを取り込むようにします- HTMLの本体内には
<div id="map">を差し込んでおきます
具体的には、つぎのようにします。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="http://www.finds.jp/rococo/b2/rococo.js"></script> <link rel="stylesheet" type="text/css" href="http://www.finds.jp/rococo/b2/rococo.css" /> <script type="text/javascript" src="http://www.finds.jp/rococo/b2/rococo_rccgm.js"></script> <link rel="stylesheet" type="text/css" href="http://www.finds.jp/rococo/b2/rococo_rccgm.css" /> <script src="http://maps.google.co.jp/maps?file=api&v=2&key=(Google Maps API のライセンスキー)" type="text/javascript"></script> <script type="text/javascript" src="sample.js"></script> </head> <body> <div id="map"></div> </body> </html>
次に、sample.jsを作成して、次のようなコードを作成します。
// 初期化メソッドをRococo.initに追加
Rococo.init.push(userInit);
// 初期化メソッド
function userInit() {
rccgm = new Rococo.rccgm.Rccgm( document.getElementById('map') );
};
このスクリプトは、
HTMLファイルのロードを完了すると、HTMLファイルの中からid="map"となっているタグをもとにRccgmオブジェクトを生成する、という意味です。
このコンテンツは、ROCOCO Google Maps の例題 1にありますので、同じような表示になっているか確認して下さい(このページに戻るにはブラウザの「戻る」ボタンをクリックして下さい)。