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

マーカーデータ作成ツールでsessionStorageに保存されたポイントを表示する時に使っている1から始まる番号つきのマーカーは、
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

1
2
3
4
5
6
7
8
9
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

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

画像のラベル
sample3-imageicon

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

星をつける
sample4-staricon

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

Source

圧縮:

1
2
3
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)};

未圧縮:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
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;
    };
};

「[gmap v3] Googleマップのマーカーを動的に作成する」への2件のフィードバック

  1. すばらしいプログラムです。非常に参考になりました。

    Google Chart APIのSSLで証明書エラー?が起こったのですが、ドメインを
    旧:chart.apis.google.com
    新:chart.googleapis.com
    としたら動作しました。

    返信

コメントを残す

This site uses Akismet to reduce spam. Learn how your comment data is processed.