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

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

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ライセンス）

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>」の記述をお忘れなく。。。

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の自動配布がスタートされるそうですので、少しでも早くこのブログ記事が「意味のない情報」になってほしいところです。