- 2010-08-05 (木) 13:45
- GoogleMap
マーカーデータ作成ツールでsessionStorageに保存されたポイントを表示する時に使っている１から始まる番号つきのマーカーは、
Google Chart APIで自動作成されたものです。
MapIconMakerというV2のライブラリが元ネタなんだけど、
V3はGIconとかが無くなってて使えなかったからドキュメント見ながらピンタイプのアイコンを出力する関数を書いてみた。
この関数使えばアイコン素材を用意する必要がなくてとてもお手軽です。
Function createPintypeMarkerIcon
syntax:
JavaScript:
-
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オプションなしで黒いマーカーに変更するサンプル
JavaScript:
-
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 |
|---|---|---|
|
string |
アイコンの中の色をシャープ無しの16進数カラーコードで指定。デフォルトは#FF776D |
letter |
string |
アイコンのラベルテキスト。文字のみ |
letterColor |
string |
アイコンのラベル色をシャープ無しの16進数カラーコードで指定。デフォルトは#000000 |
icon |
string |
アイコンに表示するラベル画像。Chart APIにあるリストから画像名で指定する。 |
pinStyle |
string |
アイコンのスタイル。 |
starFillColor |
string |
pinStyle:starした場合の星の色。シャープ無しの16進数カラーコードで指定。デフォルトは#FFFF00 |
アイコンの影はMarker optionsのfillプロパティをfalseにしない限り左右に傾いたアイコンでも表示されるんだけど、
直立アイコンよりも色が濃いものになります。
Sample
文字のラベル
JavaScript:
-
createPintypeMarkerIcon({map:map, position:myLatLng, title:'sample'},{fillColor:"00CCFF",letter:"A"});
画像のラベル
JavaScript:
-
createPintypeMarkerIcon({map:map, position:myLatLng, title:'sample'},{fillColor:"FF0000",icon:"caution"});
星をつける
JavaScript:
-
createPintypeMarkerIcon({map:map, position:myLatLng, title:'sample'},{fillColor:"ffffff",pinStyle:"star"});
Source
圧縮：
JavaScript:
-
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)};
未圧縮：
JavaScript:
-
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;
-
};
-
};
関連記事
- Newer: Windows版XAMPP + OpenPNE インストールメモ
- Older: Googleマップのマーカーデータ作成ツールを組んでみた
