Google Maps APIのおさらい。

Webサイトで地図を表示するのに便利なGoogle マップ。Googleが提供しているGoogle Maps APIを使って、地図を設置する方法から、マーカーを置いたり、道のりを表示したり、地図の色を変えたりするためのコードをまとめました。※Google Maps APIの中でも、ここではGoogle Maps JavaScript API v3を使ったサンプルを掲載します。

以下は目次です。クリックするとその項目へ移動します。

Google マップを設置する

「Googleマップをイラストマップみたいにしたい。」という記事でも、「Google Maps APIの基本」として書きましたが、改めて、スニペットとして載せておきます。

公式ドキュメントは下記になりますので、詳しい解説などはそちらを参照ください。

Google Maps JavaScript API V3 チュートリアル - Google Maps API — Google Developers

※この記事で紹介しているサンプルではAPI キーを使用していませんが、ほんとは必要なのでご注意ください！
API キーの取得についてはこちらを参照のこと。

いちばん簡単なGoogle マップ

とりあえずこれだけ書けば、東京駅が中心のGoogle マップが、ブラウザいっぱいに表示されます。
（※下の「PREVIEW」はダミー画像です。画像をクリックすると、別窓でサンプルが開きます。:)）

住所の座標を調べるには下記のサイトが便利です。
住所の座標とか取得するように下記ページを用意しました;)。ぜひ使ってみてくださーい:D！

Googleマップの座標とか取得したい。 - Lopan.jp

ジオコーディングなGoogle マップ

座標じゃなくて、住所を使って表示したい時にはGeocoding Service（ジオコーディング）というのが使えます。
ジオコーディングを使えば「岐阜県大垣市○○町○丁目…」みたいな住所から座標を取得してくれます。
下のサンプルでは「東京駅」としていますが、有名なランドマークとかならばその名称だけでも座標を取得してくれます。

ジオコーディングの公式ドキュメントは下記になります。日本語はまだみたいです（2012年9月現在）。

Geocoding Service - Google Maps JavaScript API v3 — Google Developers

Google マップの読み込み方

Google マップの読み込みを行う関数（ここではinitialize）を実行するには、以下のような書き方ができます。

HTMLに記述する

<body>要素に下記のように記述して、Google マップを読み込みます。

  1. <body onload="initialize();">

javascriptに記述する

下記のように書けば、HTMLとjavascriptを分離することができます。

  1. google.maps.event.addDomListener(window, 'load', initialize);

※詳しくは公式ドキュメントのこちらを参照のこと。

ちなみに、上のサンプル「いちばん簡単なGoogle マップ」ではHTMLに記述する方法で、「ジオコーディングなGoogle マップ」ではjavascriptに記述する方法で、それぞれ読み込んでます。

目次に戻る

場所を示す

地図上に目印を立てて、特定の場所を示すには、マーカーとアイコンが使えます。
場所の詳細情報を表示させたい時には吹き出しが出せます。

マーカーを置く

指定の場所に、Google マップのデフォルトアイコン（押しピン）を表示させます。

マーカーに関する公式ドキュメントは下記になります。

マーカー - Google Maps JavaScript API V3 オーバーレイ - Google Maps API — Google Developers

アイコンを置く

指定の場所に、お手製のオリジナルアイコンを表示させます。
アイコンの指定方法として、単純なアイコンと複雑なアイコン がありますが、ここでは単純なアイコンの方で表示させます。
※ここではLopan cafeのアイコンを、東京駅の上に表示させます。アイコン画像の作り方についてはこちらを参照ください:)。

単純なアイコンとは

Google マップのデフォルトアイコンの代わりに、オリジナルアイコンを使用します。
アイコン画像の底辺の真ん中が、指定した座標の位置にくるように配置されます。
上のサンプルでは、右のpng画像を使用してます。※吹き出し部分が真ん中にくるように画像サイズを調整してあります。

複雑なアイコンとは

アイコンのサイズや、画像のどの位置を座標の位置にするかなど、自分で細かくカスタマイズできます。また、一枚画像からスプライトして表示させたり、アイコンと影を別々のレイヤーに表示させたりすることもできます。
下のサンプルでは、右のpng画像を使用してます。

アイコンと影を別々にする利点

下のサンプルみたいに、アイコンが跳ねたりつまめたりする時には、ちゃんと影らしく振る舞ってくれます。
※shadowってプロパティは使えなくなったみたいです…（2014.7.12追記）。

アイコンに関する公式ドキュメントは下記になります。

マーカー画像のカスタマイズ - Google Maps JavaScript API V3 オーバーレイ - Google Maps API — Google Developers

吹き出し（情報ウィンドウ）を出す

吹き出しの中に、その場所の詳細情報などを載せることができます。
※ここでは、アイコンをクリックすると吹き出しが出る仕様にします。
※JavaScriptが長くなってきたので、ここからはCSSとJavaScriptは外部ファイルとして読み込む事にします。

吹き出し（情報ウィンドウ）に関する公式ドキュメントは下記になります。

情報ウィンドウ - Google Maps JavaScript API V3 オーバーレイ - Google Maps API — Google Developers

目次に戻る

道順を表示する

最寄り駅（出発地点）からお店（到着地点）までの道順を表示させるには、ポリラインを使う方法と、Directions Service（ルート・乗換案内）を利用する方法があります。

ポリラインで描画する

ポリラインを使えば、Google マップ上に線を描画する事ができます。
ここでは、東京駅から東京スカイツリーまでの道順をポリラインを使って描画してみました。
（※サンプルの道順は、次に紹介する「Directions Service」を使って描画されたものを参考にしてます。）

ポリラインの描画には、下記サイトがとっても便利でした:D！

ポリライン作成 : おでかけマップ

ポリラインの公式ドキュメントは下記になります。

ポリライン - Google Maps JavaScript API V3 オーバーレイ - Google Maps API — Google Developers

Directions Serviceを利用する

Directions Serviceを利用すると、出発地点から到着地点までの道のりを自動で描画してくれます。果ては移動距離から所要時間まで計測してくれちゃいます:D！
「自動車でのルート（DRIVING）」、「徒歩でのルート（WALKING）」、「交通機関を使うルート（TRANSIT）」、「自転車でのルート（BICYCLING）」の4つの選べるモードが用意されています。 けど今のところ自動車でのルートと徒歩でのルート以外は、日本ではまだ利用できないみたいです。たぶん（2012年9月現在）

ここでは、東京駅から東京スカイツリーまで、自動車でのルートを表示してみました。

Directions Serviceの公式ドキュメントは下記になります。

ルート サービス - Google Maps JavaScript API v3 — Google Developers

目次に戻る

見た目をカスタマイズする。

地図上に配置されたコントロールの表示／非表示を切り替えることができます。
また、地図の色を変えたり、地名や建物を非表示にしたりなど、地図の見た目も個別に調整する事ができます。

コントロールのカスタマイズ

Google マップ上に配置されているズーム コントロールや、マップ タイプ コントロールなどの表示・非表示を切り替えたり、位置を変える事ができます。

コントロールの表示／非表示を切り替える

下記「JavaScript」の12行めコードを追記するだけで、コントロールをいっぺんに非表示にすることができます。
また、個別に表示／非表示を指定することもできます。
ここでは、一旦いっぺんに非表示にした後、ズーム コントロールとスケール コントロールを表示させています。

コントロールの位置を変える

ここでは、ストリートビュー コントロールのみ非表示にした後、マップ タイプ コントロールを左上に、ズーム コントロールを右上に移動してみました。

コントロールの公式ドキュメントは下記になります。

コントロール - Google Maps JavaScript API v3 — Google Developers

目次に戻る

デザインのカスタマイズ

地図のデザインにもこだわりたいなら、スタイル付き地図（Styled Maps）で地図の見た目をカスタマイズできます。
スタイル付き地図についてはこちらの記事でいろいろ解説してますので、よろしければご参照ください:)。

スタイルでは、Google マップ内の対象物に対して、「表示／非表示」や、「色相・明度・彩度」を変更することができるんですが、「コレはドコ？」という事がよくあったので、対象物を個々に見られるようなサンプルを用意してみました。
ここでは「線や図形（Geometory）」、「テキストやラベル（Labels）」を同時に表示してますが、それらをさらに別々に扱う事もできます。

サンプルを別窓で開く

対象物を複数選択とかできたらよかったんですけど…、どうやるんだろ…X(。
複数選択できるようになりました！けどまだ不具合もあるかもしれません…X(。

「Googleマップをイラストマップみたいにしたい。」という記事では、「スタイル付き地図の色に関するオプション」とか「指定できる対象物とその子対象物」とかを画像付きでまとめてますので、よろしければそちらも参照ください:)。

スタイル付き地図の公式ドキュメントは下記になります。

スタイル付き地図 - Google Maps JavaScript API v3 — Google Developers

公式ドキュメントで紹介されているThe Styled Map Wizardでは、表示結果を確認しながらスタイルを生成することができます。詳しくは後述してます。

Google Maps API Styled Map Wizard

スタイルサンプルスニペット

サンプルとして、2つ紹介します。スタイルの部分はThe Styled Map Wizardを使って生成しました:)。
3つめ追加です（2013.8.9）。

モノクロでシンプルにキメる

ファンシーであったかい感じ

フラットデザイン

流行りのフラットデザインぽくすることもできますねー。こちらのページで紹介されてました！

ざらざらペーパーノイズ

表面にざらざら質感を加えてみましたー:D。

目次に戻る

The Styled Map Wizard

The Styled Map Wizard

パッと見複雑ですが、分かってしまえば、いろいろイジれて楽しいです:)。
スタイルの設定は左側の「編集パネル（Selectors）」で行います。
スタイルは対象物単位で設定します。右側の「スタイル一覧（Map Style）」に、どんどん追加できます。

編集できる内容については下図の通り。

編集内容

Feature typeとElement typeの中身は下図のようになってます。

Feature typeとElement typeの内容

操作手順（2012年9月現在）

  1. 例えば下図のように、「Element type（スタイルを適用したい対象物）」から「Labels（テキストやラベル）」を選択し、「Stylers」の「Visibility（表示／非表示の切り替え）」を「Off」にチェック。すると、地図上から文字が消えます。

    The Styled Map Wizardを使って文字を消してみる

  2. 右上の「Add」ボタンをクリックすると、一覧に新規スタイルが追加されます。
    「Element type」から「Geometory（線や図形）」を選択し、「Saturation（彩度）」に「-100」と入力。すると地図がモノクロになります。

    The Styled Map Wizardを使ってモノクロにしてみる

  3. 「これでよし」となったら「Show JSON」ボタンをクリックして、コードを書き出します。
    ※「Static Map」ボタンをクリックすると、こんな画像と、画像へのパス（URL）が生成されます。

    コードも画像も自動生成

  4. 生成されたコードの[]の中身（2行めから最後から2行めまで）を、下記へコピペしたらできあがり:D。

  1. function initialize() {
  2. var latlng = new google.maps.LatLng(35.681382, 139.766084);
  3. var myOptions = {
  4. zoom: 14,
  5. center: latlng,
  6. mapTypeControlOptions: { mapTypeIds: ['mono', google.maps.MapTypeId.ROADMAP] }
  7. };
  8. var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  10. /* スタイル付き地図 */
  11. var styleOptions = [
  13. ここにコピペ。
  15. ];
  16. var styledMapOptions = { name: 'モノクロマップ' }
  17. var monoType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
  18. map.mapTypes.set('mono', monoType);
  19. map.setMapTypeId('mono');
  20. }
  21. google.maps.event.addDomListener(window, 'load', initialize);

※地図で使用した「東京駅」と「Lopan cafe」とは一切関係がありませんので、あしからず。

Comment & Pingback

4 Comments! for Google Maps APIのおさらい。

  1. Pingback:Googleマップのカスタマイズ / yuheijotaki.com

  2. _watercolor

    Google Maps APIのJavaScriptのURLを、こっそり「http://maps.google.com/maps/api/js?sensor=true」から「http://maps.googleapis.com/maps/api/js?sensor=true」に修正しました。
    ずっとそのままにしててごめんなさい…X(。

    Reply

  4. Pingback:Google マップのカスタマイズ / yuheijotaki.com

コメントを残す