先日公開した、jQuery Google Maps プラグインのアップデートを公開します。

jQuery Google Maps プラグイン ver.1.01
jqueryGoogleMaps1.01.zip（MITライセンス）

詳細については、プラグインの解説ページをご確認ください。
http://labs.d-s-b.jp/plugins/jQuery/jQueryGoogleMaps/
※ダウンロードも、解説ページにリンクを設けています。

ver.1.00からの変更点

• Google Maps API v3（v3.4）で、カスタムアイコンによる複数マーカーが表示されない不具合を修正しました。
• カスタムアイコンを指定する際、アイコン・シャドウのそれぞれに、anchorおよびscaleSizeを指定できるようにしました。

3月2日にAPI自体がアップデートされたことに伴うものだと思われますが、
カスタムアイコンの複数マーカーが表示されない不具合が見つかりました。

自分なりに調べてみたところ、カスタムアイコンを設定するMarkerImageの引数で、anchorとscaleSizeを渡していなかったのが原因でした。

これに対応するための修正となります。

カスタムアイコンの指定方法について

今回のバージョンから、カスタムアイコンの指定方法だけが少し変更になります。
以下が、サンプルです。

icons :{ redDot: { markerImg: '/path/to/red-dot.png', markerSize: new google.maps.Size( 32, 32 ), markerOrigin: new google.maps.Point( 0, 0 ), markerAnchor: new google.maps.Point( 16, 32 ), markerScaleSize: new google.maps.Size( 32, 32 ), shadowImg: '/path/to/msmarker.shadow.png', shadowSize: new google.maps.Size( 59, 32 ), shadowOrigin: new google.maps.Point( -14, 0 ), shadowAnchor: new google.maps.Point( 29, 32 ), shadowScaleSize: new google.maps.Size( 59, 32 ) } }

その他の導入・利用方法については、jQuery Google Maps プラグイン ver.1.00の解説記事をご覧ください。

毎度のことながら、「すっかりご無沙汰」で書き始めるBUNです。
早速ですが、Google Maps API v3を表示できるjQuery プラグインを作ってみたので、勢い余って公開してみます。

下記よりダウンロードして、ご利用ください。
jqueryGoogleMaps1.00.zip（MITライセンス）

詳細については、プラグインの解説ページをご確認ください。
http://labs.d-s-b.jp/plugins/jQuery/jQueryGoogleMaps/
※ダウンロードも、解説ページにリンクを設けています。

jQuery Google Maps プラグイン ver.1.00の機能

1. Google Mapsをマーカー付きで表示します。
2. マーカークリック時に、情報ウィンドウを表示します。
3. 所定の形式で記述されたXMLファイルを読み込んで、地図上に複数マーカーを表示します。
4. マーカーと連動するリンクを表示します。

現状の機能は、こんな感じです。
アップデートで、マーカーや連動するリンクの一覧をカテゴリーで分けられる・・・など、機能を追加していく予定です。（※あくまで、願望。）

使い方

はじめに、jQuery 本体と当プラグインを地図を表示させたいページにリンクさせます。
サンプルでは、Google Libraries APIで、jQuery 本体を読み込んでいます。
3行目は、Google Maps API v3を利用する際に必要な記述となります。

---

追記　2011.03.02
きちんと検証していませんが、2011年3月2日時点で「複数マーカーを表示する場合に、マーカーが表示できない」現象を確認しました。

既にライブラリを導入いただいている方は、お手数ですがGoogle Maps APIのライブラリを読み込む箇所で、バージョンの指定をv=3.3と指定してください。

なお、時間を見てライブラリのアップデートを行います。

追記　2011.03.03
jQuery Google Maps プラグインをver.1.01にアップデートしました。

---

<script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.4.2");</script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="jquery.GoogleMaps1.00.js"></script>

あとは、地図の表示先となる要素を指定して、プラグインの初期化を行うだけです。
下記は、シングルマーカーを表示する場合の記述例です。

<script type="text/javascript"> $(function(){ $('#gmap').GoogleMaps({ lat: 37.400529, // 緯度 lng: 140.359743, // 経度 zoom: 15 // ズームレベル }); }) </script>

ここでは記載していませんが、地図の表示先となる「<div id="gmap"></div>」の記述をお忘れなく。。。

相変わらず、すっかりご無沙汰なBUNです。
2010年5月29日(土)に開催された、Dreamweaver Town Meeting in Tokyoというイベントに、僭越ながら出演者のひとりとして、参加させていただきました。

テーマは、過去にBUN:Logでご紹介したDreamweaver CS3版 スペシャルコードヒントをネタに、コードヒントのカスタマイズ方法について。

---

3年近く前の古い記事で、さらにDreamweaver CS5も発売されたということもあり、改めてCS4およびCS5版のCodeHints.xmlファイルを作ってみました。よろしければ、下記よりダウンロードしてご利用ください。

CodeHints.xml.CS4.zip [Dreamweaver CS4版]
CodeHints.xml.CS5.zip [Dreamweaver CS5版]

---

ダウンロードしたファイルを解凍後、下記のファイルを上書きしてから、Dreamweaverを再起動すれば反映されます。

Mac OSX：Dreamweaver CS4
/Applications/Adobe Dreamweaver CS4/configuration/CodeHints/CodeHints.xml

Mac OSX：Dreamweaver CS5
Users/ユーザー名/Library/Application Support/Adobe/Dreamweaver CS5/ja_JP/Configuration/CodeHints/CodeHints.xml
※「ユーザー名」の部分は、ユーザーディレクトリ名で読み替えてください。

Windows：Dreamweaver CS4/CS5
/Program Files/Adobe/Adobe Dreamweaver CS4/configuration/CodeHints/CodeHints.xml
※「CS4」の部分は、バージョンにより数字が異なります。

BUN:Logの更新から、すっかり遠ざかってしまいました。
みなさん、お元気ですか？(苦笑)

今日は近況報告を兼ね、最近始めた2つの新しい試みについて、
ブログ記事を書いてみようと思います。

---

まず、「遊部(あそぶ)」について。

遊部ログ::ASOBLOG
http://blog.asob.tv/

CSS Nite in FUKUSHIMA miniという名称で何度か開催した地元有志による勉強会のリニューアル版となります。

理由は単純で、

• スピーカーを立てて聴くだけの講習スタイルは、勿体ない
• そもそも、スピーカーやテーマの選出が難しい
• Webの勉強会だけに偏ってしまうのは、勿体ない
• 制作作業では引き籠もりがちなので、趣味の幅を拡げる機会が欲しい
• みんなで集まると面白いから、単純に「呑み会」の場を設けようよ

何人かの方に、上記のご意見をいただいたことがキッカケです。

ワークショップ形式の勉強会や地元のクリエイター同士が交流を図れるイベントにできればと思っています。※もちろん、直接制作に携わらない方とも交流すべく、画策中です。

---

次に、「gabs」について。

gabs.log｜おしゃべり好きなWEB制作者のたわごと
http://gabs.cc/blog/

株式会社Gazi工房さん、有限会社シップスさんと一緒に、クリエイティブユニットを発足しました。

対外的な活動は上記のブログが主体となっていますが、
制作上のガイドラインを設け、コーディング以降のフローでは誰が担当しても同じ結果になることを実現すべく、日々勉強中です。

dreamseekerはフリーランスの個人事業なので、BUNに何かあった時のリスク回避も念頭に置いている・・・つもりです。

---

最後に。

BUN:Logは、お盆明けにリスタートしたいと思っています。
更新から遠ざかっていた一番の理由は「見た目に飽きたから」です <(^_^;)

予定通りなら、
デザインも変わって記事の投稿も増えている・・・ハズ(笑)

という訳で、よろしければこれからもお付き合いくださいませ。

ie6-upgrade-warning - Google Code
http://code.google.com/p/ie6-upgrade-warning/

IE 6でサイトにアクセスした場合に、ブラウザのアップグレードを促すことができる JavaScriptライブラリ。IDEA*IDEAさんで紹介されていたので、早速試してみました。

他のブラウザと見た目を合わせるためにある程度ノウハウが必要なIE 6から、乗り換えを検討いただけるのであれば個人的にも助かります(笑)

さて、デフォルトでは英文表記となるこのライブラリは、
リンクさせるJavaScript(warning.js)に一部修正を加えることで簡単に日本語表記にできます。

var msg1 = "お使いのInternet Explorerは、古いバージョンです。"; var msg2 = "快適にご覧いただくために最新のInternet Explorer、もしくは他のWebブラウザにアップグレードすることをお薦めいたします。"; var msg3 = "いずれかのアイコンをクリックして、ダウンロードページへお進みください。"; var br1 = "Internet Explorer 8+"; var br2 = "Firefox 3+"; var br3 = "Safari 3+"; var br4 = "Opera 9.5+"; var br5 = "Chrome 2.0+"; var url1 = "http://www.microsoft.com/japan/windows/internet-explorer/default.aspx"; var url2 = "http://www.mozilla.jp/firefox/"; var url3 = "http://www.apple.com/jp/safari/download/"; var url4 = "http://jp.opera.com/download/"; var url5 = "http://www.google.co.jp/chrome"; var imgPath;

msgNはオーバーレイされるウィンドウ内の説明文。
brNとurlNには、各ブラウザのバージョンや日本語版のダウンロード先をそれぞれ設定しています。

説明文はデフォルト表記を意訳したものです。お好みで変更してください。

マイクロソフト社のアナウンスによれば、4月第3週からIE 8の自動配布がスタートされるそうですので、少しでも早くこのブログ記事が「意味のない情報」になってほしいところです。