Lopan.jp

Googleマップをイラストマップみたいにしたい。

Google Maps APIを使ってGoogleマップをカスタマイズします

サイト制作において、アクセスマップなどの地図の表示はどうしてますか?「Google Maps API」を利用したり、ちょっとデザインにこだわりたい時にはイラストに描き起こしたりしてるんじゃないでしょうか。
今回は、Google マップをちょいとカスタマイズすれば、まるでイラストマップみたいに見せることができるんだぜ!というお話です。

記事中に出てくる画像は2012.3現在のもののため、現在のGoogle Maps APIでの表示とは異なりますので注意です…X(。
リンク切れしていたところを、なるべく近い内容の存在するページにリンクし直しました(2015.7.20追記)

まずはしっかり抑えておきたい「Google Maps APIの基本」から。
基本をすっ飛ばして早速カスタマイズしたい方はこちら↓

Google Maps APIの基本

Google マップはGoogle API キーを発行しないと使えないから面倒…、なんていうのは昔の話で、実は、随分前からAPI キー無しでもGoogle Maps APIが利用できるようになっていたんです。
に「Google Maps API Version 3(以下V3)」が登場したそうで、そしてには、バージョン 2 は、Google の廃止ポリシーにより正式に廃止されました。

…というのも昔のお話で、2014年現在では「すべての Maps API アプリケーション* では、API キーを使用して Maps API を読み込む必要があります。」とのことで、API キーを取得する必要があります!(2014.8.9追記、すみません、2013年2月くらいからそうだったみたいです…)
※この記事で紹介しているサンプルではAPI キーを使用していませんが、ほんとは必要なのでご注意くださいーXD!

Google Maps JavaScript API V3 および Maps Image API は、以前は API コンソール キーを必要としていませんでした。下位互換性を確保するために、これは維持されますが、今後、新しいアプリケーションではおすすめできません。

よくある質問 - Google Maps API — Google Developers

API キーの取得

そんな訳で、まずは「API キー」を取得します。
ここで取得するAPI キーは、ずーっと以前のMaps API キーとは違うもので、API コンソール キーというものになります。このAPI キーを使用する事で、「Google Developers Console」から、地図の読み込みを計測したり、アクセス解析、データの分析などができるようになります。

Googleアカウントでログイン

なにはなくとも、まずは「Google アカウントでログイン」しましょう:D。いつもの検索画面からログインできます。ログインすると、右上に名前が表示されます。

※Google アカウントを持ってない場合は、まずはこちらから、Google アカウントを作成しちゃいましょう。

Google APIsにアクセス

まずは下記URLへ移動してプロジェクトを作成します。

https://console.developers.google.com/iam-admin/projects

+プロジェクトを作成」というボタンをクリックして、「新しいプロジェクト」を作成します。
プロジェクト名を入力して、「作成」ボタンをクリック。プロジェクト名には、英数字、ハイフン、スペース、引用符(コーテーション)、感嘆符(ビックリマーク)が使えるみたいです(2016年9月現在)。ここでは「Lopan Project」としました。
「作成」ボタンクリック後、しばし待つと、プロジェクトが作成されて、ライブラリページへ移動します。

まずはプロジェクトを作成

プロジェクトできあがりを待つ

Google Maps JavaScript API を有効にする

たくさんあるAPIの中からGoogle Maps APIのとこにある「Google Maps JavaScript API」をクリックします。
Google Maps JavaScript APIの個別ページへ移動したら、「有効にする」ボタンをクリック。
APIが有効になったらば、「認証情報に進む」ボタンをクリックします。

Google Maps JavaScript APIをクリック

APIを有効にして認証情報に進む

API キーを作成

必要な認証情報の種類を調べるというところの、「API キー」というテキストリンクをクリック。するとAPI キーの設定ページへ移動します。
キーの制限のところで「HTTP リファラー(ウェブサイト)」を選択し、続いて、下のテキストエリアに、このAPIを利用するサイトのURLを入力します。ここでは「lopan.jp/*」としましたけど、例えば、「test.lopan.jp」とか「cafe.lopan.jp」でも使いたいという場合には「*.lopan.jp/*」という風にすると良いです:)。
「作成」ボタンをクリックすると、API キーが作成されます!

APIキーをクリックして「HTTP リファラー」を選択

APIを利用するサイトのURLを設定して「作成」

認証情報ページが、下図みたいな感じだったら、「認証情報を作成」ボタンをクリックして、「API キー」のところをクリック。すると、先にAPI キーが作成されちゃうので、「キーを制限」ボタンをクリックして、前述と同じように、キーの制限の設定を行いましょう:D。

認証情報を作成

API キーが先に作成されちゃうので、後から制限を設定する

API キーの取得について、詳しくは下記ページを参照のこと(2015.7.20現在、日本語はまだみたい)

API キーを取得しちゃえば、あとは以下の3ステップでGoogle マップを導入できます!

  1. Google Maps APIを読み込む

  2. Google マップの詳細設定

  3. Google マップの設置

Google Maps APIを読み込む

まずは、Google Maps APIを読み込むため、HTMLのhead要素内に下記タグを記述します。

<script src="http://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=true"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=API_KEY"></script>

これだけでGoogle Maps APIが利用可能になります。
API_KEYのところには、前述で取得したAPI キーを指定します。
sensor=の所はtruefalseのどちらかを指定します。ここではGPSなどの位置情報取得センサーを使用するか否かを問われています。trueにすると「使用します」、falseにすると「使用しません」。V3では、携帯端末での快適な利用を念頭に設計されているため、上記の指定は必須なのです。

sensorパラメーターはもはや必要ありません(けっこう以前から…!)。なので、API キーだけで大丈夫です!

Maps API のための JavaScript コードは、ブートストラップ形式の URL https://maps.googleapis.com/maps/api/js を介して読み込まれます。
このブートストラップのリクエストは Maps API で使用するための、主な JavaScript のオブジェクトやシンボルのすべてを読み込みます。

参照:ライブラリ | Google Maps JavaScript API | Google Developers

Google マップの詳細設定

表示したいGoogle マップについての詳細設定をJavascriptで記述してゆきます。例えば以下は、オーストラリアのニューサウスウェールズ州のシドニーを中心とした地図を表示する為の記述になります。

<script type="text/javascript">
function initialize() {
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}
</script>

ひとつずつ解説します。

  var latlng = new google.maps.LatLng(-34.397, 150.644);

ここで、latlngという変数に、座標の値を代入しています。
(-34.397, 150.644)は、(緯度, 経度)を表しています。LatLngは、Lat=latitude(緯度)、Lng=longitude(経度)のこと。)

  var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

ここで、表示する地図のオプション設定を行なっています。

  • zoomは、デフォルトのズームレベル(表示倍率)の指定。
  • centerは、表示枠内の中心点をどの座標にするかの指定。
    ここでは、事前にlatlngに代入しておいた座標を指定しています。
  • mapTypeIdは、初期の表示タイプの指定。
    ここでは、通常の「地図」ROADMAPを指定しています。他に、「航空写真」SATELLITE、「航空写真+地図」HYBRID、「地形」TERRAINなどがあります。

表示タイプ

  var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

ここの記述で「map」という地図を作成しています。(document.getElementById('map_canvas'), myOptions)で、HTML上のid="map_canvas"の要素内に、myOptionsで指定した内容の地図を作成する、という指定をしています。

Google マップの設置

<body>内に、地図を表示する為のid="map_canvas"の要素を設置します。その際、style属性で、widthheightも指定しましょう。(もちろん外部CSSで指定してもOKです。)この指定がないと、要素の高さと幅が0pxとなり、地図が表示されません。

<div id="map_canvas" style="width:100%;height:500px;"></div>

そして最後、<body>onload="initialize();"と記述すれば設置完了です。
下記のように書けば「<body>読み込み時にinitialize()を実行」します:D!(2012.11.23追記、すみません抜けてました。)

<body onload="initialize();">

ここまでの指定で、以下のような表示結果となります。(※便宜上、マウスホイールでのズーム機能を削除しているほか、もろもろ機能を取り付けています;D。)

目次に戻る

Google Maps APIのカスタマイズ

さて本題。Google Maps APIでは、地図上のマーカーを独自のアイコンに変えたり、画像を貼り付けたり、表示をシンプルにしたり、色を変えたり…、といったカスタマイズが可能。
それらを組み合わせれば、独自のデザインでGoogle マップを表示できちゃいます!
ここでは、「Lopan cafe」のアクセスマップに似合いそうなビジュアルにカスタマイズするまでの手順をまとめてみました。(※Lopan cafeはGoogle マップには載ってなかったので妄想店舗なので、表示してる場所は仮です。)

お店の場所を示すアイコンをそのお店のロゴにする

デフォルトのマーカーじゃ、ちょっと味気ない。せっかくお店のロゴがあるんだから、Google マップのマーカーにお店のロゴを使いたい!…をまとめてみました。

デフォルトのマーカーを表示する

まずは、デフォルトのマーカーを表示させます。マーカーを表示させるには、以下のコードを追記します。(※ここからは「新宿駅(35.690, 139.700)」を中心とした地図を表示します)

  var markerOptions = {
    position: latlng,
    map: map,
    title: '新宿駅'
  };
  var marker = new google.maps.Marker(markerOptions);

最後の行のvar marker = new google.maps.Marker(markerOptions);で、「marker」というマーカーを作成しています。括弧の中(引数)には、オプションを指定できます。ここではmarkerOptionsという変数に入れたオプションを指定しています。オプションには以下のようなものが用意されています。

  • position
    マーカーを表示させる位置を座標で指定します。この指定は必須です。
  • map
    どの地図にマーカーを表示させるか指定します。この指定も必須だと思います。
  • title
    マーカーにロールオーバーした時に出るツールチップ用テキストを指定できます。
  • draggable
    マーカーをドラッグできるかできないかを指定できます。draggable: trueで「ドラッグできる」、draggable: falseで「ドラッグできない」。
  • animation
    マーカーにアニメーションを指定できます。アニメーションには、上から落ちてくる「DROP」、ピョンピョン弾む「BOUNCE」があります。
    animation: google.maps.Animation.DROPという風に記述。

ここまでで、以下のような表示結果となります。

アイコン用の画像を用意する

オリジナルアイコン用の画像を制作します。アイコンには「Lopan cafeのロゴ」を使用します。

影の画像は、通常、主の画像の右上方向に 45 度の角度で作成する必要があり、影の画像の左下角はアイコン画像の左下角と揃っている必要があります。影の画像は、画像の境界が地図上に正しく表示されるように、アルファ透明度の 24 ビット PNG 画像にする必要があります。

Googleマップ用アイコン

上記を踏まえ、右図のような画像を用意しました。今回の場合なら、なにもアイコンと影を分ける必要はなかったんですが、敢えて分けてみました。
アイコンの作り方については、「アイコンの作り方」の項をご参照ください。

地図上にアイコンを設置する

マーカーをオリジナルのアイコンに変更するには、マーカーの指定部分に、以下のように追記します。(※ハイライトされた行が追記部分。)

  /* アイコン設定 */
  var icon = new google.maps.MarkerImage('ico_lopan.png',
    new google.maps.Size(82,42),
    new google.maps.Point(0,0),
    new google.maps.Point(31,42)
  );
  var shadow = new google.maps.MarkerImage('ico_lopan.png',
    new google.maps.Size(82,42),
    new google.maps.Point(0,42),
    new google.maps.Point(31,42)
  );
  var markerOptions = {
    position: latlng,
    map: map,
    icon: icon,
    shadow: shadow,
    title: '新宿駅'
  };
  var marker = new google.maps.Marker(markerOptions);

前半部分で、アイコンに使う画像iconという変数に、アイコンの影に使う画像shadowという変数に、それぞれ入れています。画像の表示方法について、以下の事を定義する事ができます。

表示し始める起点と原点基準

  • google.maps.MarkerImageでは、使用する画像ファイルを指定します。
  • google.maps.Sizeでは、指定した画像のサイズ(x, y)で定義します。
  • 1つめのgoogle.maps.Pointでは、指定した画像を表示し始める起点(x, y)で定義します。
    アイコン画像は左上からなので(0, 0)に、影の画像はxは0、yは上から42pxの地点からなので(0, 42)となります。
  • 2つめのgoogle.maps.Pointでは、指定した画像の原点基準(x, y)で定義します。
    ここで指定した点がpositionで指定した座標の位置となるように配置されます。

shadowというプロパティは使えなくなりました…‡(!
Google マップも全体的にフラットでマテリアルなデザインになってるので、影は作らない方がよいです…X(。

ここまでで、以下のような表示結果となります。

目次に戻る

Google マップのコントロールセットを取っ払ってスッキリさせる

Google maps APIではデフォルトで、Google マップのコントロールセットが表示されます。表示されるコントロールは以下の通り。

デフォルトで表示されるコントロールセット

ズーム コントロール
+-でズームレベルを変更する。地図のサイズが400×370px以上の場合と、400×370px未満の場合とで、表示が変わります。
移動 コントロール
上下左右の矢印で地図を移動する。地図のサイズが400×370px未満の場合は、表示されません。
マップ タイプ コントロール
地図航空写真などのマップ タイプを変更する。幅が300px以上の場合は並列表示、300px未満の場合はドロップダウン表示になります。
ストリートビュー コントロール
ペグマンを地図上にドラッグして、ストリートビューを有効にする。地図のサイズが400×370px以上の場合は移動 コントロールの下、400×370px未満の場合は左上に表示されます。

デフォルトコントロールセット

デフォルトのコントロールセットを無効にする

これらデフォルトの設定をすべて取っ払いたい場合は以下のようにコードを追記します。

  var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true
  };

disableDefaultUItrueにするだけ。この一行で、Google マップのデフォルトのコントローラーをいっぺんに取っ払うことができます。

このプロパティは、Google Maps API のすべての自動の UI 動作を無効にします。

参照:Controls | Google Maps JavaScript API | Google Developers

デフォルトのコントロールセットを取っ払った結果、以下のような表示となります。

コントロールの表示を個別で指定するためのプロパティ

コントロールの表示/非表示を個別に設定するには、以下のプロパティで設定できます。trueで「表示する」、falseで「表示しない」です。

panControl: true(移動 コントロールの表示)
移動コントロールを有効または無効にします。
zoomControl: true(ズーム コントロールの表示)
ズーム コントロールを有効または無効にします。
mapTypeControl: true(マップ タイプ コントロールの表示)
マップ タイプ(地図や航空写真など)を切り替えるマップ タイプ コントロールを有効または無効にします。
scaleControl: true(スケールの表示)
簡単な地図縮尺を表示するスケール コントロールを有効または無効にします。
streetViewControl: true(ペグマンの表示)
ストリートビューを有効または無効にするペグマンを、表示または非表示にします。
rotateControl: true(回転コントロールの表示)
45 度画像の向きをコントロールする回転コントロールの表示を有効または無効にします。デフォルトではこのコントロールの表示は、現在表示されているズームと場所での指定されたマップ タイプに 45 度画像があるかどうかで決まります。
overviewMapControl: true(概観マップの表示)
概観マップを有効または無効にします。概観マップ コントロールは、完全に表示(サムネイル概観マップを表示)するか、折りたたんで最小化した状態で表示することができます。デフォルトは、コントロールは無効で、折りたたまれた状態です。

その他にもオプション設定が出来たりします。詳しくはこちらをご参照ください!

目次に戻る

地名などごちゃごちゃしてる文字情報を取っ払ってシンプルにする

Google マップには、「スタイル付き地図StyledMapType)」と称する方法で、地図自体をカスタマイズする事ができます。

スタイル付き地図を使用すると、Google 標準の基本地図の表現方法をカスタマイズできます。道路、公園、市街地などの構成要素の視覚的表示を変更して、デフォルトのマップ タイプで使用されるものとは異なるスタイルを反映できます。

参照:Styled Maps | Google Maps JavaScript API | Google Developers

スタイル付き地図を使ったカスタマイズ

地図上の地名などの文字情報を取っ払うにはこのスタイル付き地図を使用します。
スタイル付き地図を使用して文字を取っ払うと、以下のようになります。

文字を消すには以下のコードを追記します。

  /* スタイル付き地図 */
  var styleOptions = [{
    featureType: 'all',
    elementType: 'labels',
    stylers: [{ visibility: 'off' }]
  }];
  var lopanType = new google.maps.StyledMapType(styleOptions);
  map.mapTypes.set('noText', lopanType);
  map.setMapTypeId('noText');

スタイルの指定方法

  var styleOptions = [{
    featureType: 'all',
    elementType: 'labels',
    stylers: [{ visibility: 'off' }]
  }];

上記の記述で、地図に適用させるスタイルを指定しています。記述の流れは以下の通り。

  1. featureTypeで、地図上のどの対象物に適用するか選択し、

  2. elementTypeで、その対象物のどの要素に適用するかを選択し、

  3. stylersに、適用するスタイラを指定する。

今回の、文字を取っ払うための記述では、以下のような流れになってます。

  1. 対象物として、all(すべて)を選択し、

  2. 要素として、labels(テキスト要素)を選択し、

  3. スタイラで、visibility(表示状態)offに指定した。

Google マップを構成する対象物とその要素

Google マップは、道路とか公園などの対象物の集合体で構成され、一部の対象物は、描画された「線や図形の要素geometry)」と、地名や標識を表す「テキストやラベルの要素labels)」とで構成されています。
下図は、左がデフォルトの状態、真ん中はテキストやラベルの要素を取っ払ったもの、右は線や図形の要素を取っ払ったものです。

Googleマップを構成する対象物と要素

作成したスタイルをマップ タイプに登録する

  var lopanType = new google.maps.StyledMapType(styleOptions);

ここで、lopanTypeという名前のStyledMapType(スタイル付き地図)を作成しています。括弧の中(引数)には、上で指定したスタイルstyleOptionsを指定しています。

  map.mapTypes.set('noText', lopanType);
  map.setMapTypeId('noText');

スタイル付き地図というのは、StyledMapTypeとあるように、スタイル付きの「マップ タイプ」です。Google マップの右上に表示される「地図」とか「航空写真」と並ぶ、別の表示タイプを登録する事ができる、という事です。たぶん。

なので、例えば以下のように記述すれば、作成したスタイル付き地図を、右上のマップ タイプ コントロールとして表示させる事ができます。

目次に戻る

サイトの雰囲気に合わせて地図の色を統一する

地図の色を変えるのにも、スタイル付き地図を使用します。

  var styleOptions = [{
    featureType: 'all',
    elementType: 'labels',
    stylers: [{ visibility: 'off' }]
  }];

上記のstylers: [{ visibility: 'off' }]のところを、色に関する指定にすれば、色を変更する事ができます。
スタイラでサポートされている、色に関するオプションは、以下の通り。

スタイル付き地図の色に関するオプション

  • hue

    基本色を指定できます。#593869などのRGBの16進文字列で指定。

    hue
  • lightness

    明度を調整できます。-100(暗い)+100(明るい)です。デフォルトは0

    lightness
  • saturation

    彩度を調整できます。-100(くすんだ)+100(鮮やか)です。デフォルトは0

    saturation
  • gamma

    階調度を調整できます。0.01(コントラストが高い)10.0(コントラストが低い)です。デフォルトは1.0

    gamma
  • invert_lightness

    現在の明るさを反転できます。true(反転する)false(反転しない)です。

    invert

スタイル付き地図を使った色のカスタマイズ

以下のように記述すれば、下のサンプルのように色を変更する事ができます。
線や図形の基本色を#6d4d38にして、彩度を下げて、コントラストを上げてみました。

  var styleOptions = [{
    featureType: 'all',
    elementType: 'labels',
    stylers: [{ visibility: 'off' }]
  }, {
    featureType: 'all',
    elementType: 'geometry',
    stylers: [{ hue: '#6d4d38' }, { saturation: '-70' }, { gamma: '0.5' }]
  }];

はい、統一されましたね。
…けどなんかモノトーンで味気ないし、テキストが全くないってのも分かりズライ。海の色は水色にしたいし、地上の色はもっとベージュっぽくしたいし、テキストも、地名と駅の名前だけは表示させたいなぁ…。

そんな時はfeatureTypeelementTypeで、どの対象物にスタイルを適用するかを細かく指定してやる必要があります!
featureType(対象物タイプ)」の指定に使用できる値は以下の通り現在)

指定できる対象物とその子対象物

  • all

    all

    地図上の対象物タイプすべてを選択する事ができます。
    表示倍率によって、表示される対象物の描画が異なるので、右の図では上からzoom: 18zoom: 15zoom: 12zoom: 8、の時の表示を載せてます。
    また、対象物タイプには、さらに詳細に選択できる子対象物というのも用意されています。

  • administrative

    administrative

    地図上の行政領域を選択します。
    国境・県境などの線や図形、国名・市区町村名などの地名を含みます。

    • administrative.country(国)
    • administrative.land_parcel(区画)
    • administrative.locality(地区・市区)
    • administrative.neighborhood(周辺地域)
    • administrative.province(州・県)
  • landscape

    landscape

    地図上の風景を選択します。
    建物・山などの線や図形、建物・島・山・川・峠・湖などの名称を含みます。

    • landscape.man_made(人造物)
    • landscape.natural(自然物)
  • poi

    poi

    地図上のランドマークを選択します。
    学校・病院・駅・公園・工場・遊園地・大きいお店やビルなどの線や図形、それらの名称を含みます。

    • poi.attraction(観光地)
    • poi.business(ビジネス)
    • poi.government(政府機関)
    • poi.medical(緊急サービス)
    • poi.park(公園)
    • poi.place_of_worship(宗教関係の施設)
    • poi.school(学校)
    • poi.sports_complex(スポーツ施設)
  • road

    road

    地図上のすべての道路を選択します。
    高速道路・国道・県道・市道などの線や図形、それらの名称や国道標識・県道標識・信号機アイコンを含みます。

    • road.arterial(幹線道路)
    • road.highway(高速道路)
    • road.local(地方道)
  • transit

    transit

    地図上のすべての交通機関の駅と路線を選択します。
    線路・航路・空路・空港などの線や図形、線路名・駅名・空港名駅・バス停留所アイコンを含みます。

    • transit.line(交通機関の路線)
    • transit.station(交通機関の駅)
    • transit.station.airport(空港)
    • transit.station.bus(バス停留所)
    • transit.station.rail(鉄道駅)
  • water

    water

    地図上の水域を選択します。
    海・川・湖・プールなど水のある場所の線や図形、海・洋・湾の名称を含みます。

より細かく色指定してみる

より細かく設定してみました。
地面の色をベージュにして、市区名と駅名を焦げ茶色で表示。道路は、一般道を白に、高速道路を黄色に。ランドマークはビジネス系のみオレンジ色で表示。あとは、水域を水色に、公園を緑に、といった感じにしました:)。

目次に戻る

お店の前に行列を作る

Google マップ上に画像を貼り込む事ができます。前述のマーカーやアイコンとは違い、表示倍率によって拡大・縮小する事ができるので、あたかも地図に貼り込んだみたいに表示できます。
お店の前にお客さんの画像を貼って行列のできるお店を演出したり、お店の特徴や目印になるものを描き足したりしても面白いかもですね:)。
ここでは新宿駅の前にペグマンの行列を作ってみましたXD。
(※あまり拡大しすぎると画像が荒いのが目立っちゃうので、ズームレベルを制限したりしてます。)

行列の画像をつくる

行列の作り方

ここでは行列の画像ですが、画像は何でも良いです。
作る時のポイントとして、実際に貼り付ける地図をガイドにして作ると間違いないです。それもできるだけズームアップした状態で作っておくと良いと思います。今回は、右図のように、zoom: 18にしたGoogle マップのキャプチャ(スクリーンショット)を下に敷いて、それに合わせて画像を作りました。

画像を貼るためのコード

画像を追加するには下記コードを追加しました。(※コードのほとんどは、こちらのサンプルで使われているもののコピペです…)

var overlay;
function initialize() {
  
  〜中略〜
  
  /* カスタム オーバーレイ */
  var neBound = new google.maps.LatLng(35.693555, 139.70108); // NorthEast(北東)上, 右
  var swBound = new google.maps.LatLng(35.691792, 139.700375); // SouthWest(南西)下, 左
  var bounds = new google.maps.LatLngBounds(swBound, neBound);
  var srcImage = 'pegman.png';
  overlay = new USGSOverlay(bounds, srcImage, map);
}

/* カスタム オーバーレイ */
function USGSOverlay(bounds, image, map) {
  this.bounds_ = bounds;
  this.image_ = image;
  this.map_ = map;
  this.div_ = null;
  this.setMap(map);
}

USGSOverlay.prototype = new google.maps.OverlayView();

USGSOverlay.prototype.onAdd = function() {
  var div = document.createElement('div');
  div.style.border = 'none';
  div.style.borderWidth = '0px';
  div.style.position = 'absolute';
  var img = document.createElement('img');
  img.src = this.image_;
  img.style.width = '100%';
  img.style.height = '100%';
  div.appendChild(img);
  this.div_ = div;
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
}

USGSOverlay.prototype.draw = function() {
  var overlayProjection = this.getProjection();
  var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
  var div = this.div_;
  div.style.left = sw.x + 'px';
  div.style.top = ne.y + 'px';
  div.style.width = (ne.x - sw.x) + 'px';
  div.style.height = (sw.y - ne.y) + 'px';
}

USGSOverlay.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
}

画像を貼るだけだろ?なんて安易に考えてましたが、なんだか無情に複雑でした…。Google マップに画像を貼り込むには、いろいろな手続きが必要なようです。
ひとつずつ見ていきましょう。
まず、initialize()の中で下記を記述しています。

  var neBound = new google.maps.LatLng(35.693555, 139.70108); // NorthEast(北東)上, 右
  var swBound = new google.maps.LatLng(35.691792, 139.700375); // SouthWest(南西)下, 左
  var bounds = new google.maps.LatLngBounds(swBound, neBound);
  var srcImage = 'pegman.png';
  overlay = new USGSOverlay(bounds, srcImage, map);

ここではオーバーレイのサブクラス化というのをしてるらしいです。
パッと見分かるのがgoogle.maps.LatLngBoundsというのが、どうやら画像を貼り込む座標位置らしいぞ、ということ。
画像の右上角左下角の点を置く座標位置を指定します。アイコンの時と指定方法が違います。ので、プレビューを見ながらの微調整が必要でした…X(。(※簡単な設置の仕方があれば教えて欲しいです…!)
で次に、すべてのプロパティを初期化→OverlayView を明示的に USGSOverlay のサブクラスとして指定します。僕にはまだ敷居が高過ぎたようです。

function USGSOverlay(bounds, image, map) {
  this.bounds_ = bounds;
  this.image_ = image;
  this.map_ = map;
  this.div_ = null;
  this.setMap(map);
}
USGSOverlay.prototype = new google.maps.OverlayView();

そしてさらに、以下でオーバーレイの初期化を行います。

画像を保持する <div> を作成し、<img> 要素を追加し、それを <div> に貼り込み、最後にオーバーレイを、地図の「ペイン」(DOM ツリーのノード)の 1 つに貼り込みます。

USGSOverlay.prototype.onAdd = function() {
  var div = document.createElement('div');
  div.style.border = 'none';
  div.style.borderWidth = '0px';
  div.style.position = 'absolute';
  var img = document.createElement('img');
  img.src = this.image_;
  img.style.width = '100%';
  img.style.height = '100%';
  div.appendChild(img);
  this.div_ = div;
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
}

ここはなんとなく分かるかも。上記で作成したオーバーレイに、

<div><img src="pegman.png" width="100%" height="100%" /></div>

を作成してる感じですね。
そして次に、ついにオーバーレイの描画になります。

USGSOverlay.prototype.draw = function() {
  var overlayProjection = this.getProjection();
  var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
  var div = this.div_;
  div.style.left = sw.x + 'px';
  div.style.top = ne.y + 'px';
  div.style.width = (ne.x - sw.x) + 'px';
  div.style.height = (sw.y - ne.y) + 'px';
}

オブジェクトの右上隅と左下隅を固定する座標を計算し、これに基づき <div> のサイズを変更します。

overlayProjection.fromLatLngToDivPixelで、座標の値を、<div id="map_canvas">内の左上を原点としたピクセル値に変換しています。
例えば画像が下図の位置にある場合は、こんな感じで取得するのかな?

カスタムオーバーレイ

ne.x(右上のX値)-sw.x(左下のX値)=<div>width(幅)に指定、
sw.y(左下のY値)-ne.y(右上のY値)=<div>height(高さ)に指定。

サンプルのペグマンの行列画像は以下のようになってました。初期の状態では画像の上部が見切れちゃってるため、ne.y(右上のY値)がマイナス値ですね。

  • sw.x(左下のX値) = 340.9762666635215
  • sw.y(左下のY値) = 64.38758346624672
  • ne.x(右上のX値) = 373.8316479995847
  • ne.y(右上のY値) = -36.777141883037984
  • div.style.width(幅) = 32.8554px
  • div.style.height(高さ) = 101.165px

そして最後に、以下を行います。なぜこれを行うのか、僕からは説明できません。

地図からオーバーレイをきれいに削除するための onRemove() メソッドを追加します。

USGSOverlay.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
}

以上!

目次に戻る

あとがき

いやはや長く重い記事になってしまいました。時間のある時にちょっとずつ書き進めていったので、通してみるとツギハギな感じが否めませんね。読みズライ文章になっちゃいましたが、最後まで読んでくれた方、ありがとうございました!Google Maps APIについてはまたいつか、今度はもっと短編に、分かりやすく、まとめたいと思います。

さて、ここで紹介した以外にも、まーだまだ色んな事ができるGoogle Maps API。

  • マーカーをクリックした際に出る情報ウィンドウ(吹き出し)をカスタマイズできたり、
  • ストリートビューのコントロールを細かく指定する事ができたり、
  • Panoramioの写真を地図上に配置できたり、
  • ポリラインを使えば、最寄り駅から目的地までの経路を線で描画できたり、
  • ルート サービスを使えば、開始位置から終了位置までのルートを計算して表示してくれたり、その距離や所要時間まで表示できるらしい!

詳しくは以下のサイトで…!

今回参考にさせて頂いたサイトです。

サンプル付でいろいろ紹介されてますので、もっと詳しく勉強したい方は必読!

※地図で使用した「オーストラリアのニューサウスウェールズ州のシドニー」、「新宿駅」と「Lopan cafe」とは一切関係がありませんので、あしからず。

改めておさらいしてみました→!Google Maps APIのおさらい。(2012.9.30)

  • このエントリーをはてなブックマークに追加
  • ツイート

Comment & Pingback

35 Comments! for Googleマップをイラストマップみたいにしたい。

  1. Pingback: ワンランク上のサイトデザインを目指して、Googleマップのカスタマイズに挑戦してみた! - ウェブ企画ラボ

  2. Pingback: Googleマップの色やスタイルを簡単にテストできる「スタイル化マップ ウィザード」 | hacknote

  3. transel

    通りすがりの者です。
    スタイルの変更など参考にさせていただきました、ありがとうございます。

    landmarkとpoiの違いについてですが、恐らく建物はlandmark表示で、
    店舗や会社として登録されている地点がpoi表示になるのでは?と思います。
    そしてpoiの中でも、例えばロードサイド型の飲食店や「伊勢丹」「ヨドバシカメラ」などの百貨店系、
    寺院や神社、学校など、建物まるごとその登録名が当てはまる場所は地形(建物)もpoiに分類されるのではないかと。
    東京のスカイツリーや大阪の通天閣など、観光地系で文字通りランドマークとなるようなひときわ大きな建物は、
    例外的にlandmarkで地形が表示され、poiで地点名称が表示される感じです。
    ただしlandmarkは縮尺が小さいと表示されなくなるみたいですね。

    大きな駅などでホーム内がlandmark、駅舎がpoiな理由が不明ですが・・・
    その他の大体の場所はこの法則に当てはまっているような気がします。
    (間違ってたらすみません・・・)

    Reply

    • _watercolor

      > 通りすがりのtranselさん

      細かな考察ありがとうございます!
      そうなんです、、4年のうちにいろいろ変わっちゃってるんですよね…X(。
      大まかな分類はあまり変わっていないと思うのですけれど、細かな部分がちょこちょこ更新されてるみたいです。

      ですので、細かな部分の調整は「Google Maps API Styled Map Wizard」という公式Webアプリ(?)を使うと良いですX)。
      Google Maps APIのおさらい。という記事で、使い方を少し解説しているので、よろしければ是非!
      いま久しぶりに見てみたらURL変わってました…(こっそり直しておきました…)。

      こんな記事でも参考にしていただけてすごく嬉しいです。
      定期的な見まわりは大事だな、と強く思えたコメントでした。。
      今後ともLopan.jpをどうぞよろしくです!

      Reply

  4. benatawa

    度々、お世話になっております 笑
    非常に明確、的確な解説をして頂き助かります。
    もうひとつお聞ききしたいことがあります。

    【ブラウザキーの作成と許可対象リファラーの設定という長い名前のダイアログボックスが開くので、ここに、このAPIの利用を許可するURLを、1行につき1つずつ入力します。】のところで…
    私の場合は何を(?)入力するのか…?
    わたしは、web上で使用したい訳でなく、プリントスクリーンでの地図下地に使いたいんです。
    会社案内地図をシンプルかつ、かっこよく作りたくて…それだけなのですが…
    そういう場合は、どうすればいいのでしょう。

    Reply

    • _watercolor

      > benatawaさん
      どうもです。
      むむー、webではなくて印刷用でしたか…X)。
      Google マップを下地にしてなぞってイラストマップにするということならば、Google Maps API を使うよりも、いつもの「Google マップ」で十分な気がします:)。
      ※Google マップをそのまま印刷すると、解像度が小さくボヤけてしまうので、印刷用には不向きなのです。。
      Google マップで目的の場所を検索して、スクリーンショットしたものを下地にしてグラフィックソフト(Adobe Illustratorとか)などでなぞってイラストマップにします。

      「マイマップ」というのを使えば、“画面解像度の4倍のという高解像度”で印刷することもできるみたいです:D。
      詳しくは下記ページをご参照くださいませー。

      Reply

  5. benatawa

    早々のお返事に感謝しております゛゛               
    〝「Google Maps API」の一覧の中から必要なAIP ライブラリを選択。″→とは、「Google Maps JavaScript API v3」だけで、いいのですよね(?)
    、「Google Maps JavaScript API v3」だけを有効にすると、有効なARI(11)となり、もう一度すべて無効でクリアにし、再び、「Google Maps JavaScript API v3」を有効にする作業をすると今度は(9)となります。なぜ(?)

    Reply

    • _watercolor

      > benatawaさん
      どうもです:)
      そうです、「Google Maps JavaScript API」だけで大丈夫です!

      有効なAPIが11個も…、なんでだろう…。。X(
      初期状態だとBigQuery APIや、Google Cloud SQLなど、計6つのAPIが有効になってるみたいです(2015.7.20現在)…。
      けど、利用しないサービスは、個別に無効にしちゃって問題ないと思います:D。

      API キーの取得のところ、こっそり修正しましたーX)。ので、よろしければご参考まで。。
      念のため、修正前のものも残しておきますね(画像ですけど…)。

      Reply

  6. benatawa

    APIキーの取得ですでに引っかかります笑
    何度チャレンジしてもhttps://code.google.com/apis/consoleのページに飛べず、一瞬画面が映るのですが直ぐ自動的に概要というページに切り替わります。参照画像の3つ目からすでに私のパソコンに映るページとは異なったものでした。「Google Maps JavaScript API v3」を探してonにするのは出来ましたが…それも教えてくださる画面とは違いGoogle Maps APIという所に折りたたまれていました。次に、サイドメニューに「Credentials」はなく同じ名前や「Create new Key」なども見つけられません。どうしたらいいのでしょう..。

    Reply

    • _watercolor

      > benatawaさん
      コメントありがとうございます!
      そうなんですー…X(。ページのレイアウトとかUIがどんどんリニューアルされてて…、
      記事内の解説と違うところが多々あって、余計なお手数かけさせてしまってごめんなさい! いつか修正しなきゃと思ってます!

      コメントいただいたところですが、日本語訳されてて、赤かったボタンが青くなってますね…。手順を復習してみます!

      1. まずは下記にリンクして、プロジェクトを作成します。
        https://console.developers.google.com/project
        プロジェクト作成が完了すると「概要」というページに移動すると思います。

      2. 左のメニューから「API」を選択して、「Google Maps API」の一覧の中から必要なAIP ライブラリを選択。(長い一覧から探し出す必要がなくなって便利になりましたねー:D)

      3. 「API を有効にする」ボタンをクリック。「API」のページに戻ると、上のタブが「有効な API(7)」となってて、選択したAPI ライブラリが追加されてると思います。

      4. 左のメニューから「認証情報」を選択して、「公開 API へのアクセス」という項目の「新しいキーを作成」ボタンをクリック。

      5. 「新しいキーの作成」というウィンドウが開くので、「ブラウザキー」ボタンをクリック。

      6. 「ブラウザキーの作成と許可対象リファラーの設定」で、APIを使用するサイトのURLを、1行につきひとつずつ入力して、「作成」ボタンをクリック。

      7. 「公開 API へのアクセス」に、「ブラウザ アプリケーションのキー」が追加されると思いますので、この「API キー」を使います。

      画面の画像がなくてわかりにくいかもですが…。取り急ぎ!どうぞよろしくですX(!
      コメントいただきありがとうございましたーXD!

      Reply

  7. Pingback: 白黒のGoogleマップを出力したい。と言われたので調べてみた。 | @attrip (アットトリップ)

  8. logic3code

    スーパー参考になる!ありがとうございます。

    Reply

    • _watercolor

      > logic3codeさん
      コメントありがとうございます!
      そう言っていただけると、書いてよかったなって嬉しいです。
      今後ともいい記事書きたいLopan.jpをよろしくです;)。

      Reply

  9. Pingback: ワンランク上のサイトデザインを目指して、Googleマップのカスタマイズに挑戦してみた! | 株式会社WEB企画スタッフブログ

  10. 奈良

    非常に参考になりました。
    ほんと、凄い人がいるもんです。感心しました。

    Reply

    • _watercolor

      > 奈良さん
      参考にしていただけて嬉しいですー!
      ありがとうございます!

      Reply

  11. Pingback: Googleマップのお手軽カスタマイズ!Styled Maps Wizardの使い方 | 株式会社LIG

  12. Pingback: PROTOTYPE DESIGNS » Blog Archive » Googleマップのカスタマイズ

  13. Amada

    とても参考になりました。ありがとうございます!

    Reply

    • _watercolor

      > Amadaさん
      コメントありがとうございます!
      参考にしていただけて嬉しいですー。

      Reply

  14. _watercolor

    ちょっとメモ。
    信号機って"rode"に含まれなくなったのかな…。

    Reply

  15. shigeg

    コメントを書くことなんて滅多にないのですが・・・素晴らしい記事です。
    参考にさせていただきましたし、シェアさせていただきました。
    ありがとうございます。

    Reply

    • _watercolor

      > shigegさん
      コメントありがとうございます!
      ごちゃごちゃした記事ですが、、参考にしていただけたら嬉しいですX)!
      今後ともLopan.jpをよろしくお願いします;)。

      リンク先の「CURVY GROUND Kitchen」のサイト、素敵ですね!
      飲食店を経営されてるんですか?
      ロゴがとってもかわいいです。

      Reply

  16. Pingback: GoogleMapのカスタマイズ | 作業の覚え書き

  17. as

    画像つきで分かりやすい解説ありがとうございます!ものすごく助かりました!

    Reply

    • _watercolor

      > asさん
      コメントありがとうございます!
      参考にしていただけて嬉しいですー:D!

      Google マップもできることがどんどん増えてるので、折を見て更新しないとなーと思ってますX)。

      Reply

  18. Pingback: ウェブ屋の備忘録 » Blog Archive » Google Mapをおしゃれにしちゃお

  19. Pingback: GOOGLE MAPS JAVASCRIPT APIで複数の地図表示と、色の調整 | remember-it

  20. Pingback: プログラミング参考サイト | android manifest configChanges

  21. yuki

    すごく参考になりました。丁寧な説明ありがとうございます。これからもfollowさせていただきます!

    Reply

    • _watercolor

      ありがとうございます!すっごく嬉しいです!
      上のサンプルが、最初に作った時と見た目が変わっちゃってる気がするので、近々まとめ直したいと思ってます。
      今後ともよろしくです:)。

      Reply

      • _watercolor

        > 上のサンプルが、最初に作った時と見た目が変わっちゃってる気がするので、
        →改めて見てみたら「visibility: ‘simplified’」が「visibility: ‘simplifed’」になっちゃってました。
         修正したら元通り!いつの間に変えたんだか…X)。

        Reply

  22. Pingback: メモ20120723 | Nacky – Snowland.net

コメントを残す

*がついている欄は必須項目です。