Search

Google Maps JavaScript APIバージョン2は廃止され、バージョン3に移行しました。
» Google Maps JavaScript API v3の解説はこちら!

APIキーを取得

2008/5/5

  1. 「Googleアカウント」取得
  2. 「Google マップ API」にアクセス

    利用方法の「Google マップ APIキーを登録する」リンクをクリック。

  3. マップ API を申し込む

    利用規約に同意しますにチェックを入れ、Googleマップを設置するサイトのURLを入力したら、APIキー作成ボタンをクリック。

  4. APIキー取得

    Googleアカウントが開いたら、Googleアカウントで取得したIDとパスワードで、ログインします。 ログイン後、以下のように取得した「APIキー」とサンプルコードが表示されます。

    APIキーを忘れても、登録したURLにつきユニークなAPIキーが発行されているので、再度APIキー登録の手順をふめば、以前取得したAPIキーを確認することができます。

サンプルを見る
<!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=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw"
      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マップ設置の際の注意点

2008/5/5

ページの文字コードに注意

ページの文字コードが「utf-8」以外の場合、IEでスクリプトエラーが発生します。 そのため「Shift_JIS」など他の文字コードの場合は、Googleマップの外部JavaScriptファイルを読み込んでいるscript要素のcharset属性に「utf-8」を指定してください。

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" 
type="text/javascript" charset="utf-8"></script>

他人のAPIキーを使ってはいけない

パラメータ「key」には、自分で取得したAPIキーを指定しましょう。

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" 
type="text/javascript"></script>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop