まだプログラマーですが何か?

プログラマーネタ中心。たまに作成したウェブサービス関連の話も https://twitter.com/dotnsf

タグ:maps

むかーしから存在している技術なのですが、イメージマップという便利な機能があります(最近あまり使われなくなったという印象もあります)。これは HTML ページ内の画像内にクリッカブルな領域を複数定義し、いずれかの領域がクリックされたら何らかの処理を行う、というものです。クリックされる領域によって処理内容(このページにジャンプするとか、この JavaScript 関数を実行するとか、・・)を変えることができる、というものです。

例えばこんな感じで実現します。いらすとやさんの『ホワイト企業~ブラック企業のイラスト』を例に紹介します:



このイラスト画像は横650ピクセル、縦137ピクセルです。その中にホワイト企業~ブラック企業が5段階のイラストで表示されています。

画像の左上の座標を ( 0, 0 ) とすると、このうち一番左の企業は、そのビルの矩形部分は左上が ( 37, 13 ) から右下 ( 100, 127 ) という矩形でできています。いま、このビルの矩形部分がクリックされたら "white" というメッセージを表示するようにしてみます:
2019100701


同様にして、5つのビルそれぞれにクリッカブルな矩形部分を定義し、それぞれがクリックされた時に以下のようなメッセージが表示されるようにしてみます:
ビル番号(左から何番目のビル)矩形範囲クリックされた時のメッセージ
1 ( 37, 13 ) - ( 100, 127 ) white
2 ( 165, 13 ) - ( 227, 127 ) lightgray
3 ( 291, 13 ) - ( 355, 127 ) gray
4 ( 481, 13 ) - ( 483, 127 ) darkgray
5 ( 546, 13 ) - ( 610, 127 ) black


これをイメージマップで実現すると、 HTML の該当箇所は以下のようになります:
<body>
  <div class="container">
    <img src="https://1.bp.blogspot.com/-BmJohMucVBI/XYhOV_VMQmI/AAAAAAABVHA/sZF8lMjPedUWSkxBwUGZXmVri2OFKEZ4gCNcBGAsYHQ/s650/company_white_black_kigyou_5dankai.png" border="0" usemap="#image_map"/><br/>
    <map name="image_map">
      <area shape="rect" coords="37,13,100,127" href="javascript:alert( 'white' )"/>
      <area shape="rect" coords="165,13,227,127" href="javascript:alert( 'rightgray' )"/>
      <area shape="rect" coords="291,13,355,127" href="javascript:alert( 'gray' )"/>
      <area shape="rect" coords="418,13,483,127" href="javascript:alert( 'darkgray' )"/>
      <area shape="rect" coords="546,13,610,127" href="javascript:alert( 'black' )"/>
    </map>
  </div>
</body>

<img> タグの usemap 属性でイメージマップの名称を定義します。そして <map> タグを使って、対象(name 属性で指定)の <img> のクリッカブル領域と、クリックされた時のハンドラを href 属性に定義します。上記例ではハンドラを javascript 関数の実行にしていますが、普通に URL を記述すればリンクを作成することもできます。

これで各ビルをクリックした時に、(左から順に)"white", "lightgray", "gray", "darkgray", "black" というメッセージが表示されるようになります。元は1枚の画像でしたが、クリッカブルな領域を5箇所定義することができ、それぞれのクリックハンドラを個別に設定することもできました:

(左から2番めのビルをクリックした時の様子)
2019100703


ここまでが普通のイメージマップです。このイメージマップ、非常に便利な反面で「レスポンシブ対応が難しい」という難点がありました。要はクリッカブルな矩形領域をピクセル絶対値で指定しているため、画像がそのまま表示された場合はいいのですが、レスポンシブ対応などで画面サイズに合わせて拡大縮小されて画面いっぱいに表示された場合、縮尺が変更になってしまい、絶対値で指定していたイメージマップの定義がおかしくなってしまうのでした。

具体的に同じコードをスマホのシミュレーターで確認した結果、下の赤点線部が "lightgray" のクリッカブル矩形部分となっていて、本来の位置からズレていました。これをどうにかしたい、というのが今回のテーマです:
2019100702


色々と調べましたが、答としては jQuery RWD Image Maps という jQuery プラグインを使うことで解決できました:
2019100700



以下に具体的な対応手順を紹介します。

まず HTML 内でレスポンシブのための宣言をしておきます。例えば以下のようなコードが既に含まれているものと仮定します:
  :
<meta name="viewport" content="width=device-width,initial-scale=1"/>
  :


次に jQuery と jQuery RWD Image Maps をロードします。以下の例では CDN からそれぞれをロードしています(jQuery RWD Image Maps の方を後にロードする必要があります):
  :
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js"></script>
  :

CSS で画像サイズの調整を行います。この例ではイメージマップを用いる画像の横幅を 100% に、高さは自動調整するように指定しています:
  :
<style>
img[usemap]{
  max-width: 100%;
  height: auto;
}
</style>
  :

そして最後に JavaScript で該当部分に RWD Image Maps を適用します:
  :
<script>
$(function(){
  $('img[usemap]').rwdImageMaps();
});
</script>
  :

これでスマホでおなじページにアクセスした時でもイメージマップの矩形部分がズレることなく利用できるようになりました:
2019100704




業務やプライベートでウェブアプリを作る際に colorbox を使う機会が少なからずあります。jQuery に対応したモーダルダイアログの軽量プラグインで、メイン画面にオーバーラップするダイアログ画面を呼び出し、ダイアログを閉じるまではメイン画面が使えなくなります。HTML 的な言い方をすると、ボックス領域の表示/非表示を切り替えつつ、ここが表示されている間は他の要素にアクセスできなくさせたい場合などに便利です。

加えて、個人的によく Google MAPs API を使った地図アプリを作っています。他にも多くの地図 API はありますし、実際に使うこともありますが、ストリートビューなど他にはない機能もあって、マンホールマップを始め、多くのアプリで Google MAPs API を活用しています。

今回紹介するのはこの2つを組み合わせて使う方法、つまり colorbox のモーダルダイアログ内で Google MAPs の地図を表示する方法です。特に考慮することなく普通に(colorbox で表示する領域の中に Google MAPs の地図領域を定義しておくだけで)使えそうな気がしていたのですが、どうもこれらの初期化処理時における相性があまりよくないようで、ちょっとしたコツが必要だということがわかりました。

この「ちょっとしたコツ」の結論は
・colorbox のダイアログを表示して、
ダイアログの表示が完了した後で Google MAPs を初期化してダイアログ内に表示する
という順序で実現する必要がありそうでした。一般的には HTML ページの初期化時に Google MAPs を初期化することが多いと思うのですが、colorbox と組み合わせて使う場合は、その初期化タイミングをダイアログの表示後に(ダイアログの表示が完了したことを検知した上で動的に)行う必要がありそうでした。


以下は具体的な実現方法です。まず jQuery や colorbox、Google MAPs API の JavaScript や CSS を一通りロードします(Google MAPs API をロードする際に API KEY の取得と指定が必要です):
  :
<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="//maps.google.com/maps/api/js?key=(your api key)"></script>
<link href="/css/colorbox.css" rel="stylesheet"/>
<script src="/js/jquery.colorbox-min.js" type="text/javascript"></script>
  :

HTML 内に colorbox で表示するモーダルダイアログ部分(id="mapModal")を定義します。ここは初期状態では表示されていてはまずいので display:none のスタイル指定をしておきます。またモーダルダイアログ表示した際にこの id="map_canvas" のブロックの中で Google MAPs の地図を表示することになりますが、初期段階では何も定義しません:
  :
<div style="display:none">
  <div id="mapModal">
    <div id="map_canvas" style="width:100%; height:520px"></div>
  </div>
</div>
  :

ではこのブロックをモーダルダイアログ表示するための colorbox のアクションを作成します。以下の例では <span> で括られたエリア(id="span1")をクリックした時に colorbox のモーダルダイアログを 90% x 90% でインライン表示するようにしています。加えてこのモーダルダイアログが表示されきった直後に $('#map_canvas').modalMap() が実行されるように定義しています:
  :
<span href="#mapModal" id="span1">ここをクリック</span>

<script>
$(function(){
  $('#span1').colorbox({
    inline: true,
    transition: 'none',
    width: '90%',
    height: '90%',
    onComplete: function(){
      $('#map_canvas').modalMap();
    }
  });
});
</script>
  :

↑この時の <span> 要素に href 属性を付けて対象モーダルの id を指定するのが肝のようです。。

最後にこの modalMap() 関数を定義して、この中で動的に Google MAP を初期化して表示するまでのコードを記述します:
  :
<script>
$.fn.modalMap = function(){
  var latlng = new google.maps.LatLng( 35.690625, 139.699788 );
  var opt = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scaleControl: true
  };

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

  var marker = new google.maps.Marker({
    position: latlng,
    map: map
  });
};
</script>
  :

これで <span> 部分をクリックすると colorbox のモーダルダイアログを出し、ダイアログ内で動的にGoogle MAP の地図を初期化&表示する、という一連のコードが完成です:
2019090801

  ↓

2019090802

(↑わかりにくいかもしれませんが、地図部分はモーダルダイアログ表示されています)



グーグルマップは今やナビ代わりにも使えて非常に便利です。

この「グーグルマップでナビをする」という機能を一発で起動する URL を調べてみました。前提条件として GPS 機能が有効になったスマホのブラウザで起動し、現在地から目的地までのナビゲーションを行う画面にジャンプさせたいものとします。結論としては意外と簡単でした。

以下、いくつかのパターンの URL リンクを作成したので、このページを実際にスマホのブラウザで参照した後にリンクをクリックすると実際にナビゲーションを開始することができるので試してみてください。


【原則フォーマット】
具体例を以下に紹介しますが、原則的には以下のフォーマットの URL となります:
https://www.google.co.jp/maps/dir/出発地(/経由地のリスト)/目的地

出発地や経由地、目的地は 緯度,経度 で表します。

例えば(私の職場オフィスがある)東京の銀座シックスの位置は北緯 35.6696206 度、東経 139.7618279 度なので、35.6696206,139.7618279 と表現します。


【直接指定】
現在地から銀座シックスへの道案内は以下の URL です(経由地を指定していません):
https://www.google.co.jp/maps/dir//35.6696206,139.7618279

銀座シックスから東京タワー(35.658886,139.745787)への道案内はこちらの URL です:
https://www.google.co.jp/maps/dir/35.6696206,139.7618279/35.658886,139.745787


【経由地指定】
現在地から東京タワー(35.658886,139.745787)を経由して銀座シックスへ向かう道案内は以下の URL です:
https://www.google.co.jp/maps/dir//35.658886,139.745787/35.6696206,139.7618279

現在地から秋葉原(35.697850,139.771179)と東京タワーを経由して銀座シックスへ向かう道案内は以下の URL です:
https://www.google.co.jp/maps/dir//35.697850,139.771179/35.658886,139.745787/35.6696206,139.7618279


 

このページのトップヘ