「30分で作れる Google Maps API アプリケーション」【基礎編/前編】
閲覧: 63 回
最初の未読メッセージにスキップ
Developer Program チーム
2007/11/20 0:29:102007/11/20
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&v=2&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
きる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&v=2&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
全員に返信
投稿者に返信
転送
新着メール 0 件