google map api でタウンマップ作成unno.jpn.org/guid/googlemap/gmaps_doc.pdfgooglemapsapi...
TRANSCRIPT
![Page 1: Google Map API でタウンマップ作成unno.jpn.org/guid/googlemap/Gmaps_doc.pdfGoogleMapsAPI によるオリジナルマップの作成 3 ©Haruhiro Unno Japan Electronics College](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5fb6a9f2b13676660b0b7ae2/html5/thumbnails/1.jpg)
Google Map API でタウンマップ作成
-WEB2.0 技術
Web 総合技術科
![Page 2: Google Map API でタウンマップ作成unno.jpn.org/guid/googlemap/Gmaps_doc.pdfGoogleMapsAPI によるオリジナルマップの作成 3 ©Haruhiro Unno Japan Electronics College](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5fb6a9f2b13676660b0b7ae2/html5/thumbnails/2.jpg)
GoogleMapsAPI によるオリジナルマップの作成
©Haruhiro Unno Japan Electronics College 1
GoogleMapAPI によるオリジナルマップの作成
Google の地図を使って、自分だけのオリジナルポインティング付きのマップをつくることができます。 ここでは、 も簡単な方法だけを説明します。詳細な解説を知りたい人は、他の資料(本や Web サイ
ト等)で調べてください。サンプルファイルの URL は文末にあります。ダウンロードしていただいて
結構ですので御利用ください。なおこの仕組みは、XHTML 文書構造・JavaScript の知識があると理解
の助けになることを注記しておきます。
ホームページエリアの確保
個人メールアドレスの確保
GoogleMAP キーの入手
マップコンテンツの制作
開発用ソフトの入手 LHACA 解凍ツール FFFTP アップロード TeraPad エディタ
サーバへの転送
ブラウザで確認
各種ソフトの入手と作成作業の流れ
![Page 3: Google Map API でタウンマップ作成unno.jpn.org/guid/googlemap/Gmaps_doc.pdfGoogleMapsAPI によるオリジナルマップの作成 3 ©Haruhiro Unno Japan Electronics College](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5fb6a9f2b13676660b0b7ae2/html5/thumbnails/3.jpg)
GoogleMapsAPI によるオリジナルマップの作成
©Haruhiro Unno Japan Electronics College 2
事前準備編
個人用パソコンメールアドレス ホームページエリアを取得する際には、ほとんどの場合個人のメールアドレスが必要になります。本
人確認という意味でも必要になると考えたほうが良いでしょう。 フリーメールアドレス メールアドレスは、学校などの職場で発行されるメールアドレスでも個人用のものでも構いません。
近ではメールボックス(メールの受診箱)の容量が大きなものも出てきていますので、それらを利用
するのも一つの方法です。また、フリーメールの場合「Web メール」機能を備えているものが多く、外
出先からでもメール送受信(メーラー)ソフトを設定することなく、ブラウザ上でメールのやり取りが
出来るのも大きな特徴です。また、スパムメール(いわゆる迷惑メール)を遮断する機能がついている
ものなども増えてきています。業務用のメールアドレスとプライベートのメールアドレスを使い分ける
ことも一つの方法です。フリーメールアドレスを取得する際に、既得のメールアドレスを申告しなけれ
ばならないケースもありますので確認が必要になります。 いろいろ意見もあるかもしれませんが、Googleが提供するGMailはメールボックス容量1GBでWebメール機能を備え、迷惑メール対策を備えており、アドレス取得時に既存メールアドレスの申告が要ら
ないという意味においてはオススメかもしれません。 ホームページエリア フリーホームページリンク集:http://www.ne.jp/asahi/tima/tima/free/hp.htm
![Page 4: Google Map API でタウンマップ作成unno.jpn.org/guid/googlemap/Gmaps_doc.pdfGoogleMapsAPI によるオリジナルマップの作成 3 ©Haruhiro Unno Japan Electronics College](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5fb6a9f2b13676660b0b7ae2/html5/thumbnails/4.jpg)
GoogleMapsAPI によるオリジナルマップの作成
©Haruhiro Unno Japan Electronics College 3
LHACA の使用法
LHACA は村山 富男氏が作成したファイル圧縮・解凍のソフトウェアでフリーソフトとして公開されています。
DLL などのライブラリソフトを必要とせず、単独で使えるのが大きなポイントです。
ダウンロード先
http://www.vector.co.jp/soft/win95/util/se166893.html からダウンロードできます。
インストール
ローカルディスクの適当な場所にフォルダを作り、上記のページからダウンロードしてきて保存します。自己
解凍(.exe 形式)ですので、ダブルクリックすればそのままインストールが始まります。デフォルトで、c:\Program
Files\Lhaca というフォルダを作りますので、特に問題のない場合はこのままにします。
インストールが終わるとデスクトップ上に右のアイコンが表示されます。
カスタマイズ
デスクトップ上のアイ
コンをダブルクリックして
開きます。設定画面が表示
されます。 デフォルトでは、デス
クトップに解凍先/圧縮先
が指定されていますので、
変更して、 ファイルと同じ場所に
指定します。その他の設定
もありますが、一般的には
このままで OK です。
使用方法
解凍(または圧縮)したいファイル(またはフォルダ)をドラッグ&ドロップすれば解凍(または
圧縮)されます。
![Page 5: Google Map API でタウンマップ作成unno.jpn.org/guid/googlemap/Gmaps_doc.pdfGoogleMapsAPI によるオリジナルマップの作成 3 ©Haruhiro Unno Japan Electronics College](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5fb6a9f2b13676660b0b7ae2/html5/thumbnails/5.jpg)
GoogleMapsAPI によるオリジナルマップの作成
©Haruhiro Unno Japan Electronics College 4
FFFTP の使用法
FFFTP とは
FFFTP は曽田 純氏が作成した FTP クライアントソフト(フリーソフト)で、Vector などから無料ダ
ウンロード可能です。GUI を利用し、ウィンドウの左半分にクライアント,右半分にサーバの内容を表
示するなどわかりやすい配置になっています。また、漢字のコード変換などもおこなってくれます。
ダウンロードとインストール
http://www.vector.co.jp/soft/win95/net/se061839.html からインストール用のファイルがダウンロー
ド可能です。Lhaca などの解凍ソフトを使って解凍すれば OK です。
FFFTP の起動
デスクトップ上のアイコンをクリックすればFFFTPが起動します。
初回起動時の設定項目
Anonymous FTPを利用する際に使
うメールアドレスを入力します。
FFFTP の接続
FFFTP を起動します。 1)一覧に登録してある接続先が表
示されますので「接続」をクリック
します。 接続したいホストがない場合、次
節の接続先設定をしてから接続しま
す。 ホスト一覧が表示されていないと
きは をクリックします。
![Page 6: Google Map API でタウンマップ作成unno.jpn.org/guid/googlemap/Gmaps_doc.pdfGoogleMapsAPI によるオリジナルマップの作成 3 ©Haruhiro Unno Japan Electronics College](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5fb6a9f2b13676660b0b7ae2/html5/thumbnails/6.jpg)
GoogleMapsAPI によるオリジナルマップの作成
©Haruhiro Unno Japan Electronics College 5
2)下記のような画面が表示され接続されるようになります。
接続先設定
1)接続先を登録します。 「新規ホスト」をクリックしてく
ださい。 ホスト一覧が表示されていない
ときは をクリックします。
2)各項目を設定します。 ホストの設定名 上のウィンドウ(ホスト一覧)に表示される名前です。自分がわかりやすいよう
につけます。 ホスト名 ホストサイトから指定されたホスト(サーバ)の名前またはIPアドレス ユーザ名 ホストサイトから指定されたユーザ名 パスワード ホストサイトから指定されたパスワード
![Page 7: Google Map API でタウンマップ作成unno.jpn.org/guid/googlemap/Gmaps_doc.pdfGoogleMapsAPI によるオリジナルマップの作成 3 ©Haruhiro Unno Japan Electronics College](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5fb6a9f2b13676660b0b7ae2/html5/thumbnails/7.jpg)
GoogleMapsAPI によるオリジナルマップの作成
©Haruhiro Unno Japan Electronics College 6
「□ 後にアクセスしたフォル
ダを次回の初期フォルダとする」に
チェックを入れます。こうすると2
回目以降起動したとき、ローカル側
のフォルダをいちいち設定しなく
ても、前回作業した 終段階でのフ
ォルダが初期値として表示され、作
業が楽になります。 設定が完了したらば「OK」ボタ
ンをクリックします。
FFFTP フィヤーウオール設定
FireWall などで護られている企業内 LAN などの場合、外部のインターネットに対して直接接続し、
FTPを利用できないように制限してある場合があり(ほとんどです)ます。このような場合には、
FireWall の設定をしなければなりません。
1)プロファイル側設定 ホスト一覧で接続するホス
トを選び、「設定変更」をクリ
ックします。 接続先設定でホスト名など
の設定をしたウィンドウが表
示されます。 「拡張」のタブをクリック
します。 下記の画面になります。「□
FireWallを使う」にチ
ェックを入れます。 設定が完了したらば「OK」
ボタンをクリックします。
![Page 8: Google Map API でタウンマップ作成unno.jpn.org/guid/googlemap/Gmaps_doc.pdfGoogleMapsAPI によるオリジナルマップの作成 3 ©Haruhiro Unno Japan Electronics College](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5fb6a9f2b13676660b0b7ae2/html5/thumbnails/8.jpg)
GoogleMapsAPI によるオリジナルマップの作成
©Haruhiro Unno Japan Electronics College 7
2)オプション側の設定 FTP画面のメニューバーから オプション - 環境設定 を 選びます。 オプションのウィンドウが表示されますので、「FirwWall」タブをクリックします。 「FireWallのタイプ」を選びます。 いくつかのタイプがありますので、選択メニューの中から選んでください。 FireWallホストに FireWall の名前を入れます。 ネットワークにより個別に設定されています。 FireWall やプロクシサーバなどの名称を入れます この項目はネットワーク管理者に確認して入力してください。 設定が完了したらば「OK」ボタンをクリックします。
![Page 9: Google Map API でタウンマップ作成unno.jpn.org/guid/googlemap/Gmaps_doc.pdfGoogleMapsAPI によるオリジナルマップの作成 3 ©Haruhiro Unno Japan Electronics College](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5fb6a9f2b13676660b0b7ae2/html5/thumbnails/9.jpg)
GoogleMapsAPI によるオリジナルマップの作成
©Haruhiro Unno Japan Electronics College 8
パーミッション設定(各種設定) インターネットでファイルをサーバにアップロードした後から、ファイルに対していろいろな変更な
どをする必要が発生することがあります。特に、cgiプログラムを利用する場合、プログラム本体や
データに対してパーミッション設定をし、保護しなくてはなりません。 そのほかにも、クライアントからサーバ内のファイルなどに対して直接操作をすることができます。 方法-基本操作 操作したいファイル(フォルダ)をマウ
ス右クリックします。 操作可能なメニューが表示されますの
で対象となるメニューをクリックします。
パーミッション設定変更の実際例 上記のメニューから「属性変更」を選びます。 下記のウィンドウが表示されますので、該当す
る項目のラジオボックスのチェックを On/Off します。 パーミッション数値が現在の属性のフィール
ドに表示されます。 このフィールドに直接数値を入力するこ
とも可能です。 設定が完了したらば「OK」ボタンをクリックします。
![Page 10: Google Map API でタウンマップ作成unno.jpn.org/guid/googlemap/Gmaps_doc.pdfGoogleMapsAPI によるオリジナルマップの作成 3 ©Haruhiro Unno Japan Electronics College](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5fb6a9f2b13676660b0b7ae2/html5/thumbnails/10.jpg)
GoogleMapsAPI によるオリジナルマップの作成
©Haruhiro Unno Japan Electronics College 9
TeraPad の使用法 寺尾進氏の作成したテキストエディタソフトです。
http://www.vector.co.jp/soft/win95/writing/se104390.html からダウンロードできます。 LACHA などの解凍ツールで解凍し使用します。 初期画面 インストール後起動すると下記の画面が表示されます。
基本項目設定 タブ文字数・1 行の文字数・行折返し
などの基本項目の設定をおこないます。 タブ文字数はホームページコンテン
ツを作成する場合には2文字くらいが
適当なようです。 1行あたりの文字数は80文字に設定
し、折返すのが一般的です。
このままですと、メモ帳などと変わりませんので、使いやすいよう
にセットアップします。 マウスでメニューバーの表示をクリックしサブメニューからオプシ
ョンを選んでください。
![Page 11: Google Map API でタウンマップ作成unno.jpn.org/guid/googlemap/Gmaps_doc.pdfGoogleMapsAPI によるオリジナルマップの作成 3 ©Haruhiro Unno Japan Electronics College](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5fb6a9f2b13676660b0b7ae2/html5/thumbnails/11.jpg)
GoogleMapsAPI によるオリジナルマップの作成
©Haruhiro Unno Japan Electronics College 10
表示オプション設定 スペースなどの文字表示の方法を設
定します。 タブや全角空白などを表示する設定に
しておくとコンテンツ開発等の場合に
便利です。 行番号/ルーラー設定 行番号の表示/非表示を設定します。 ルーラーは行の中の文字数がカウン
トできるものです。 行番号は文字通り行数を表示します。 ここで論理行とありますが、1 行の文字
数が80桁を超える場合、画面上では
2行に表示されますが、これを1行と
してカウントするのが論理行です。改
行コードを区切りとして行数をカウン
トする方法です。
![Page 12: Google Map API でタウンマップ作成unno.jpn.org/guid/googlemap/Gmaps_doc.pdfGoogleMapsAPI によるオリジナルマップの作成 3 ©Haruhiro Unno Japan Electronics College](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5fb6a9f2b13676660b0b7ae2/html5/thumbnails/12.jpg)
GoogleMapsAPI によるオリジナルマップの作成
©Haruhiro Unno Japan Electronics College 11
ウィンドウ/漢字コード TeraPad 起動時のウィンドウサイズ
と改行コードを設定します。 ウィンドウサイズは、マウス操作で
使いやすいサイズに設定した後、この
ウィンドウを開いて現在のサイズ・現
在の位置をクリックすれば簡単です。 漢 字 コ ー ド は 一 般 的 に は
SHIFT_JIS コードが利用されていま
すが、ホームページによっては UTF-8が利用条件となっていることもありま
す。そのような場合にはここで設定を
おこないます。 印刷 メニューバー ファイル - 印刷 をクリックすると右のウィンドウが
表示されます。 プリンタの設定でプリンタを選択し
ます。 フォントの設定でフォント種類とサ
イズを設定します。 行番号の□にチェックを入れると行
番号も印刷されます。 印刷をクリックすると印刷が開始さ
れます。
![Page 13: Google Map API でタウンマップ作成unno.jpn.org/guid/googlemap/Gmaps_doc.pdfGoogleMapsAPI によるオリジナルマップの作成 3 ©Haruhiro Unno Japan Electronics College](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5fb6a9f2b13676660b0b7ae2/html5/thumbnails/13.jpg)
GoogleMapsAPI によるオリジナルマップの作成
©Haruhiro Unno Japan Electronics College 12
GoogleMapAPI の準備
【GoogleMap キーの取得】 GoogleMap を利用するためには、Google のサイトから、API キーの発行を受けなくてはなりません。
その API キーを HTML ファイルに記述することにより利用が可能になりますので、必須項目となりま
す。 1)http://www.google.com/apis/maps/ のページを開く。 2)Sign up for a Google Maps API key をクリック。
3)Google Maps API Terms of Use をよく読み □I have read and agree with the terms and conditions (printable version)
の□にチェックを入れる。 4)My web site URL:http:// に掲載するページのURLを入力 パスを設定する場合にはパスまで指定すること 5)Generate API Key をクリック 6)Your key is:
以下にキーが表示されるのでコピー・メモ等の方法で保存
This key is good for all URLs in this directory:
以下に掲載 URL が記載されるので確認 7)Here is an example web page to get you started on your way to mapping glory:
にサンプルコードが表記されるので、サーバにアップして確認
【保存文字コードはUTF-8】 GoogleMapAPI を利用する際の文字コードは UTF-8のみ利用可能です。 Shift_JIS など UTF-8 以外の文字コードですと、地図自体が表示されなくなります。 エディタソフトで、記述した XML 文書を保存する際に UTF-8 コードであるか確認してください。 TeraPad0.88 の場合ツールバー[表示]-オプションを選び文字コードのタブを開きます。
![Page 14: Google Map API でタウンマップ作成unno.jpn.org/guid/googlemap/Gmaps_doc.pdfGoogleMapsAPI によるオリジナルマップの作成 3 ©Haruhiro Unno Japan Electronics College](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5fb6a9f2b13676660b0b7ae2/html5/thumbnails/14.jpg)
GoogleMapsAPI によるオリジナルマップの作成
©Haruhiro Unno Japan Electronics College 13
サンプルファイルの解説
【基本構造】 <script src="http://maps.google.com/maps?file=api&v=2&
key=ABQIAAAAiL49afGHkI9zFtJiMfuTgxTlvGhRbP44xTUfjFxdesSINTJGrhTxDywSMewgp ssw3J5saZWq6KAdEg"
type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> function createMarker(point, icon, html) { } function load() { var marker1 = createMarker(new GLatLng(35.698200, 139.698062), icon0,
"<a href='http://www.jec.ac.jp' target='_blank'>日本電子専門学校</a><br />工業系専門学校 <br /><a href='http://www.jec.ac.jp/cw/' target='_blank'>Web 総合技術科");
map.addOverlay(marker1); } </script> </head> <body onload="load()" onunload="GUnload()" bgcolor="Khaki"
background="../gif/mapbg.jpg" width="99%"> <div id="map" style="width: 700px; height: 500px"></div>
</body>
①
②
文字コードは utf-8
Google キーの入力
参考 画像編集ソフト ホームページを作り始めると写真などの画像ファイルを貼りつけたくなります。文字だけで説
明するよりも写真や図があったほうが分かりやすいホームページになります。 近は簡単に取り
扱うことができるデジタルカメラも比較的安く入手することもできますし、携帯電話のカメラを
使ってきれいな写真をとることもできます。 でも、これらの写真などをホームエージに貼り付けるには注意が必要です。そのままの大きさ
ではブラウザの表示部分からはみ出してしまいます。タグの属性でサイズを小さくしても送信さ
れる画像データの容量は元のままですからネットワークに負荷をかけるだけで無駄なものにな
ってしまいます。 これらを解決するためには画像編集ソフトを利用する必要があります。Adobe 社の PhotoShop
がデファクトスタンダードで多くのプロに利用されているものです。フリーソフトとしては
GIMP(http://www.vector.co.jp/soft/win95/art/se190877.html などから入手可)の利用者が増え
ています。使い方も http://mail-and-work.net/gimp/などのページで解説されています。いろい
ろとチャレンジしてみてください。
![Page 15: Google Map API でタウンマップ作成unno.jpn.org/guid/googlemap/Gmaps_doc.pdfGoogleMapsAPI によるオリジナルマップの作成 3 ©Haruhiro Unno Japan Electronics College](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5fb6a9f2b13676660b0b7ae2/html5/thumbnails/15.jpg)
GoogleMapsAPI によるオリジナルマップの作成
©Haruhiro Unno Japan Electronics College 14
【html ファイル解説:http://unno.jpn.org/sampMap.html のソース】 Script 部分設定 15 行目 GoogleMapKey 指定 36-40 行目 アイコン0形状設定 オリジナル形状アイコンの設定 42-48 行目 アイコン形状設定 50-56 行目 アイコン1形状設定 (アイコンの形状等は任意設定) 参照 http://unno.jpn.org/guid/googlemap/MapIcon.html 60-61 行 addControl メソッド
GMapTypeControl() 地図/航空写真切り替えスイッチ表示 GLargeMapControl() スライドバー表示 GSmallMapControl() 左右移動キーまで表示 GSmallZoomControl() 拡大縮小ボタンだけ表示
62 行 地図中心位置の設定 (北緯,東経),ズームレベル 66-67 行 68-69 行 各ポイント(店)の情報 70-71 行 (北緯,東経),アイコン形状,“メッセージ(XHTML 形式)”
var marker1 = createMarker( new GLatLng(35.698200, 139.698062), icon0, "<a href='http://www.jec.ac.jp' target='_blank'>日本電子専門学校</a><br />工業系専門学校
<br /><a href='http://www.jec.ac.jp/cw/' target='_blank'>Web 総合技術科" ); map.addOverlay(marker1);
body 部設定 83 行 背景画指定 85 行 タイトル(表示部分)設定 87 行 宣伝用ロゴ&リンク 89 行目 サイズ指定
地図の大きさをピクセルで指定
緯度・経度情報
アイコン形状 記述内容(XTML)形式
![Page 16: Google Map API でタウンマップ作成unno.jpn.org/guid/googlemap/Gmaps_doc.pdfGoogleMapsAPI によるオリジナルマップの作成 3 ©Haruhiro Unno Japan Electronics College](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5fb6a9f2b13676660b0b7ae2/html5/thumbnails/16.jpg)
GoogleMapsAPI によるオリジナルマップの作成
©Haruhiro Unno Japan Electronics College 15
ポイント情報の作り方
1.ポイントにしたい場所の名前(店名等)を決めます。 2.詳細情報を調査します 3.緯度経度を調べます
http://www.geocoding.jp/ Geocoding で調べることができます。
住所を入力します。 日本語で入力可能です。住所の数字は半角
で入力したほうが精度が上がるようです。 結果が表示されます。 GoogleMap 上に吹き出しで表示されます。 北緯,東経の順に表示されるのでコピー& ペーストでの利用が可能です。
4.アイコンの形状を選びます。 5.説明文章を作成します。XHTML 形式で記述することができますので、リンクボタンを設定したり、
写真を貼り付けたりすることも可能です。 6.スクリプトに記述していきます。
![Page 17: Google Map API でタウンマップ作成unno.jpn.org/guid/googlemap/Gmaps_doc.pdfGoogleMapsAPI によるオリジナルマップの作成 3 ©Haruhiro Unno Japan Electronics College](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5fb6a9f2b13676660b0b7ae2/html5/thumbnails/17.jpg)
GoogleMapsAPI によるオリジナルマップの作成
©Haruhiro Unno Japan Electronics College 16
XHTML 文書の作り方
XHTML はホームページを作成するために使われるマークアップ言語です。従来は HTML が主流で
したが、DOM などのプログラムから操作できるように、XML の文法に従って記述する XHTML でホ
ームページを作成するサイトが増えてきています。 マークアップ言語はタグ( < と > で囲まれた命令:マーク)で操作を指示する方法です。 基本文法-1 開始タグ&終了タグ [例] 文字フォントを大きくし、色を赤にする命令。 <font size=”+2” color=”#ff0000”>高校教員対象セミナー</font> [例] 日本電子専門学校という文字をクリックすると、そのページに飛びます。
<a href=”http://www.jec.ac.jp” target=”_blank”>日本電子専門学校</a> 基本文法-2 空タグ [例] 写真(イメージ)ファイルを貼りつけます。 <img src=”img/photo001.jpg” width=”300” hight=”160” alt=”test” /> [例] 改行する <br />
解説 基本は開始タグと終了タグの組み合わせで、<ここから>~<ここまで>という形で指定し、間の~
の部分をいろいろな命令で飾り付けていくという方法です。 ただし、行を変えるときは<ここで>という意味になりますし、写真を貼り付けるときには<ここ
に>という意味になりますので終了タグの意味自体が曖昧なものになってしまいます。 <br></br> という記述方法もあるのですが、終了タグの意味がほとんどありません。そのため、開始タグの
後に/を記述して終了タグを兼ねるというのが空タグの考え方です。
解説 HTML 文書ではタグは大文字・小文字のどちらでも使用可能でした。size などの属性を指定する
際も=の右辺を””で括らなくても OK でした。言い方は悪いですが「いい加減」に作ってもブラウ
ザが何とか解釈して表示していただけなのです。しかし、ホームページがプログラムなどと連動
するようになると厳密性が要求されるようになります。XML の文法はこのあたりを厳密に記述
することを要求しています。タグの命令である要素や属性は小文字で記述することや属性値の指
定である=の右辺は必ず””で括ります。空タグの記述もしっかりしてください。
![Page 18: Google Map API でタウンマップ作成unno.jpn.org/guid/googlemap/Gmaps_doc.pdfGoogleMapsAPI によるオリジナルマップの作成 3 ©Haruhiro Unno Japan Electronics College](https://reader036.vdocuments.mx/reader036/viewer/2022062402/5fb6a9f2b13676660b0b7ae2/html5/thumbnails/18.jpg)
GoogleMapsAPI によるオリジナルマップの作成
©Haruhiro Unno Japan Electronics College 17
【練習】
1. 自分の家をマーカー表示してください。 2. 自分の家の 寄り駅をマーカー表示してください。 3. 自分の学校(職場)をマーカー表示してください。
【サンプルファイル】
http://unno.jpn.org/gmap/gmap2.html http://unno.jpn.org/gmap/hmap2.html
【参照 URL】 GoogleMapAPI を使用するに当たり、以下のページを参考にしてください。
http://www.google.com/apis/maps/ http://www.google.com/apis/maps/documentation/ http://www.officek.jp/skyg/kdoc/gmap.shtml
経度・緯度を調べるためのページ http://www.geocoding.jp/ 利用方法をよく読んでください また、関連する書籍も出版されていますので参考にされると良いでしょう。 【参考文献】 Google Maps APIv2 活用リファレンス アイティティ 技術評論社 GOOGLE MAPS HACKS Rich Gibson 他 オライリー 注
現在市販されている GoogleMap 関連書籍の中には、以前の Ver1.*を対象としたものがありま
す。 新のバージョンは Ver2.*ですので、Ver1.*の文法では動作しないものが殆んどです。購
入に際しては対応するバージョンをチェックしてから御購入ください。