- 2008-07-23 (水) 16:26
- WEB | javascript | millon
ここで書いた記事の転載と、補足
Google Maps API には、InfoWindowという、
地図上にウィンドウを表示するための機能が備わっています。
このウィンドウは地図上に情報を表示する分には、
十分な機能を持っています。
しかしmillon.jpで使用するにあたって、サイトのイメージと
表示されるウィンドウのイメージが若干合わなかったため、
自分でデザインしたウィンドウを表示しました。
google maps のinfowindow
自分で作ったウィンドウを表示
GoogleMaps は画像やHTML要素を、オーバーレイ要素として
地図上に貼り付けることができます。
その機能を用いて、DIV要素を独自のウィンドウとしてGoogleMaps上に貼り付けます。
実行テスト
カスタムウィンドウの表示のための手順ですが、
まずは地図や、カスタムウィンドウとして表示するDIVを準備しておきます。
* ピクセル位置でカスタムウィンドウの位置を指定する必要があるため、
一番外側を position="relative"を指定したDIVで囲む必要があります。
GoogleMaps APIで定義されているGOverLayインターフェースを実装したクラスを作成します。
このクラスのインスタンスをaddOverlayすることで、
GoogleMap上にオーバーレイとして貼り付けることができます。
- // 地図の表示
- map = new GMap2(document.getElementById("map"));
- map.setCenter(new GLatLng(35.67431, 139.69082),13);
- // オーバーレイ用のDIV
- var customInfoDIV = document.getElementById("ci_div");
- // GOverlayインターフェースを実装するcustomBoxクラスを作成
- function customBox(){}
- customBox.prototype = new GOverlay();
- customBox.prototype.initialize = function(map){
- // GoogleMap上に定義されているPaneのうち、マーカーと同じ高さに
- // カスタムウィンドウ用のDIVを追加。
- map.getPane(G_MAP_MARKER_PANE).appendChild(customInfoDIV);
- customInfoDIV.style.zIndex = 300000;
- }
- customBox.prototype.remove = function() {
- map.getPane(G_MAP_MARKER_PANE).removeChild(customInfoDIV);
- }
- customBox.prototype.copy = function() {
- return new customBox();
- }
- customBox.prototype.redraw = function(force){}
- // customBoxをオーバーレイとして貼り付ける
- customInfoWindow = new customBox();
- map.addOverlay(customInfoWindow);
GMap2.getPaneでGoogleMaps上で定義されているレイアにアクセスすることができますので、
今回は、マーカーが表示されるレイアと同じ高さにウィンドウが表示されるようにしています。
では、この貼り付けたオーバーレイを操作できる関数を用意して、
InfoWindowのような動きをさせれば完成です。
- // 指定位置の緯度経度にウィンドウ表示
- function openWindowLatLng(msg, lat, lng){
- var marker_pixls = map.fromLatLngToDivPixel(new GLatLng(lat, lng));
- var x = marker_pixls.x ;
- var y = marker_pixls.y ;
- openWindowXY(msg, marker_pixls.x, marker_pixls.y);
- }
- // 指定のピクセル位置にウィンドウ表示
- function openWindowXY(msg, x, y){
- map.removeOverlay(customInfoWindow);
- customInfoDIV.style.display = "block";
- customInfoDIV.style.zIndex = 4000000;
- customInfoDIV.style.postion = "absolute";
- customInfoDIV.style.top = y + "px";
- customInfoDIV.style.left = x + "px";
- customInfoDIV.innerHTML = msg;
- map.addOverlay(customInfoWindow);
- }
- // ウィンドウ閉じる
- function closeWindow(){
- map.removeOverlay(customInfoWindow);
- }
DIVを装飾してウィンドウとし、好きな位置に表示することができるようになります。
＊ただし、このウィンドウは地図のスクロールには追従しますが、
拡大率が変わった場合には、ピクセル位置の指定が緯度経度とずれてしまいます。
そのため、ズームのイベント時に再表示する必要があります。
Comments:0
Trackbacks:0
- Trackback URL for this entry
- http://parpue.net/web/71/trackback
- Listed below are links to weblogs that reference
- GoogleMaps にカスタムウィンドウを表示する。 from parpue.net
