「WordPressで学ぶPHP(1)変数・制御構造編」が発売されました。
「WordPressで学ぶPHP」シリーズの第1巻で、WordPressを通してPHPを学んでいく本です。
この本では、PHPの基本となる変数と制御構造について解説します。
Kindle本で、定価500円です。
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には、マーカーの色やラベルを簡単に変える機能はないようです。