クリック時に情報ウィンドウを表示する

シングルマーカーのクリック時に情報ウィンドウを表示したい場合は、
初期化のオプションとして「info_window:1」を追加し、「info_content」にウィンドウ内に表示させたい内容（HTMLタグなど）を記述します。

マーカーのアイコンを変更したい場合は、「icon_type」を指定します。
現時点で指定可能なアイコンは、redDot、blueDot、greenDot、 ltblueDot、llowDot、purpleDot、pinkDot、 orangeDotの8種類です。

<script type="text/javascript"> $(function(){ $('#gmap').GoogleMaps({ lat: 37.400529, // 緯度 lng: 140.359743, // 経度 zoom: 15, // ズームレベル info_window: 1, // 情報ウィンドウの表示 info_content: '<h1>郡山市役所</h1><a href="http://koriyama.fukushima.jp‎">公式サイト‎</a>', icon_type: 'ltblueDot' // マーカーアイコンの指定 }); }) </script>

なお、初期化のオプションで「icons:{}」を指定することで、マーカーをご自身で用意したカスタムアイコンに変更することも可能です。以下が、記述例となります。

icons :{ redDot: { markerImg: 'http://maps.google.co.jp/mapfiles/ms/icons/red-dot.png', markerSize: new google.maps.Size( 32, 32 ), markerOrigin: new google.maps.Point( 0, 0 ), shadowImg: 'http://maps.google.co.jp/mapfiles/ms/icons/msmarker.shadow.png', shadowSize: new google.maps.Size( 59, 32 ), shadowOrigin: new google.maps.Point( -14, 0 ) } }

複数のアイコンが必要であれば、「icons:{ redDot: {（中略）}, blueDot: {（中略）} }」のように、カンマ区切りで指定してください。

XMLを読み込んで複数マーカーを表示する

所定の書式でXMLを用意すれば、複数のマーカーを表示することができます。
なお、情報ウィンドウのタイトル部分をname要素から取得することから、「info_window_headeing_level: 3」のように、見出しのレベルを変更できるようにしてあります。お好みで指定してください。

<script type="text/javascript"> $(function(){ $('#gmap').GoogleMaps({ file: './sample.xml', // XMLファイルのパス info_window_heading_level: 3 // 情報ウィンドウの見出しレベル }); }) </script>

以下が、XMLの書式サンプルです。
表示したいマーカーの数だけ、Placemark要素を用意してください。

<?xml version="1.0" encoding="UTF-8"?> <Placemarks> <Placemark> <name>郡山市役所</name> // 名称（情報ウィンドウ、リストに表示） <description> // 情報ウィンドウ内のコンテンツ <![CDATA[ 〒963-8024<br> 福島県郡山市朝日１丁目２３−７<br> 024-924-2491<br> ]]> </description> <LookAt> <latitude>37.400529</latitude> // 緯度 <longitude>140.359743</longitude> // 経度 </LookAt> <icon>redDot</icon> // アイコンタイプ </Placemark> <Placemark> （中略） </Placemark> </Placemarks>

XMLを読み込んで、複数マーカーおよび連動するリストを表示する

XMLを読み込む場合、特定のul（もしくはol）要素を指定することで、地図と連動するリストを表示できます。
li要素をappendする形になりますので、HTMLソースにul（もしくはol）の空要素を追加してください。

<script type="text/javascript"> $(function(){ $('#gmap').GoogleMaps({ file: './sample.xml', // XMLファイルのパス list_target: '#list' // 連動するリストの表示するul（ol）要素 }); </script>

地図とリストの表示先に関するHTMLの指定は、下記のようになります。

<div id="gmap"></div> <ul id="list"></ul>

おまけ：HTMLに出力済みの特定要素とXMLで読み込んだマーカーを連動させる

このプラグインを作成するにあたって、実は一番やりたかったことなのですが(笑)
「link_target」で要素を指定することで、ページ内に存在する特定の要素と地図上のマーカーを連動させることができます。

<script type="text/javascript"> $(function(){ $('#gmap').GoogleMaps({ file: './sample.xml', // XMLファイルのパス link_target: '#list' // 連動させる要素 }); </script>

ここで指定した要素の子要素をクリックすると、地図上で情報ウィンドウが表示されるようになります。
この時、XMLのPlacemarkとHTMLに記述された子要素の数は、一致するように注意してください。

なお、実際のサンプルは、株式会社 ナカノコーポレーションさんのトップページ（宅地物件情報）にて、ご確認ください。

最後に

デバッグやモチベーションアップ(笑)にご協力いただいた、CSS Nite in FUKUSHIMA 実行委員のみなさんに、いつもながら感謝します。

また、不具合やお気づきの点などは、コメント欄もしくはTwitter（@BUN）にて、ご連絡くださいませ。