横浜のWeb制作会社、株式会社スタジオFIX

Web制作コラム

Google Map API

Google Map APIとは、Googleのサービスである Google Map を自社サイトで無料利用できるサービスです。

[ Google Map API 利用例 ]

※ 地図上でマウスを動かすと地図が動きます。

Google Maps API導入メリット

これまでのホームページ制作では、アクセスマップ（案内図）を掲載する際に、地図をグラフィックとして描き起こす必要がありました。地図の制作には1点数万円の費用がかかり、事業所が複数ある場合、その分コストが高くなってしまいました。また地図によってはわかりずらい、目印が変わる度に作り直しの必要性があるなどメンテナンスが必要でした。

Google Maps API を導入することで、

  • わかりやすい地図を表示できる
  • 無料で利用できる
  • 何個でも地図を表示できる
  • 地図を動かせる
  • どんなWebサイトでも利用できる
  • 世界中の地図を表示できる
  • 地図上に目印や説明文を自由に配置できる
  • 地図の更新はGoogleが行ってくれる

などのメリットを受け取ることができます。

Google Maps API 導入手順

  • Google Maps API Key を取得する。
    Keyの取得には、Googleアカウントが必要です。
    利用したいWebサイトのURLを申請し、以下のようなKeyを取得します。

    ABQIAAAAQuCflsSwSvo6Fn0ekeGiIRSnBC3wv55r1Jk7ADtAPO3SbXY36xSaCeTy

  • Google Map用のxhtmlファイルを作成します。文字コードは「utf-8」が推奨されています。
    空のテキストファイルに以下のソースをコピーし「google_map.html」というファイル名をつけて保存します。
    ※ピンク色の文字の部分は任意で書き換えてください。
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. <head>
    5. <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    6. <title>Google Maps JavaScript API Example</title>
    7. <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=取得したKey" type="text/javascript"></script>
    8. <script type="text/javascript">
    9. //<![CDATA[
    11. function load() {
    12. if (GBrowserIsCompatible()) {
    13. var map = new GMap2(document.getElementById("map"));
    14. map.setCenter(new GLatLng(経度, 緯度), ズームレベル);
    15. }
    16. }
    17. //]]>
    18. </script>
    19. </head>
    20. <body onload="load()" onunload="GUnload()">
    21. <div id="map" style="width: 500px; height: 300px"></div>
    22. </body>
    23. </html>
  • ステップ2で作成した「google_map.html」をインラインフレームで配置します。
    インラインフレームとは1枚のhtml内に他のhtmlファイルを読み込むことです。
    Google Mapを表示したいhtmlファイルを別に用意し、地図を表示したい場所に以下の一行を加えます。

    <iframe src="google_map.html" width="500" height="300" frameborder="0" scrolling="no" name="map" marginwidth="0" marginheight="0" hspace="0" vspace="0">Google Map</iframe>

    Google Mapの文字コードは「utf-8」が推奨されているため、日本語で作られたhtmlファイル内に直接、ステップ2のソースを記述すると文字化けを起こすことがあります。そのため日本語環境では「utf-8」で保存した「google_map.html」を別のhtmlファイル内にフレームで読み込むという手間が必要になります。

[ 関連記事 ]


前に戻る

このページの上へ