Googleマップカスタムフィールドプラグインのマーカーをカスタマイズする

Googleマップカスタムフィールドプラグインに対して、マーカーをカスタマイズしたいというご質問をいただきました。
その方法を紹介します。

Google Static Maps APIを使う場合

Google Static Maps APIを使って静的な地図を表示するだけなら、テンプレートタグの組み合わせだけで、マーカーをカスタマイズすることができます。

マーカーの色やラベルを変えるだけなら、地図を表示するブロックタグ（MTXXXBlockタグ）の中で、以下のようにテンプレートタグを組み合わせます。
img要素のsrc属性が長いので改行を入れていますが、実際にはsrc属性は改行せずに1行につなげて書きます。
「色」の箇所には、「0x3399FF」のような形でRGBの濃度を指定するか、またはblack, brown, green, purple, yellow, blue, gray, orange, red, whiteの定義済みの色を指定します。
「ラベル」には、大文字のA～Zか、数字の0～9を指定します。 

<img
  src="http://maps.google.com/maps/api/staticmap
    ?center=<$mt:GMapCFLatitude$>,<$mt:GMapCFLongitude$>
    &zoom=<$mt:GMapCFZoom$>
    &size=<$mt:GMapCFWidth$>x<$mt:GMapCFHeight$>
    &sensor=false
    &markers=color:色|label:ラベル|<$mt:GMapCFLatitude$>,<$mt:GMapCFLongitude$>"
  width="<$mt:GMapCFWidth$>"
  height="<$mt:GMapCFHeight$>"
/>

また、独自のマーカー画像を使いたい場合は、以下のようにテンプレートタグを組みます。 

<img
  src="http://maps.google.com/maps/api/staticmap
    ?center=<$mt:GMapCFLatitude$>,<$mt:GMapCFLongitude$>
    &zoom=<$mt:GMapCFZoom$>
    &size=<$mt:GMapCFWidth$>x<$mt:GMapCFHeight$>
    &sensor=false
    &markers=icon:<mt:Unless encode_url="1">マーカー画像のアドレス</mt:Unless>|<$mt:GMapCFLatitude$>,<$mt:GMapCFLongitude$>"
  width="<$mt:GMapCFWidth$>"
  height="<$mt:GMapCFHeight$>"
/>

JavaScriptを使う

一般的なGoogleマップの機能（ドラッグなど）を使いたい場合は、JavaScriptでGoogleマップを表示します。

ブログ記事にGoogleマップを追加した場合、ブログ記事アーカイブテンプレートの中で、地図を表示したい位置に、以下のような部分を追加します。
16行目の「マーカー画像のアドレス」のところに、マーカーとして使う画像のアドレスを指定します。
また、1行目と最後の行の「MTXXXBlock」は、追加したカスタムフィールドのテンプレートタグ名に応じて書き換えます。 

<mt:XXXBlock>
<div id="gmap" style="width : <$mt:GMapCFWidth$>px; height : <$mt:GMapCFHeight$>px;">地図の読み込み中です...</div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function show_gmap() {
  var latlng = new google.maps.LatLng(<$mt:GMapCFLatitude$>, <$mt:GMapCFLongitude$>);
  var myOptions = {
    zoom: <$mt:GMapCFZoom$>,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("gmap"), myOptions);
  var marker = new google.maps.Marker({
    position: latlng, 
    map: map, 
    icon: 'マーカー画像のアドレス',
    title: '<$mt:GMapCFAddress encode_js="1"$>'
  });
  var infowindow = new google.maps.InfoWindow({
    content: '<$mt:GMapCFAddress encode_js="1"$>'
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  }); 
}
</script>
</mt:XXXBlock>

また、</body>タグの直前のあたりに、以下のコードを追加します。 

<mt:XXXBlock>
<script type="text/javascript">
show_gmap();
</script>
</mt:XXXBlock>

なお、GoogleマップのJavaScript APIには、マーカーの色やラベルを簡単に変える機能はないようです。