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

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

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

sample3-imageicon

Function createPintypeMarkerIcon

syntax:

1	`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オプションなしで黒いマーカーに変更するサンプル

sample1-blackicon

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

文字のラベル
sample2-lettericon

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

画像のラベル
sample3-imageicon

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

星をつける
sample4-staricon

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;
    };
};