「30分で作れる Google Maps API アプリケーション」【基礎編/前編】

63 views
Skip to first unread message

Developer Program チーム

unread,
Nov 20, 2007, 12:29:10 AM11/20/07
to Google Code ディスカッション グループ
Google マップをお使いになったことはありますか?検索やスクロールが快適にで
きるGoogle マップですが、慣れてきたユーザの方なら、このGoogleマップを自分
のホームページにも起きたい。また、思うように表示や機能を変更したいとお考え
でしょう。Google Maps API を使えば簡単にそれが実現できます。

このチュートリアルでは、無料でホームページを作成できるGoogle Page Creator
を使い、Google Maps APIを体験することを目的としています。HTMLとJavaScript
の基礎的な知識さえあれば、これまで経験のない方でも大丈夫です。Googleの
テクノロジーがとても手軽に利用できることを実感してください。

■目次

【前編】
-Google マップとGoogle Maps API
-環境を整える
-Google Maps API Key の取得
-地図を表示する

【Google マップとGoogle Maps API】
Googleが無償で提供する地図サービス”Googleマップ”。取引先の会社の地図が
Google マップだったということはありませんか?

Googleのサイト以外でGoogleマップが利用されている場合、多くはGoogle Maps
APIというGoogleのテクノロジーが利用されています。Google Maps APIを利用すれ
ば、簡単な地図の表示から、地図を用いた高度なウェブアプリケーションまで実現
可能です。しかも、Google Maps APIの利用は原則として無料です。

それでは、このGoogle Maps APIを実際に使ってみましょう。

【環境を整える】
Google Maps APIを利用するために必要なものは、次の通りです。

-動作を確認するためのウェブブラウザ
-HTMLを編集するためのエディタ
-HTMLファイルを置くウェブスペース
-Google アカウント
-Gmailのメールアドレス
-Google Maps API Key

このチュートリアルをご覧になっている方は、ウェブブラウザはすでに準備できて
いますね。エディタはテキストエディタで十分です。では、編集したWebページは
どこに置けばよいでしょう。今回は、Googleが提供するGoogle Page Creatorを
利用してみましょう。

///Google Page Creatorの利用方法///
Google Page Creatorは無料のホームページ作成サービスです。ワープロソフト
感覚で、誰でも簡単にホームページを作成できます。Google Page Creatorを利用
するにはGoogle アカウントとGmailのメールアドレスが必要となります。

http://pages.google.com/(英語)

ここでGmailのメールアドレスとGoogleアカウントのパスワードを入力し、「Sign
in」ボタンを押します。すると、Google Page Creatorの利用規約同意画面が表示
されます。「Terms and Conditions」を一読し、同意ならば「I have read and
agree to these Terms and Conditions」をチェックして、「I'm ready to
create my pages」ボタンを押します。続いて、ページ左上の「Back to Site
Manager」をクリックします。すると、ページ上部に
http://abcdefg.googlepages.com/(”abcdefg”はダミーです。あなたのGmail
のアドレスが表示されます)が表示されます。これがあなたのホームページと
なります。あとで必要になりますので、きちんとメモしておいてください。

参考画像
http://developer-round-table.googlegroups.com/web/maps01.jpg
///////////////////////////////////

Google Page Creatorの準備ができたら、いよいよGoogle Maps APIを利用する
準備にとりかかります。

【Google Maps API Key の取得】
Google Maps API を利用するにはGoogle Maps API Keyが必要です。この大切な
Keyを取得しましょう。Google Maps APIのオフィシャルページを表示してください。

http://www.google.com/apis/maps/(英語)

このページの「Sign up for a Google Maps API key」をクリックし、Keyを取得
するページへ移動します。

表示されたページには、Google Maps API の制限事項などが記載されています。
内容に同意であれば「I have read and agree with the terms and conditions」
をチェックします。さらに「My web site URL:」に先ほどGoogle Page Creatorで
メモしたあなたのホームページのURLを記入し、「Generate API Key」ボタンを押
します。

なお、ボタンを押した後に表示されるページはとても重要です。このページを
丸ごとファイル保存するか、プリントしておきましょう。

【地図を表示する】
先ほど表示されたページの「Your key is:」につづく長い英数字があなたのGoogle
Maps API keyです。このページには、あなたのGoogle Maps API Keyを利用した
サンプルコードが表示されています。「Here is an example web page to get you
started on your way to mapping glory:」と記された下のコードのことです。
” <script src=http://maps.google.com/maps”で始まる行の”key=”にあなたの
Google Maps API Keyが記されています(abcdefgはダミーです。サンプルコードに
はあなたのGoogle Maps API Keyが記されています)。

-------------------------------------------------------------------------------
<!DOCTYPE html "-//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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/
>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?
file=api&amp;v=2&amp;key=abcdefg"
type="text/javascript"></script>
<script type="text/javascript">

function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
}
}

</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
-------------------------------------------------------------------------------

それでは、このサンプルコードをまるごとコピーして、エディタにペーストして
ください。そして、HTMLファイルとして保存します(ここでは「sample.html」とし
ます)。

///注意! ファイル保存はUTF-8で///
ファイルを保存する際には「文字コード」をUTF-8としてください。Google Maps
APIはUTF-8以外の文字コードでは表示できません。

参考画像
http://developer-round-table.googlegroups.com/web/maps02.jpg
/////////////////////////////

次に、HTMLファイルをGoogle Page Creatorにアップします。



Google Page Creatorにアクセスし、先ほど表示したSite Managerのページの右側
にある「Uploaded stuff」から「upload」を選び、ファイルをアップロードします。

参考画像
http://developer-round-table.googlegroups.com/web/maps03.jpg

あなたのGoogle Page CreatorのURLを表示してみましょう。

http://abcdefg.googlepages.com/sample.html(”abcdefg”はダミーです。
あなたのGoogle Page Creatorのアドレスを入力してください。)

地図が表示されていれば成功です。Google サイトにある Google マップと同様に、
自在にスクロールできることを確認してください。これで、あなたのホームページ
に Google マップアプリケーションが設置されたわけです。
とても簡単でしょう。次回は基本的な地図の設定について説明します。

参考画像
http://developer-round-table.googlegroups.com/web/maps04.jpg

Reply all
Reply to author
Forward
0 new messages