Google Map API でタウンマップ作成unno.jpn.org/guid/googlemap/Gmaps_doc.pdfGoogleMapsAPI...

Google Map API でタウンマップ作成

－WEB2.0 技術

Web 総合技術科

GoogleMapsAPI によるオリジナルマップの作成

©Haruhiro Unno Japan Electronics College 1

GoogleMapAPI によるオリジナルマップの作成

Google の地図を使って、自分だけのオリジナルポインティング付きのマップをつくることができます。ここでは、も簡単な方法だけを説明します。詳細な解説を知りたい人は、他の資料（本や Web サイ

ト等）で調べてください。サンプルファイルの URL は文末にあります。ダウンロードしていただいて

結構ですので御利用ください。なおこの仕組みは、XHTML 文書構造・JavaScript の知識があると理解

の助けになることを注記しておきます。

ホームページエリアの確保

個人メールアドレスの確保

GoogleMAP キーの入手

マップコンテンツの制作

開発用ソフトの入手 LHACA 解凍ツール FFFTP アップロード TeraPad エディタ

サーバへの転送

ブラウザで確認

各種ソフトの入手と作成作業の流れ



事前準備編

個人用パソコンメールアドレスホームページエリアを取得する際には、ほとんどの場合個人のメールアドレスが必要になります。本

人確認という意味でも必要になると考えたほうが良いでしょう。フリーメールアドレスメールアドレスは、学校などの職場で発行されるメールアドレスでも個人用のものでも構いません。

近ではメールボックス（メールの受診箱）の容量が大きなものも出てきていますので、それらを利用

するのも一つの方法です。また、フリーメールの場合「Web メール」機能を備えているものが多く、外

出先からでもメール送受信（メーラー）ソフトを設定することなく、ブラウザ上でメールのやり取りが

出来るのも大きな特徴です。また、スパムメール（いわゆる迷惑メール）を遮断する機能がついている

ものなども増えてきています。業務用のメールアドレスとプライベートのメールアドレスを使い分ける

ことも一つの方法です。フリーメールアドレスを取得する際に、既得のメールアドレスを申告しなけれ

ばならないケースもありますので確認が必要になります。いろいろ意見もあるかもしれませんが、Googleが提供するGMailはメールボックス容量１GBでWebメール機能を備え、迷惑メール対策を備えており、アドレス取得時に既存メールアドレスの申告が要ら

ないという意味においてはオススメかもしれません。ホームページエリアフリーホームページリンク集：http://www.ne.jp/asahi/tima/tima/free/hp.htm



LHACA の使用法

LHACA は村山富男氏が作成したファイル圧縮・解凍のソフトウェアでフリーソフトとして公開されています。

DLL などのライブラリソフトを必要とせず、単独で使えるのが大きなポイントです。

ダウンロード先

http://www.vector.co.jp/soft/win95/util/se166893.html からダウンロードできます。

インストール

ローカルディスクの適当な場所にフォルダを作り、上記のページからダウンロードしてきて保存します。自己

解凍(.exe 形式）ですので、ダブルクリックすればそのままインストールが始まります。デフォルトで、c:\Program

Files\Lhaca というフォルダを作りますので、特に問題のない場合はこのままにします。

インストールが終わるとデスクトップ上に右のアイコンが表示されます。

カスタマイズ

デスクトップ上のアイ

コンをダブルクリックして

開きます。設定画面が表示

されます。デフォルトでは、デス

クトップに解凍先／圧縮先

が指定されていますので、

変更して、ファイルと同じ場所に

指定します。その他の設定

もありますが、一般的には

このままで OK です。

使用方法

解凍（または圧縮）したいファイル（またはフォルダ）をドラッグ＆ドロップすれば解凍（または

圧縮）されます。



FFFTP の使用法

FFFTP とは

FFFTP は曽田純氏が作成した FTP クライアントソフト（フリーソフト）で、Vector などから無料ダ

ウンロード可能です。GUI を利用し、ウィンドウの左半分にクライアント，右半分にサーバの内容を表

示するなどわかりやすい配置になっています。また、漢字のコード変換などもおこなってくれます。

ダウンロードとインストール

http://www.vector.co.jp/soft/win95/net/se061839.html からインストール用のファイルがダウンロー

ド可能です。Lhaca などの解凍ソフトを使って解凍すれば OK です。

FFFTP の起動

デスクトップ上のアイコンをクリックすればＦＦＦＴＰが起動します。

初回起動時の設定項目

Anonymous ＦＴＰを利用する際に使

うメールアドレスを入力します。

FFFTP の接続

FFFTP を起動します。１）一覧に登録してある接続先が表

示されますので「接続」をクリック

します。接続したいホストがない場合、次

節の接続先設定をしてから接続しま

す。ホスト一覧が表示されていないと

きはをクリックします。



２）下記のような画面が表示され接続されるようになります。

接続先設定

１）接続先を登録します。「新規ホスト」をクリックしてく

ださい。ホスト一覧が表示されていない

ときはをクリックします。

２）各項目を設定します。ホストの設定名上のウィンドウ（ホスト一覧）に表示される名前です。自分がわかりやすいよう

につけます。ホスト名ホストサイトから指定されたホスト（サーバ）の名前またはＩＰアドレスユーザ名ホストサイトから指定されたユーザ名パスワードホストサイトから指定されたパスワード



「□ 後にアクセスしたフォル

ダを次回の初期フォルダとする」に

チェックを入れます。こうすると２

回目以降起動したとき、ローカル側

のフォルダをいちいち設定しなく

ても、前回作業した終段階でのフ

ォルダが初期値として表示され、作

業が楽になります。設定が完了したらば「OK」ボタ

ンをクリックします。

FFFTP フィヤーウオール設定

FireWall などで護られている企業内 LAN などの場合、外部のインターネットに対して直接接続し、

ＦＴＰを利用できないように制限してある場合があり（ほとんどです）ます。このような場合には、

FireWall の設定をしなければなりません。

１）プロファイル側設定ホスト一覧で接続するホス

トを選び、「設定変更」をクリ

ックします。接続先設定でホスト名など

の設定をしたウィンドウが表

示されます。「拡張」のタブをクリック

します。下記の画面になります。「□

ＦｉｒｅＷａｌｌを使う」にチ

ェックを入れます。設定が完了したらば「OK」

ボタンをクリックします。



２）オプション側の設定ＦＴＰ画面のメニューバーからオプション－環境設定を選びます。オプションのウィンドウが表示されますので、「FirwWall」タブをクリックします。「ＦｉｒｅＷａｌｌのタイプ」を選びます。いくつかのタイプがありますので、選択メニューの中から選んでください。ＦｉｒｅＷａｌｌホストに FireWall の名前を入れます。ネットワークにより個別に設定されています。 FireWall やプロクシサーバなどの名称を入れますこの項目はネットワーク管理者に確認して入力してください。設定が完了したらば「OK」ボタンをクリックします。



パーミッション設定（各種設定）インターネットでファイルをサーバにアップロードした後から、ファイルに対していろいろな変更な

どをする必要が発生することがあります。特に、ｃｇｉプログラムを利用する場合、プログラム本体や

データに対してパーミッション設定をし、保護しなくてはなりません。そのほかにも、クライアントからサーバ内のファイルなどに対して直接操作をすることができます。方法－基本操作操作したいファイル（フォルダ）をマウ

ス右クリックします。操作可能なメニューが表示されますの

で対象となるメニューをクリックします。

パーミッション設定変更の実際例上記のメニューから「属性変更」を選びます。下記のウィンドウが表示されますので、該当す

る項目のラジオボックスのチェックを On/Off します。パーミッション数値が現在の属性のフィール

ドに表示されます。このフィールドに直接数値を入力するこ

とも可能です。設定が完了したらば「OK」ボタンをクリックします。



TeraPad の使用法寺尾進氏の作成したテキストエディタソフトです。

http://www.vector.co.jp/soft/win95/writing/se104390.html からダウンロードできます。 LACHA などの解凍ツールで解凍し使用します。初期画面インストール後起動すると下記の画面が表示されます。

基本項目設定タブ文字数・1 行の文字数・行折返し

などの基本項目の設定をおこないます。タブ文字数はホームページコンテン

ツを作成する場合には２文字くらいが

適当なようです。 1行あたりの文字数は８０文字に設定

し、折返すのが一般的です。

このままですと、メモ帳などと変わりませんので、使いやすいよう

にセットアップします。マウスでメニューバーの表示をクリックしサブメニューからオプシ

ョンを選んでください。



表示オプション設定スペースなどの文字表示の方法を設

定します。タブや全角空白などを表示する設定に

しておくとコンテンツ開発等の場合に

便利です。行番号/ルーラー設定行番号の表示／非表示を設定します。ルーラーは行の中の文字数がカウン

トできるものです。行番号は文字通り行数を表示します。ここで論理行とありますが、1 行の文字

数が８０桁を超える場合、画面上では

２行に表示されますが、これを１行と

してカウントするのが論理行です。改

行コードを区切りとして行数をカウン

トする方法です。



ウィンドウ/漢字コード TeraPad 起動時のウィンドウサイズ

と改行コードを設定します。ウィンドウサイズは、マウス操作で

使いやすいサイズに設定した後、この

ウィンドウを開いて現在のサイズ・現

在の位置をクリックすれば簡単です。漢字コードは一般的には

SHIFT_JIS コードが利用されていま

すが、ホームページによっては UTF-8が利用条件となっていることもありま

す。そのような場合にはここで設定を

おこないます。印刷メニューバーファイル－印刷をクリックすると右のウィンドウが

表示されます。プリンタの設定でプリンタを選択し

ます。フォントの設定でフォント種類とサ

イズを設定します。行番号の□にチェックを入れると行

番号も印刷されます。印刷をクリックすると印刷が開始さ

れます。



GoogleMapAPI の準備

【GoogleMap キーの取得】 GoogleMap を利用するためには、Google のサイトから、API キーの発行を受けなくてはなりません。

その API キーを HTML ファイルに記述することにより利用が可能になりますので、必須項目となりま

す。１）http://www.google.com/apis/maps/ のページを開く。２）Sign up for a Google Maps API key をクリック。

３）Google Maps API Terms of Use をよく読み □I have read and agree with the terms and conditions (printable version)

の□にチェックを入れる。４）My web site URL:http:// に掲載するページのＵＲＬを入力パスを設定する場合にはパスまで指定すること５）Generate API Key をクリック６）Your key is:

以下にキーが表示されるのでコピー・メモ等の方法で保存

This key is good for all URLs in this directory:

以下に掲載 URL が記載されるので確認７）Here is an example web page to get you started on your way to mapping glory:

にサンプルコードが表記されるので、サーバにアップして確認

【保存文字コードはＵＴＦ－８】 GoogleMapAPI を利用する際の文字コードは UTF－８のみ利用可能です。 Shift_JIS など UTF-8 以外の文字コードですと、地図自体が表示されなくなります。エディタソフトで、記述した XML 文書を保存する際に UTF-8 コードであるか確認してください。 TeraPad0.88 の場合ツールバー［表示］－オプションを選び文字コードのタブを開きます。



サンプルファイルの解説

【基本構造】 <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/などのページで解説されています。いろい

ろとチャレンジしてみてください。



【html ファイル解説：http://unno.jpn.org/sampMap.html のソース】 Script 部分設定 15 行目 GoogleMapKey 指定 36-40 行目アイコン０形状設定オリジナル形状アイコンの設定 42-48 行目アイコン形状設定 50-56 行目アイコン１形状設定（アイコンの形状等は任意設定）参照 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)形式



ポイント情報の作り方

１．ポイントにしたい場所の名前（店名等）を決めます。２．詳細情報を調査します３．緯度経度を調べます

http://www.geocoding.jp/ Geocoding で調べることができます。

住所を入力します。日本語で入力可能です。住所の数字は半角

で入力したほうが精度が上がるようです。結果が表示されます。 GoogleMap 上に吹き出しで表示されます。北緯，東経の順に表示されるのでコピー＆ペーストでの利用が可能です。

４．アイコンの形状を選びます。５．説明文章を作成します。XHTML 形式で記述することができますので、リンクボタンを設定したり、

写真を貼り付けたりすることも可能です。６．スクリプトに記述していきます。



XHTML 文書の作り方

XHTML はホームページを作成するために使われるマークアップ言語です。従来は HTML が主流で

したが、DOM などのプログラムから操作できるように、XML の文法に従って記述する XHTML でホ

ームページを作成するサイトが増えてきています。マークアップ言語はタグ（ < と > で囲まれた命令：マーク）で操作を指示する方法です。基本文法－１開始タグ＆終了タグ [例] 文字フォントを大きくし、色を赤にする命令。 <font size=”+2” color=”#ff0000”>高校教員対象セミナー</font> [例] 日本電子専門学校という文字をクリックすると、そのページに飛びます。

<a href=”http://www.jec.ac.jp” target=”_blank”>日本電子専門学校</a> 基本文法－２空タグ [例] 写真(イメージ)ファイルを貼りつけます。 <img src=”img/photo001.jpg” width=”300” hight=”160” alt=”test” /> [例] 改行する <br />

解説基本は開始タグと終了タグの組み合わせで、<ここから>～<ここまで>という形で指定し、間の～

の部分をいろいろな命令で飾り付けていくという方法です。ただし、行を変えるときは<ここで>という意味になりますし、写真を貼り付けるときには<ここ

に>という意味になりますので終了タグの意味自体が曖昧なものになってしまいます。 <br></br> という記述方法もあるのですが、終了タグの意味がほとんどありません。そのため、開始タグの

後に/を記述して終了タグを兼ねるというのが空タグの考え方です。

解説 HTML 文書ではタグは大文字・小文字のどちらでも使用可能でした。size などの属性を指定する

際も=の右辺を””で括らなくても OK でした。言い方は悪いですが「いい加減」に作ってもブラウ

ザが何とか解釈して表示していただけなのです。しかし、ホームページがプログラムなどと連動

するようになると厳密性が要求されるようになります。XML の文法はこのあたりを厳密に記述

することを要求しています。タグの命令である要素や属性は小文字で記述することや属性値の指

定である＝の右辺は必ず””で括ります。空タグの記述もしっかりしてください。



【練習】

１．自分の家をマーカー表示してください。２．自分の家の寄り駅をマーカー表示してください。３．自分の学校（職場）をマーカー表示してください。

【サンプルファイル】

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.*の文法では動作しないものが殆んどです。購

入に際しては対応するバージョンをチェックしてから御購入ください。

Google Map API でタウンマップ作成unno.jpn.org/guid/googlemap/Gmaps_doc.pdfGoogleMapsAPI...

Documents

Transcript of Google Map API でタウンマップ作成unno.jpn.org/guid/googlemap/Gmaps_doc.pdfGoogleMapsAPI...