Google Maps カスタムアイコン

好みのアイコンは使いたいもの。下のソースを見た方が早いと思うけど、GIconのコンストラクタにはびっくりした。欲しいコンストラクタがまさにあった。考えてみれば、確かに欲しい人は多そう。考えられてるなぁ。

icon.iconSizeとicon.shadowSizeはそれぞれが表示される大きさ。画像の大きさと同じにすればそのままの表示だし、値を小さくすれば縮小されて表示される。icon.iconAnchorは、このアイコンが指し示す部分（上の例だとアイコン下部のとがった部分）が画像の左上から何pixelのところかを指定する。

<div id="markerMap" style="width:500px;height:200px;"></div>
<script>
  var map = new GMap2(document.getElementById("markerMap"));
  map.addControl(new GMapTypeControl(1));
  map.setCenter(new GLatLng(35.5577, 139.7249), 17);


  //黄色のアイコン
  var point = new GLatLng(35.5577, 139.7249);
  var icon = new GIcon(G_DEFAULT_ICON,
       "http://www.geocities.jp/genwasgen/img/markeryellow.png");
  var marker = new GMarker(point, icon);
  map.addOverlay(marker);

  //赤色の小さいアイコン
  var point = new GLatLng(35.5577, 139.7259);
  var icon = new GIcon();
  icon.image  = "http://labs.google.com/ridefinder/"
                  +"images/mm_20_red.png";
  icon.shadow = "http://labs.google.com/ridefinder/"
                  +"images/mm_20_shadow.png";
  icon.iconSize   = new GSize(12, 20);
  icon.shadowSize = new GSize(22, 20);
  icon.iconAnchor = new GPoint(6, 20);
  var marker = new GMarker(point, icon);
  map.addOverlay(marker);
</script>

ついでにアイコンの色々。

	http://www.google.com/intl/en_ALL/mapfiles/dd-start.png
	http://www.google.com/intl/en_ALL/mapfiles/dd-end.png
	http://www.google.com/intl/en_ALL/mapfiles/arrow.png
	http://www.google.com/intl/en_ALL/mapfiles/arrowshadow.png
	http://www.google.com/intl/en_ALL/mapfiles/dir_0.png
	http://www.google.com/intl/en_ALL/mapfiles/dir_3.png
	http://www.google.com/intl/en_ALL/mapfiles/dir_117.png
	http://www.google.com/intl/en_ALL/mapfiles/dir_walk_0.png
	http://www.google.com/intl/en_ALL/mapfiles/dir_walk_3.png
	http://www.google.com/intl/en_ALL/mapfiles/dir_walk_117.png
	http://labs.google.com/ridefinder/images/mm_20_purple.png
	http://labs.google.com/ridefinder/images/mm_20_yellow.png
	http://labs.google.com/ridefinder/images/mm_20_yellow.png
	http://labs.google.com/ridefinder/images/mm_20_blue.png
	http://labs.google.com/ridefinder/images/mm_20_white.png
	http://labs.google.com/ridefinder/images/mm_20_white.png
	http://labs.google.com/ridefinder/images/mm_20_green.png
	http://labs.google.com/ridefinder/images/mm_20_black.png
	http://labs.google.com/ridefinder/images/mm_20_orange.png
	http://labs.google.com/ridefinder/images/mm_20_gray.png
	http://labs.google.com/ridefinder/images/mm_20_brown.png
	http://labs.google.com/ridefinder/images/mm_20_shadow.png
	http://maps.google.com/mapfiles/kml/pushpin/wht-pushpin.png
	http://maps.google.com/mapfiles/kml/pushpin/red-pushpin.png
	http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png
	http://maps.google.com/mapfiles/kml/pushpin/grn-pushpin.png
	http://www.google.com/apis/maps/documentation/markermanager/sun.png
	http://www.google.com/apis/maps/documentation/markermanager/sun-shadow.png
	http://www.google.com/apis/maps/documentation/markermanager/rain.png
	http://www.google.com/apis/maps/documentation/markermanager/rain-shadow.png
	http://www.google.com/apis/maps/documentation/markermanager/snow.png
	http://www.google.com/apis/maps/documentation/markermanager/snow-shadow.png
	http://www.google.com/apis/maps/documentation/markermanager/storm.png
	http://www.google.com/apis/maps/documentation/markermanager/storm-shadow.png
	http://maps.google.com/help/maps/streetview/images/man_arrow-10.png
	http://www.google.com/help/hc/images/maps_human.png
	http://
	http://
	http://

Google Mapsのホイール拡大縮小 スクロールしないで

Google Mapsをマウスに付いているホイールで拡大縮小できると気持ち良い。GMap2オブジェクトに対しenableScrollWheelZoomメソッドを使えば、ホイールで拡大縮小ができるようになる。だけど、ページも同時にスクロールしてしまうことが問題だった。

調べてみたけど、なかなか難しい。結局、どこかの掲示板でMapping Application & Data Entry @ Woodrow Wilson School, Princeton Universityというのを見つけた。ホイールで拡大縮小しつつ、ページスクロールしていない！掲示板では、この作者が「ホイールで拡大しようとすると一段階ではなく二段階拡大してしまう」と助けを求めていた。ソースを見れば直ぐ分かる通り、enableScrollWheelZoomで一段階拡大し、さらに自分のオリジナルコードで一段階拡大している。きちんと掲示板では誰かが指摘していたけど、まだ治っていない。不思議。

何はともあれ、エッセンスは下のソースの通り。GoogleMaps上でのホイールを回すイベントはGEvent.addDomListenerでゲットして、ウィンドウに対しては無効化しちゃう。

実装してみるとやっぱり気持ち良い！Google Maps本体でも実装しないのかな？

<div id="wheelMap" style="width:500px;height:200px;"></div>
<script>
  var map = new GMap2(document.getElementById("wheelMap"));
  map.addControl(new GMapTypeControl(1));
  map.setCenter(new GLatLng(35.5577, 139.7249), 17);

  map.enableScrollWheelZoom();  
  map.enableContinuousZoom();


  GEvent.addDomListener(document.getElementById("wheelMap"),
     "DOMMouseScroll", CancelEvent); // Firefox
  GEvent.addDomListener(document.getElementById("wheelMap"),
     "mousewheel",     CancelEvent); // IE


function CancelEvent(event)
{
  e = event;
  if (typeof e.preventDefault  == 'function') 
        e.preventDefault();
  if (typeof e.stopPropagation == 'function')
        e.stopPropagation();
  if (window.event) {
     window.event.cancelBubble = true; // for IE
     window.event.returnValue = false; // for IE
  }
}
</script>

Google Mapsにカスタムボタンを配置

このマップの右上のようにカスタムボタンを配置したかったけど、なかなか良いサンプルが見つからなくて苦労した。Custom Map Controlsにもサンプルあるけど、少し冗長に思えたので、エッセンスを踏まえて完成したのが下のソース。

<div id="testMap" style="width:500px;height:200px;"></div>

<script>
  //地図の作成と表示
  var map = new GMap2(document.getElementById("testMap"));
  map.addControl(new GMapTypeControl(1));
  map.setCenter(new GLatLng(35.5577, 139.7249), 17);

  //ボタンの作成
  pMBlink=document.createElement("img");
  pMBlink.src=
     "http://genisgen.googlepages.com/markersMap.png";
  pMBlink.style.border="0px";
  pMBlink.style.cursor="pointer";
  pMBlink.title="photoMap Browserを表示";
  GEvent.addDomListener(pMBlink, "click", function() {
    alert("Clicked!");
  });

  //ボタンの表示
  var pos = new GControlPosition(
    G_ANCHOR_TOP_RIGHT, new GSize(1,29)
  );
  pos.apply(pMBlink);
  map.getContainer().appendChild(pMBlink);
</script>

写真地図ブラウザ制作２ ブラウザの角を丸く

ブラウザの角はやはり丸くしたい。

javascriptでカッコよくやる方法があったはずと、ブックマークを探してみたけど無かった。少し探すとRUZEE.ShadedBorder というのが高機能で良い感じ。サンプルもカッコイイ。しかし実装方法がカッコ悪い。挙動も少し不審。なんかソースが汚そう。このjsファイルは短いので、少し読み込んで改良しようとも考えた。けどめんどくさいので、他を探すことにした。

javascriptでsvgをしようというプロジェクトでも角を丸くすることは可能。サンプルはこんな感じ。だけど実装方法がごちゃごちゃ。しかもこのプロジェクト自体があまり動いていない感じ。なのでもう少し探してみることに。

色々な方法があるらしい。角丸に関するあれこれ @ WWW watchにまとまっている。Goggleでrounded divで検索しても結構色々出てくる。

色々見ていくとjavascriptで実現するのは、あまりカッコよくないように思えてきた。特にRounded Corners with CSS and JavaScript @ sitepointを読んでCSS＋画像でやることに決めた。

ただ、この方法の問題は丸い角の画像の準備。しかしcorner shopが必要な画像を自動生成してくれる！このページで、"Box Background"が角を丸くしたい領域の色。"Page Background"がその領域の背景色。"Corner Radius"が丸い角の半径。"Transparent"が透明にしたい対象。これらのパラメータを設定し、後は"Create Graphics"ボタンを押すだけ。この画像を使って角が丸いボックスを表示するためのCSSとHTMLも自動生成してくれる。

ただ、ここで新たな問題が。この自動生成されるCSSとHTMLは背景が透明な場合に対応していない。色々と試してみたけれども、この方法だと無理そう。ということで、自分でtableを使って、素直に作ってみることにした。結果は、以下の通り。

<style typte="text/css">
table.rounded {
 width  : 98%;
 height : 98%;
}
td.Rnw {
 background : url(nw.gif);
 height : 20px; width : 20px;
}
td.Rn {
 background : #000;
 height : 20px;
 line-height : 1em;
}
td.Rne  {
 background: url(ne.gif);
 height : 20px; width : 20px;
}
td.Rmw, td.Rme {
 background : #000;
}
td.Rm  {
 height : 100%;
}
div.Rcontent {
 background : #333;
 color : #fff;
 height : 100%;
}
td.Rsw {
 background : url(sw.gif);
 height : 20px; width : 20px;
}
td.Rs {
 background : #000;
 height : 20px;
 line-height : 1em;
}
td.Rse  {
 background : url(se.gif);
 height : 20px; width : 20px;
}
</style>
<body style="background:#ddd">
<table class="rounded" cellpadding=0 cellspacing=0>
<tr><td class="Rnw"/><td class="Rn"> </td><td class="Rne"></tr>
<tr><td class="Rmw"/><td class="Rm"><div class="Rcontent">
本文
</div>
</td><td class="Rme"/></tr>
<tr><td class="Rsw"/><td class="Rs"> </td><td class="Rse"></tr>
</table>
</body>

ここで苦労したのは「ウィンドウサイズを変更したら、ブラウザのサイズも変更される」ようにすること。<td>のwidthを98%-20pxみたいに指定できれば、分かりやすくシンプルなCSS+HTMLになるとは思うのだけれども。javasriptで疑似的に実装しても良いかも。サンプルはこんな感じ。

	本文

写真地図ブラウザ制作１ ブラウザの表示

昨日の分

<SCRIPT>
function scrolled(st){
 document.getElementById("box").style.top=
      10+(document.body.scrollTop || 
          document.documentElement.scrollTop);
 document.getElementById("box").style.left=
      10+("document.body.scrollLeft || 
          document.documentElement.scrollLeft);
 document.getElementById("box").style.display="block";
}
</SCRIPT>
<BODY onclick=scrolled(this.scrollTop)>
<div id="box" 
   style="width:100px; height:100px;
          background:#000;
          position:absolute; left:10px; top:10px;
          display:none;">
</div>
<div 
   style="width:2000px; height:2000px;
          background:#ddd;">
</div>
</BODY>