2013-10-06

Google Maps API： カスタムオーバーレイ

サンプル
応用例

変更履歴：
・慣例に則って、コンストラクタ名の最初の文字を大文字にした。（2015-11-08）
・メインのコードをhtmlファイルに記載した。（2015-11-08）
・デフォルト値の設定の仕方を変更した。（2015-11-08）
・コンストラクタ内では、.setMap()は実行しないようにした。メインのプログラムで実行するようにした。（2015-11-08）

◆html

7行目： Maps API JavaScript を読み込む。APIキーの取得は〔ﾘﾝｸ〕を参照。
71行目：地図を表示するdiv要素を定義する。
28行目以降：マーカーをオーバーレイする（Google Maps API提供のオーバーレイ）。
40行目以降：htmlをオーバーレイする（カスタムオーバーレイ）。ここではキャプションと画像。
46行目：GMOverlayHtml を用いてマーカーと同様にオブジェクトを作成しています。
54行目：カスタムオーバーレイを表示。
58行目：カスタムオーバーレイを非表示。

尚、[1]のように.show(), .hide()を用いて表示、非表示することもできるが、この場合、.onAdd()が呼ばれるタイミングとの関係でうまく動作しない場合があったため、このような方法とした。

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3.  
  4. <head>
  5. <title>GoogleMapOverlay</title>
  6. <link rel="stylesheet" href="GoogleMapOverlay.css">
  7. <script src="http://maps.googleapis.com/maps/api/js?key=********"></script>
  8. <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  9. <script src="GMOverlayHtml-2.0.js"></script>
  10.  
  11. <script>
  12.  
  13. $(function() {
  14.  
  15.  var map;
  16.  
  17. // Google Map を描画
  18.  var myLat = 51.507136;
  19.  var myLng = -0.076421;
  20.  var point = new google.maps.LatLng(myLat,myLng); //中央の座標を定義
  21.  var myOptions = {
  22.      zoom: 5, //ズームを定義
  23.         center: point,
  24.         mapTypeId: google.maps.MapTypeId.ROADMAP
  25.     };
  26.   map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
  27.  
  28. // Marker を overlay
  29.  var image = new google.maps.MarkerImage('images/place.png',
  30.      new google.maps.Size(16, 16),
  31.        new google.maps.Point(0,0),
  32.        new google.maps.Point(8, 8)
  33.  );
  34.  var marker = new google.maps.Marker({
  35.      position: point,
  36.         map: map,
  37.   icon: image
  38.     });
  39.  
  40. // html を overlay（カスタムオーバーレイ）
  41.  var content = '<div style="background-color:darkgray; border: solid 1px;">';
  42.   content += '<p>London</p>';
  43.   content += '<img src="images/001.jpg"></div>';
  44.  var offsetX = 10;
  45.  var offsetY = 10;
  46.  var overlayHtml = new GMOverlayHtml({
  47.   position: marker.getPosition(), 
  48.   content: content, 
  49.   offsetX: offsetX, 
  50.   offsetY: offsetY
  51.  });
  52.  
  53.    google.maps.event.addListener(marker, 'mouseover', function() {
  54.      overlayHtml.setMap(map);
  55.    });
  56.  
  57.    google.maps.event.addListener(marker, 'mouseout', function() {
  58.     overlayHtml.setMap(null);
  59.    });
  60.  
  61. });
  62.  
  63. </script>
  64.  
  65. </head>
  66.  
  67.  
  68. <body>
  69.  <div id="header">Sample</div>
  70.  <hr>
  71.  <div id="map_canvas"></div> 
  72. </body>
  73.                    
  74. </html>

◆コンストラクタ ＧＭOverlayHtml （ＧＭOverlayHtml-2.0.js）

1行目以降：コンストラクタ GMOverlayHtml を定義。新しいオブジェクトのプロパティとして渡されたパラメータを初期化します。このとき、optsに入力がなければデフォルト値が使われます。
20行目：OverlayView を明示的に GMOverlayHtml のサブクラスとして指定します。これは、新しいクラスの prototype を親クラスのインスタンスに設定することで実現します。
22行目以降：プロトタイプの中に onAdd() メソッドを実装し、オーバーレイを地図に貼り込みます。地図でオーバーレイの貼付が可能になると OverlayView.onAdd() が呼び出されます。
39行目以降：プロトタイプ中に draw() メソッドを実装し、オブジェクトの表示を制御します。オブジェクトが最初に表示されたとき、OverlayView.draw() が呼び出されます。
48行目以降：オーバーレイの中に追加した要素を消去するための onRemove() メソッドも実装する必要があります。このメソッドは、オーバーレイの map プロパティを null に設定すると、API が自動的に呼び出します。
以上は参考文献[1]に従っています。

  1. var GMOverlayHtml = function(opts) {
  2.  var defaults = {
  3.   offsetX: 0,        // デフォルト値
  4.   offsetY: 0,        // デフォルト値
  5.   position: null,    // 入力値
  6.   content: null,     // 入力値
  7.  }
  8.  for ( var key in defaults ) {
  9.   if (defaults[key] == null) {
  10.    this[key] = opts[key];
  11.   } else {
  12.    this[key] = defaults[key];
  13.    if (opts[key]) this[key] = opts[key];
  14.   }
  15.  }
  16. }
  17.  
  18. //  以下は、https://developers.google.com/maps/documentation/javascript/customoverlays に従って記載。
  19.  
  20. GMOverlayHtml.prototype = new google.maps.OverlayView();
  21.  
  22. GMOverlayHtml.prototype.onAdd = function() {
  23.         // 何度も呼ばれる可能性があるので、divが未設定の場合のみ要素生成
  24.         if (!this.div) {
  25.           // 出力したい要素生成
  26.           this.div = document.createElement( "div" );
  27.           this.div.style.position = "absolute";
  28.        this.div.style.border = '0px none';
  29.        this.div.style.overflow = 'hidden';
  30.        this.div.style.visibility = this.visibility_;
  31.           this.div.innerHTML = this.content;
  32.           // 要素を追加する子を取得
  33.           var panes = this.getPanes();
  34.           // 要素追加
  35.           panes.overlayImage.appendChild( this.div ); // overlayImage: marker の foreground を含む pane
  36.         }
  37. }
  38.  
  39. GMOverlayHtml.prototype.draw = function() {
  40.         // 緯度、軽度の情報を、Pixel（google.maps.Point）に変換
  41.         var point = this.getProjection().fromLatLngToDivPixel(this.position);
  42.         // 取得したPixel情報の座標に、要素の位置を設定
  43.         // 座標の位置を左上の座標とする位置に要素が設定される
  44.         this.div.style.left = point.x + this.offsetX + 'px';
  45.         this.div.style.top = point.y + this.offsetY + 'px';
  46. }
  47.  
  48. GMOverlayHtml.prototype.onRemove = function() {
  49.   if (this.div) {
  50.     this.div.parentNode.removeChild(this.div);
  51.     this.div = null;
  52.   }
  53. }

◆css

  1. * {
  2.  margin: 0;
  3.  padding: 0;
  4. }
  5.  
  6. html, body {
  7.   height: 100%;
  8. }
  9.  
  10. body {
  11.  overflow: hidden;
  12.  background-color: ivory; 
  13. }
  14.  
  15. #header {
  16.  height: 5%;
  17.  font: bold 32px arial,sans-serif;
  18.  color: blue;
  19.     margin: 5px;
  20. } 
  21.  
  22. #map_canvas {
  23.  height: 90%;
  24. }


References





以上
投稿者 時刻:
ラベル: