Google アカウント 作成 †

Google Maps 仕様には、Google アカウントが必要。
既に取得している場合は、読み飛ばす。

↑

Google アカウント作成 †

アカウント作成 URL： https://www.google.com/accounts/NewAccount?continue=http%3A%2F%2Fwww.google.co.jp%2F&hl=ja

↑

Google Maps API に登録する †

↑

Google に、ログインする †

↑

APIキーを生成する †

各必要項目に入力して、[APIキーを生成] ボタンを押下

google_maps_1.gif

APIキーが発行される。 忘れないように保存しておくこと。

google_maps_2.gif
  • 発行されたソースを表示してみる 発行後のページの一番下の欄のソースをコピーして適当なhtmlファイルを作成、アクセスしてみる。
    Here is an example web page to get you started on your way to mapping glory:
<!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">
  <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=Google MapsのAPIキー"
     type="text/javascript"></script>
    <script type="text/javascript">

    //<![CDATA[

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

    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>
  • 以下のように表示されればＯＫ。
    google_maps_3.gif
↑

住所を指定して表示 †

適当な名前でhtmlファイルを作り、以下のソースを貼り付けます。
Google MapsのAPIキーと書かれている部分は、自分のAPIキーを入力する。
文字コードは、utf-8 で保存する。

<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=Google MapsのAPIキー" type="text/javascript"></script>
<script type="text/javascript">
 //<![CDATA[
var map = null;
var geocoder = null;
function load() {
 if (GBrowserIsCompatible()) {
  map = new GMap2(document.getElementById("map"));
  map.addControl(new GLargeMapControl());
  geocoder = new GClientGeocoder();
 }
 if (geocoder) {
  // 住所
  var address = '大阪城天守閣';
  // その他
  var info = '大阪城天守閣<br />その他にも伝えたい情報を記述可能';
  geocoder.getLatLng(
  address,
   function (point) {
    if (!point) {
     alert("Not Found");
    } else {
     map.setCenter(point, 17);
    map.openInfoWindowHtml(map.getCenter(), info);
     var marker = new GMarker(point);
     map.addOverlay(marker);
    }
   }
  );
 }
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width:600px; height:500px"></div>
</hrml>

以下のように表示されればＯＫ。

google_maps_4.gif
添付ファイル: filegoogle_maps_4.gif 106件 [詳細] filegoogle_maps_3.gif 112件 [詳細] filegoogle_maps_2.gif 128件 [詳細] filegoogle_maps_1.gif 119件 [詳細]
トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2008-11-10 (月) 00:36:38 (667d)