カスタマイズしたGoogleマップをWEBサイトに表示する方法

2014年11月22日
follow us in feedly

ホームページ制作

WEBサイトを制作すると、アクセスマップなどにはGoogleマップを使用するケースが多いですね。

その場合、デフォルトのままのデザインで組み込むと周りとのバランスが悪くなることがあります。

そんな時はデザインを変えましょう。

Google Maps APIを利用して自分好みの地図を作ります。

今回はGoogleマップの組み込み方と簡単なカスタマイズの方法をまとめます。

Googleマップの組み込み方

Google Maps JavaScript APIを読み込む

WEBページの<head>内にscriptタグを使用して Google Maps JavaScript API を以下のように読み込みます。

&lt;script type=&quot;text/javascript&quot; src=&quot;http://maps.google.com/maps/api/js?&amp;sensor=false&quot;&gt;&lt;/script&gt;

sensorはGPSなどの位置情報取得センサーを使用するかどうかです。必要に応じてtrueとfalseを使い分けてください。

Google Maps JavaScript API は、API キーがなくても正常に機能します。キーを使うとアプリケーションの Maps API の使用状況をチェックできるようになるので必要な方は次のやり方でキーを取得してコードに追加してください。

■APIキーを取得する

1.API コンソール https://code.google.com/apis/console にアクセスし、Google アカウントでログインします。初めて利用する場合はCreate project…と表示されたボタンをクリックします。

Create project

2.左側のメニューからAPIと認証APIをクリックして、ページからGoogle Maps JavaScript API v3を見つけて有効にします。

Google Maps JavaScript API V3

3.左側のメニューからAPIと認証認証情報をクリックして、新しいキーを作成と表示されたボタンをクリックします。

新しいキーを作成

4.ウィンドウが立ち上がるのでブラウザ キーをクリック

ブラウザキー

5.表示させるページのurlなどを入力して作成ボタンをクリックします。

リファラーの設定

6.認証情報ページにAPIキーが表示されていると思います。

APIキー

7.取得したAPIキーを<head>にscript タグを使用して読み込んだGoogle Maps JavaScript APIに追加します。追加するのはkey=●●●●●です。黒丸にそれぞれのキーを入れてください。

&lt;script type=&quot;text/javascript&quot; src=&quot;http://maps.google.com/maps/api/js?key=●●●●●&amp;sensor=false&quot;&gt;&lt;/script&gt;

■Googleマップの設置

1.ページの読み込み完了時に処理を行わせるために<body>タグに以下のように記述します。

&lt;body onload=&quot;initialize();&quot;&gt;

2.マップを表示したい場所に以下のようにdiv要素を記追加します。

&lt;div id=&quot;map_canvas&quot;&gt;&lt;/div&gt;

■「gmap.js」(名前は任意)というJavaScriptファイルを準備します。

function initialize() {
  // 緯度経度やズームレベルの指定
  var latlng = new google.maps.LatLng(33.518438,130.43645);
  var mapOptions = {
    zoom: 15,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById(&quot;map_canvas&quot;), mapOptions);

    // マーカーを置く
  var marker = getMarker(
    {
      position: latlng,
      title: &quot;博多南駅&quot;,
      icon: &quot;images/marker.png&quot;,
      map: map
    }
    );

 function getMarker( option )
  {
    var marker = new google.maps.Marker( option );
    return marker;
  }
  
  // 地図のスタイルを変える
  var styles = [
    {
        &quot;featureType&quot;: &quot;water&quot;,
        &quot;elementType&quot;: &quot;geometry.fill&quot;,
        &quot;stylers&quot;: [
            {
                &quot;color&quot;: &quot;#d3d3d3&quot;
            }
        ]
    },
    {
        &quot;featureType&quot;: &quot;transit&quot;,
        &quot;stylers&quot;: [
            {
                &quot;color&quot;: &quot;#808080&quot;
            },
            {
                &quot;visibility&quot;: &quot;off&quot;
            }
        ]
    },
    {
        &quot;featureType&quot;: &quot;road.highway&quot;,
        &quot;elementType&quot;: &quot;geometry.stroke&quot;,
        &quot;stylers&quot;: [
            {
                &quot;visibility&quot;: &quot;on&quot;
            },
            {
                &quot;color&quot;: &quot;#b3b3b3&quot;
            }
        ]
    },
    {
        &quot;featureType&quot;: &quot;road.highway&quot;,
        &quot;elementType&quot;: &quot;geometry.fill&quot;,
        &quot;stylers&quot;: [
            {
                &quot;color&quot;: &quot;#ffffff&quot;
            }
        ]
    },
    {
        &quot;featureType&quot;: &quot;road.local&quot;,
        &quot;elementType&quot;: &quot;geometry.fill&quot;,
        &quot;stylers&quot;: [
            {
                &quot;visibility&quot;: &quot;on&quot;
            },
            {
                &quot;color&quot;: &quot;#ffffff&quot;
            },
            {
                &quot;weight&quot;: 1.8
            }
        ]
    },
    {
        &quot;featureType&quot;: &quot;road.local&quot;,
        &quot;elementType&quot;: &quot;geometry.stroke&quot;,
        &quot;stylers&quot;: [
            {
                &quot;color&quot;: &quot;#d7d7d7&quot;
            }
        ]
    },
    {
        &quot;featureType&quot;: &quot;poi&quot;,
        &quot;elementType&quot;: &quot;geometry.fill&quot;,
        &quot;stylers&quot;: [
            {
                &quot;visibility&quot;: &quot;on&quot;
            },
            {
                &quot;color&quot;: &quot;#ebebeb&quot;
            }
        ]
    },
    {
        &quot;featureType&quot;: &quot;administrative&quot;,
        &quot;elementType&quot;: &quot;geometry&quot;,
        &quot;stylers&quot;: [
            {
                &quot;color&quot;: &quot;#a7a7a7&quot;
            }
        ]
    },
    {
        &quot;featureType&quot;: &quot;road.arterial&quot;,
        &quot;elementType&quot;: &quot;geometry.fill&quot;,
        &quot;stylers&quot;: [
            {
                &quot;color&quot;: &quot;#ffffff&quot;
            }
        ]
    },
    {
        &quot;featureType&quot;: &quot;road.arterial&quot;,
        &quot;elementType&quot;: &quot;geometry.fill&quot;,
        &quot;stylers&quot;: [
            {
                &quot;color&quot;: &quot;#ffffff&quot;
            }
        ]
    },
    {
        &quot;featureType&quot;: &quot;landscape&quot;,
        &quot;elementType&quot;: &quot;geometry.fill&quot;,
        &quot;stylers&quot;: [
            {
                &quot;visibility&quot;: &quot;on&quot;
            },
            {
                &quot;color&quot;: &quot;#efefef&quot;
            }
        ]
    },
    {
        &quot;featureType&quot;: &quot;road&quot;,
        &quot;elementType&quot;: &quot;labels.text.fill&quot;,
        &quot;stylers&quot;: [
            {
                &quot;color&quot;: &quot;#696969&quot;
            }
        ]
    },
    {
        &quot;featureType&quot;: &quot;administrative&quot;,
        &quot;elementType&quot;: &quot;labels.text.fill&quot;,
        &quot;stylers&quot;: [
            {
                &quot;visibility&quot;: &quot;on&quot;
            },
            {
                &quot;color&quot;: &quot;#737373&quot;
            }
        ]
    },
    {
        &quot;featureType&quot;: &quot;poi&quot;,
        &quot;elementType&quot;: &quot;labels.icon&quot;,
        &quot;stylers&quot;: [
            {
                &quot;visibility&quot;: &quot;on&quot;
            }
        ]
    },
    {
        &quot;featureType&quot;: &quot;poi&quot;,
        &quot;elementType&quot;: &quot;labels&quot;,
        &quot;stylers&quot;: [
            {
                &quot;visibility&quot;: &quot;on&quot;
            }
        ]
    },
    {
        &quot;featureType&quot;: &quot;road.arterial&quot;,
        &quot;elementType&quot;: &quot;geometry.stroke&quot;,
        &quot;stylers&quot;: [
            {
                &quot;color&quot;: &quot;#d6d6d6&quot;
            }
        ]
    },
    {
        &quot;featureType&quot;: &quot;road&quot;,
        &quot;elementType&quot;: &quot;labels.icon&quot;,
        &quot;stylers&quot;: [
            {
                &quot;visibility&quot;: &quot;on&quot;
            }
        ]
    },
    {
        &quot;featureType&quot;: &quot;poi&quot;,
        &quot;elementType&quot;: &quot;geometry.fill&quot;,
        &quot;stylers&quot;: [
            {
                &quot;color&quot;: &quot;#dadada&quot;
            }
        ]
    }
];
map.setOptions({styles: styles});
}

作成した「gmap.js」は<head>内に以下のように読み込んでください

&lt;script src=&quot;js/gmap.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

■「gmap.js」の説明

長くなりましたが、表示する状況に応じて変えるところは少ないので使いまわせます。

1.変数latlngに緯度経度を指定してください。調べるにはGeocodingが便利です。

 Geocoding

2.ズームレベルを変数mapOptionsのzoomにお好みで指定してください。mapTypeIdのROADMAPをSATELLITEに変えれば市街地地図から航空写真になります。

3.表示するマーカーを変数markerのiconに指定してください。

4.地図のスタイルを指定します。難しそうと思った方は大丈夫です。知識なしでも簡単にGoogleマップのデザインを変えられる便利なツールがあります。ツールを使えばスタイルを指定するコードが出力されるので貼り付けるだけで完了します。では便利なツールを3つご紹介します。

自分で時間をかけてお好みのデザインにしたい方はStyled Maps Wizardが便利です。

 Styled Maps Wizard

英語はちょっと苦手という方はStyled Maps Wizardよりはシンプルですが日本語版をどうぞ。

 日本語版 Google Maps API Styled Map Wizard

自分でスタイルを作るのは面倒くさいという方はスタイル集のSnazzy Mapsが便利です。

 Snazzy Maps

■さいごに

今回はGoogleマップのデザインを変える簡単なカスタマイズ方法をまとめました。見た目はこんな感じになりました。

Googleマップカスタマイズ

他にも目的地までのルートにラインを引いたり様々なことができますので挑戦すると面白いと思います。

follow us in feedly

関連記事

福岡でホームページ制作を依頼するなら【ハブワークス】

ホームページ制作・リニューアル・スマートフォンサイト制作・ECサイト制作は福岡のハブワークスまでお気軽にどうぞ。WEBサイト制作後の修正・更新・SEO対策もお任せください。リーズナブルな料金設定でサービスをご提供いたします。

webサイト制作・修正に関するお問合せ・ご相談・お見積りはお気軽にどうぞ