Google MAPS APIの使い方

2010.02.12 19:41
  1. Google MAPS APIの基本的な使い方
  2. Google MAPS APIの応用編
google-map.jpg 　Google MAPS APIとはGoogle Mapを自分のWebページなどに埋め込めるGoogleの無料サービスです。こんな感じで誰でもGoogleMapを利用できます。このサービスにはGoogle Maps API ver.2とGoogle Maps API ver.3がありますが、Google Maps API ver.3の方がレスポンスがよく最速でver.2のスピードの10倍の速度を出すという噂なのでver.3の設定方法を紹介します。

　ver.3のアドバンテージは、
  • 地図の拡大縮小が自由にできる。
  • 読み込みが速い。
  • 地図の種類（地図、航空写真、地図＋写真、地形）を選択することができる。
などです。いずれにしろver.3を利用する方がお得です。
　Google MAPS APIを使うためには、Google MAPS APIのキーが必要です。keyは、Google MAPS APIのページから取得できます。登録にはGoogleアカウントが必要なのでメールの登録などをしておくとよいと思います。新規でGoogleアカウントを作成する場合はこちらから可能です。
　Google Maps APIを利用するに当たっての条件は、
  • JavaScriptが使用できる。
  • 一日数万アクセス以内のサイトである。
ということになっています。アカウントは誰でもすぐに申し込めるのでよいのですがクライアントのブラウザー環境がJavaScriptがONになっていなければ表示できません。またサイト自体のアクセスが非常に多いサイトは高負荷となるのでGoogleに問い合わせないとAPIの利用を断られてしまうそうです。またver.2で必要だったGoogle Maps APIを利用するに当たってのkeyの発行はver.3では必要なくなりました。誰でも簡単にライブラリーを利用することができます。

Google MapをWebページに埋め込む

APIの接続とMAPの情報を定義する

　Googpe Map APIは基本的にはJavaScriptから呼び出します。以下のコードをHTMLの<head></head>内に埋め込みます。<!--Google Map API-->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      function initialize() {
        var centerPos = new google.maps.LatLng(35.687167,139.757412);
        var mapOptions = {
          zoom : 16,
          center : centerPos,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("google_map"), mapOptions);
      }
    </script>
<!--Google Map API-->
基本的には文字コードをUTF-8で使用することをおすすめします。いえ、むしろUTF-8じゃないとダメです。いくつか解決法はあるようですが、ver.3での設定方法が私自身もわからないので...。

MAPを表示させる

　続いてマップを表示させる部分を<body></body>タグ内に配置します。
<body onload="initialize()">
  <div id="google_map" style="width:500px;height:500px"></div>
...
</body>

例としてはこんな感じのコードになります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Google Map API</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!--Google Map API-->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      function initialize() {
        var centerPos = new google.maps.LatLng(35.687167,139.757412);
        var mapOptions = {
          zoom : 16,
          center : centerPos,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("google_map"), mapOptions);
      }
    </script>
<!--Google Map API-->
</head>

<body onload="initialize()">
 <div id="google_map" style="width:500px;height:500px"></div>
</body>
</html>
こんな感じで皇居を表示することができます。Googleスゴい。

いいね！


CATEGORY:

TAG:


Category Menu

タグクラウド


プロフィール



  • Name :: 山上オサム ♂(39)
  • Hobby :: 武術
  • Work :: Web Designer