Googleマップをサイトに表示させる方法

Web制作で地図を掲載することがあると思いますが、Googleマップを利用するには、少々敷居が高いと感じる方もいるはず。

しかし、ポイントを掴んでしまえば、意外と簡単に導入できちゃいます。

Googleマップは、Google Maps API version2Google Maps API version3Google Static Maps API version2 など、いくつかの種類が存在しますが、ここでは最も使用されている、Google Maps API version2 と Google Static Maps API version2 で表示させる方法を自分の備忘録も兼ねて解説したいと思います。

Google Maps API version2 の基本的なソースは以下のとおり。このソース内にある[○○]を適宜変更すれば、それだけでマップが表示されます。マーカーは必要な数だけコピーすればOK!

<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=[APIキー]"></script>
<script type="text/javascript">
  //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
        //マップのidを指定
        var map = new GMap2(document.getElementById("[マップのid]"));
        //マップの緯度・経度・ズームレベルを指定
        map.setCenter(new GLatLng([マップの緯度], [マップの経度]), [マップのズームレベル]);
        //マップ左上に表示されるマップコントロール(不要なら削除)
        map.addControl(new GLargeMapControl());
        //マップ右上に表示されるマップタイプコントロール(不要なら削除)
        map.addControl(new GMapTypeControl());
        //マップ右下に表示されるオーバービューマップコントロール(不要なら削除)
        var Overview=new GOverviewMapControl(new GSize([マップの横幅], [マップの縦幅]));
        map.addControl(Overview);
        //マーカー
        var [マーカーの名称(半角英数字)] = new GMarker(new GLatLng([マーカーの緯度], [マーカーの経度]));
        GEvent.addListener([マーカーの名称(半角英数字)], "click", function() {
          [マーカーの名称(半角英数字)].openInfoWindowHtml("[マーカーの名称]");
        });
        map.addOverlay([マーカーの名称(半角英数字)]);
        //マップの表示直後にフォーカスされるマーカー
        GEvent.trigger([マーカーの名称(半角英数字)], "click");
      }
    }
    GEvent.addDomListener(window, "load", load);
    GEvent.addDomListener(window, "unload", GUnload);
  //]]>
</script>
<div id="[マップのid]" style="width: [マップの横幅]; height: [マップの縦幅];"></div>

試しに、わたくしの地元、横浜にある山下公園周辺を表示させてみましょう。

まずはAPIキーを取得する必要があります。APIキーは、Google MAPS API に登録するのページ最下部にある「利用規約を読んだうえでこれに同意します」にチェックを入れ、サイトURLを入力すれば発行されます。サイト内に複数のGoogleマップを表示させる場合もこのAPIキー一つでOKです。

緯度・経度を調べるにはGeocodingがオススメです。

これらを取得して変更したソースが下記になります(APIキーだけは伏せておきます)。

<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=[APIキー]"></script>
<script type="text/javascript">
  //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
        //マップのidを指定
        var map = new GMap2(document.getElementById("googlemap"));
        //マップの緯度・経度・ズームレベルを指定
        map.setCenter(new GLatLng(35.445876, 139.649556), 14);
        //マップ左上に表示されるマップコントロール(不要なら削除)
        map.addControl(new GLargeMapControl());
        //マップ右上に表示されるマップタイプコントロール(不要なら削除)
        map.addControl(new GMapTypeControl());
        //マップ右下に表示されるオーバービューマップコントロール(不要なら削除)
        var Overview=new GOverviewMapControl(new GSize(160, 120));
        map.addControl(Overview);
        //マーカー1
        var yamashitapark = new GMarker(new GLatLng(35.445876, 139.649556));
        GEvent.addListener(yamashitapark, "click", function() {
          yamashitapark.openInfoWindowHtml("<span style='font-size: 16px;'>山下公園</span>");
        });
        map.addOverlay(yamashitapark);
        //マーカー2
        var minatonomieruokapark = new GMarker(new GLatLng(35.440566, 139.654716));
        GEvent.addListener(minatonomieruokapark, "click", function() {
          minatonomieruokapark.openInfoWindowHtml("<span style='font-size: 16px;'>港の見える丘公園</span>");
        });
        map.addOverlay(minatonomieruokapark);
        //マーカー3
        var marinetower = new GMarker(new GLatLng(35.443936, 139.650926));
        GEvent.addListener(marinetower, "click", function() {
          marinetower.openInfoWindowHtml("<a href='http://marinetower.jp/' style='font-size: 16px;'>マリンタワー</a>");
        });
        map.addOverlay(marinetower);
        //マップの表示直後にフォーカスされるマーカー
        GEvent.trigger(yamashitapark, "click");
      }
    }
    GEvent.addDomListener(window, "load", load);
    GEvent.addDomListener(window, "unload", GUnload);
  //]]>
</script>
<div id="googlemap" style="width: 480px; height: 360px;"></div>

そして、これを表示させると、

どうでしょう、マップが表示されてるかな?

ただ、JavaScriptが有効でないサイトで表示されないことや、空のdiv要素を使う必要があるなど、人によっては嫌な部分があることも事実。

そこで使用するのが Google Static Maps API version2 です。これは、JavaScriptによってマップを表示するのではなく、img要素としてマップを表示できるというスグレモノ。APIキーが必要なく、JavaScript を使用しないので、携帯サイトでも表示できます。

Google Static Maps API version2 の基本的なソースは下記のようになります(見やすくするため改行を入れてます)。

<img src="http://maps.google.co.jp/maps/api/staticmap?
size=[マップの横幅]x[マップの縦幅]&amp;
center=[マップの緯度],[マップの経度]&amp;
zoom=[マップのズームレベル]&amp;
markers=label:[マーカーのラベル]|color:[マーカーの色]|[マーカーの緯度],[マーカーの経度]&amp;
sensor=false" alt="[マップの名称]" />

これを修正したものをnoscript要素でマークアップして、div要素に突っ込んであげれば、空divなしでJavaScriptが有効になっていないサイトにも対応できて一石二鳥!

<div id="googlemap" style="width: 480px; height: 360px;">
  <noscript>
    <p><img src="http://maps.google.co.jp/maps/api/staticmap?
size=480x360&amp;
center=35.445876,139.649556&amp;
zoom=14&amp;
markers=label:1|color:red|35.445876,139.649556&amp;
markers=label:2|color:green|35.440566,139.654716&amp;
markers=label:3|color:blue|35.443936,139.650926&amp;
sensor=false" alt="山下公園周辺のマップ" /></p>
  </noscript>
</div>
<noscript>
  <ul>
    <li><span style="color: red;">1</span> 山下公園</li>
    <li><span style="color: green;">2</span> 港の見える丘公園</li>
    <li><span style="color: blue;">3</span> <a href="http://marinetower.jp/">マリンタワー</a></li>
  </ul>
</noscript>

山下公園周辺のマップ

Googleマップはそんなに難しくないでしょ?