[gmap v3] Googleマップのマーカーを動的に作成する

マーカーデータ作成ツールでsessionStorageに保存されたポイントを表示する時に使っている１から始まる番号つきのマーカーは、
Google Chart APIで自動作成されたものです。

MapIconMakerというV2のライブラリが元ネタなんだけど、
V3はGIconとかが無くなってて使えなかったからドキュメント見ながらピンタイプのアイコンを出力する関数を書いてみた。
この関数使えばアイコン素材を用意する必要がなくてとてもお手軽です。

Function createPintypeMarkerIcon

syntax:

var marker = createPintypeMarkerIcon([marker options] [,PinIcon options]);

Marker options

MarkerOptions objectの仕様と同じ。mapとposition必須。
iconとshadowプロパティはPinicon optionsを設定すると上書きされます。

Properties	Type	Description
clickable	boolean	trueにするとクリック可能になる。デフォルトはtrue
cursor	string	マウスオーバーしたときのマウスカーソル。CSSのcursorと同じ
draggable	boolean	trueにするとドラッグ可能になる。 デフォルトは false.
flat	boolean	trueにすると影が表示されなくなる。
icon	string|MarkerImage	アイコンの画像。URLかMarkerImageオブジェクトで指定
map	Map|StreetViewPanorama	マーカーを表示する地図。MapかStreetViewPanoramaオブジェクト
position	LatLng	マーカーを置く地図上の位置。LatLngオブジェクト（必須）
shadow	string|MarkerImage	マーカーの影。URLかMarkerImageオブジェクトで指定
shape	MarkerShape	ドラッグやクリックのためのイメージマップの領域。MarkerShapeオブジェクトを渡す。
title	string	マーカーのタイトル。マウスオーバーした時に見えるツールチップ
visible	boolean	マーカーを表示するかどうか。true＝表示　false＝非表示
zIndex	number	マーカーの z-index。数字が大きい程上側に重なって表示される。 設定されていないときは地図に追加された順に重なる。

PinIconオプションなしで黒いマーカーに変更するサンプル

var myLatLng = new google.maps.LatLng(35.681382, 139.766084);
    var myOptions = {
      zoom: 4,
      center: myLatLng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
 
	createPintypeMarkerIcon({map:map, position:myLatLng, title:'sample',icon:"http://maps.google.com/mapfiles/marker_black.png"});

PinIcon options

Properties	Type	Description
fillColor	string	アイコンの中の色をシャープ無しの16進数カラーコードで指定。デフォルトは#FF776D
letter	string	アイコンのラベルテキスト。文字のみ
letterColor	string	アイコンのラベル色をシャープ無しの16進数カラーコードで指定。デフォルトは#000000
icon	string	アイコンに表示するラベル画像。Chart APIにあるリストから画像名で指定する。
pinStyle	string	アイコンのスタイル。 pinStyle:pin … 直立(デフォルト) pinSyyle:star … 星付き pinStyle:left　… 右に傾く pinStyle:right … 左に傾く
starFillColor	string	pinStyle:starした場合の星の色。シャープ無しの16進数カラーコードで指定。デフォルトは#FFFF00

アイコンの影はMarker optionsのfillプロパティをfalseにしない限り左右に傾いたアイコンでも表示されるんだけど、
直立アイコンよりも色が濃いものになります。

Sample

文字のラベル

createPintypeMarkerIcon({map:map, position:myLatLng, title:'sample'},{fillColor:"00CCFF",letter:"A"});

画像のラベル

createPintypeMarkerIcon({map:map, position:myLatLng, title:'sample'},{fillColor:"FF0000",icon:"caution"});

星をつける

createPintypeMarkerIcon({map:map, position:myLatLng, title:'sample'},{fillColor:"ffffff",pinStyle:"star"});

Source

圧縮：

var createPintypeMarkerIcon=function(f,a){function h(b){for(var l in b)return false;return true}a=a?a:{};var d=a.fillColor||"FF776D",e=function(b){if(b===undefined)return null;b=b.replace(/@/g,"@@");b=b.replace(/\\/g,"@\\");b=b.replace(/'/g,"@'");b=b.replace(/\[/g,"@[");b=b.replace(/\]/g,"@]");return encodeURIComponent(b)}(a.letter)||"",j=a.letterColor||"000000",g=a.icon||"",c="pin",k=a.pinStyle==="star"&&!a.starFillColor?"FFFF00":a.starFillColor,i=e||g?e||g:"+";switch(a.pinStyle){case "star":c="pin_star";
break;case "left":c="pin_sleft";break;case "right":c="pin_sright";break;default:c="pin"}d="http://chart.apis.google.com/chart?chst=d_map_xpin"+(g?"_icon":"_letter")+"&chld="+c+"|"+i+"|"+d;if(i==="+")d+="|";else if(e)d+="|"+j;if(a.pinStyle==="star")d+="|"+k;if(h(a)===false)f.icon=d;if(h(a)===false&&f.flat!==false){e=c==="pin"||a.pinStyle==="star"?"http://maps.google.com/mapfiles/shadow50.png":"http://chart.apis.google.com/chart?chst=d_map_xpin_shadow&chld="+c;c=c==="pin"||a.pinStyle==="star"?new google.maps.Point(10,
34):new google.maps.Point(14,35);c=new google.maps.MarkerImage(e,new google.maps.Size(37,34),new google.maps.Point(0,0),c);f.shadow=c}return new google.maps.Marker(f)};

未圧縮：

var createPintypeMarkerIcon = function (mopts, opts) {
    opts = (opts)? opts : {};
	var fillColor = opts.fillColor || "FF776D";
	var letter = escapeUserText_(opts.letter) || "";
	var letterColor = opts.letterColor || "000000";
	var icon = opts.icon || "";
	var pinStyle = "pin";
	var starFillColor = (opts.pinStyle==="star" && !opts.starFillColor)?"FFFF00":opts.starFillColor;
	
	var label = (letter||icon)?(letter||icon):"+";
	
	switch(opts.pinStyle){
		case "star": pinStyle = "pin_star"; break;
		case "left": pinStyle = "pin_sleft"; break;
		case "right": pinStyle = "pin_sright"; break;
		default: pinStyle = "pin";
	}
	
	var pinProgram = (icon) ? "_icon":"_letter";
	var baseUrl = "http://chart.apis.google.com/chart?chst=d_map_xpin"+pinProgram+"&chld=";
	
	var iconUrl = baseUrl+""+pinStyle+"|"+(label)+"|"+fillColor;
	
	if(label==="+") iconUrl += "|"; else if(letter) iconUrl += "|"+letterColor;
	
	if(opts.pinStyle==="star") iconUrl += "|"+starFillColor;
	
	if(isEmpty(opts)===false) mopts.icon=iconUrl;
	
	if(isEmpty(opts)===false && mopts.flat!==false){
		var shadowUrl = (pinStyle === "pin"||opts.pinStyle==="star")? "http://maps.google.com/mapfiles/shadow50.png":"http://chart.apis.google.com/chart?chst=d_map_xpin_shadow&chld="+pinStyle;
		var anc = (pinStyle === "pin"||opts.pinStyle==="star")? new google.maps.Point(10, 34):new google.maps.Point(14, 35)
		var shadow = new google.maps.MarkerImage(shadowUrl,
		new google.maps.Size(37, 34), new google.maps.Point(0,0), anc);
		mopts.shadow = shadow;
	}
	
	var m = new google.maps.Marker(mopts);
	
	return m;
	
	function escapeUserText_(text) {
	  if (text === undefined) {
		return null;
	  }
	  text = text.replace(/@/g, "@@");
	  text = text.replace(/\\/g, "@\\");
	  text = text.replace(/'/g, "@'");
	  text = text.replace(/\[/g, "@[");
	  text = text.replace(/\]/g, "@]");
	  return encodeURIComponent(text);
	};
	
	function isEmpty(hash) {
	  for ( var i in hash ) return false;
	  return true;
	};
};