jQuery Google Maps プラグイン

ライセンス：MITライセンス
ダウンロード：GitHub
バージョン：1.03

これは、Google Maps API v3を表示できる、jQueryプラグインです。

jQuery 1.6・IE9 / IE8 / IE7（Windows 7）・Safari / Firefox 5 / Firefox 4 / Chrome（Mac）で動作確認しています。
IE6で不具合があっても、対応する予定はありません。あらかじめご了承ください。

更新履歴

2012.05.17
Google Maps API v3（v3.7以降）で、カスタムアイコンによる複数マーカーが表示されない不具合を修正しました。
これに伴い、ShadowIconの初期値を変更しました。
2012.02.20
【既知の問題点】Google Maps API v3（v3.7以降）で、カスタムアイコンによる複数マーカーが表示されません。
暫定的な対応となりますが、Google Maps APIを読み込む際「/js?v=3.6&sensor=false」のようにバージョンを指定してください。
2011.11.08
サンプル4のソースコードで、data_typeの指定が抜けてるのを修正しました。
2011.07.04
jQuery Google Maps プラグイン ver 1.02を公開。
外部ファイルの読込で、JSONに対応しました。
また、XMLまたはJSON形式でマーカー情報を出力できるplacemarks.phpを同梱しました。
2011.03.03
jQuery Google Maps プラグイン ver 1.01を公開。
Google Maps API v3（v3.4）で、カスタムアイコンによる複数マーカーが表示されない不具合を修正しました。
カスタムアイコンを指定する際、アイコン・シャドウのそれぞれに、anchorおよびscaleSizeを指定できるようにしました。
2011.02.25
jQuery Google Maps プラグイン ver 1.00を公開。

サンプル1（シングルマーカーのみ）

$('#gmap').GoogleMaps({
  lat: 37.400529,
  lng: 140.359743,
  zoom: 15
});

サンプル2（シングルマーカー・情報ウィンドウあり）

$('#gmap2').GoogleMaps({
  lat: 37.400529,
  lng: 140.359743,
  zoom: 15,
  info_window: 1,
  info_content: '<h1 style="color: #C60; font-size: 16px; padding-bottom: 0.5em; border-bottom: solid 1px #CCC; margin-bottom: 0.5em;">郡山市役所</h1><a href="http://koriyama.fukushima.jp‎">koriyama.fukushima.jp‎</a>',
  icon_type: 'ltblueDot'
});

サンプル3（マルチマーカー）

$('#gmap3').GoogleMaps({
  file: './placemarks.php?format=xml',
  info_window_heading_level: 3
});

サンプル4（マルチマーカー・リスト連動・外部ドメインからJSONPでマーカー情報を取得）

$('#gmap4').GoogleMaps({
  file: 'http://demo.5020.jp/plugins/jQuery/jQueryGoogleMaps/placemarks.php?format=json',
  data_type: 'json',
  list_target: 'ul#list'
});

初期化オプションについて（グレーの枠内は初期値です）

初期位置、ズームレベル、情報ウィンドウ、アイコンタイプ（シングルマーカー）
lat:
表示される地図の中心位置の緯度を指定します。
lat: 37.400529
lng:
表示される地図の中心位置の経度を指定します。
lng: 140.359743
zoom:
表示される地図のズームレベルを指定します。
zoom: 15
info_window:
情報ウィンドウの表示を（ 0 | 1 ）で指定します。デフォルトでは、非表示になっています。
info_window: 0
info_content:
情報ウィンドウに表示する内容を指定します。HTMLタグも記述できます。
info_content: null
icon_type:
表示されるマーカーを（ redDot | blueDot | greenDot | ltblueDot | yellowDot | purpleDot | pinkDot | orangeDot ）で指定します。
デフォルトでは、redDotになります。
iconsで任意のアイコンを指定することも可能です。
icon_type: null
コントローラー、マップタイプ（共通）
map_type_control:
MapTypeコントロールの表示をブーリアン（ true | false ）で指定します。
map_type_control: false
map_type_id:
MapTypeIDを（ HYBRID | ROADMAP | SATELLITE | TERRAIN ）で指定します。
map_type_id: google.maps.MapTypeId.ROADMAP
外部ファイル（マルチマーカー）
file:
マーカー表示用の外部ファイルのパスを指定します。
外部ドメインのJSONを指定する場合は、callbackの指定は不要です。
file: null
data_type:
マーカー表示用の外部ファイルのタイプを（ xml | json ）のいずれかで指定します。
data_type: null
情報ウィンドウ（共通）
info_window_class:
情報ウィンドウの内容を含む、div要素のclass名を指定します。
info_window_class: 'info-data'
info_window_heading_level:
情報ウィンドウのタイトル部分の見出しレベルを1〜6の整数で指定します。
info_window_heading_level: 1
連動リスト（マルチマーカー）
link_target:
地図上のマーカーと連動させる、ページ内に存在する要素を指定します。
link_target: null
list_target:
地図上のマーカーと連動するリストを表示させるul（もしくは、ol）要素を指定します。
list_target: null
マーカーアイコン（共通）
icons :
カスタムアイコン向けのMarkerImage クラスを初期化するための指定です。
markerXXXはアイコン、shadowXXXは影をそれぞれ指定できます。
参考URL：http://code.google.com/intl/ja/apis/maps/documentation/javascript/reference.html#MarkerImage
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 ),
		markerAnchor: new google.maps.Point( 16, 32 ),
		markerScaleSize: new google.maps.Size( 32, 32 ),
		shadowImg: 'http://maps.google.co.jp/mapfiles/ms/icons/msmarker.shadow.png',
		shadowSize: new google.maps.Size( 59, 32 ),
		shadowOrigin: new google.maps.Point( 0, 0 ),
		shadowAnchor: new google.maps.Point( 16, 32 ),
		shadowScaleSize: new google.maps.Size( 59, 32 )
	},
	blueDot: {
		markerImg: 'http://maps.google.co.jp/mapfiles/ms/icons/blue-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: 'http://maps.google.co.jp/mapfiles/ms/icons/msmarker.shadow.png',
		shadowSize: new google.maps.Size( 59, 32 ),
		shadowOrigin: new google.maps.Point( 0, 0 ),
		shadowAnchor: new google.maps.Point( 16, 32 ),
		shadowScaleSize: new google.maps.Size( 59, 32 )
	},
	greenDot: {
		markerImg: 'http://maps.google.co.jp/mapfiles/ms/icons/green-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: 'http://maps.google.co.jp/mapfiles/ms/icons/msmarker.shadow.png',
		shadowSize: new google.maps.Size( 59, 32 ),
		shadowOrigin: new google.maps.Point( 0, 0 ),
		shadowAnchor: new google.maps.Point( 16, 32 ),
		shadowScaleSize: new google.maps.Size( 59, 32 )
	},
	ltblueDot: {
		markerImg: 'http://maps.google.co.jp/mapfiles/ms/icons/ltblue-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: 'http://maps.google.co.jp/mapfiles/ms/icons/msmarker.shadow.png',
		shadowSize: new google.maps.Size( 59, 32 ),
		shadowOrigin: new google.maps.Point( 0, 0 ),
		shadowAnchor: new google.maps.Point( 16, 32 ),
		shadowScaleSize: new google.maps.Size( 59, 32 )
	},
	yellowDot: {
		markerImg: 'http://maps.google.co.jp/mapfiles/ms/icons/yellow-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: 'http://maps.google.co.jp/mapfiles/ms/icons/msmarker.shadow.png',
		shadowSize: new google.maps.Size( 59, 32 ),
		shadowOrigin: new google.maps.Point( 0, 0 ),
		shadowAnchor: new google.maps.Point( 16, 32 ),
		shadowScaleSize: new google.maps.Size( 59, 32 )
	},
	purpleDot: {
		markerImg: 'http://maps.google.co.jp/mapfiles/ms/icons/purple-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: 'http://maps.google.co.jp/mapfiles/ms/icons/msmarker.shadow.png',
		shadowSize: new google.maps.Size( 59, 32 ),
		shadowOrigin: new google.maps.Point( 0, 0 ),
		shadowAnchor: new google.maps.Point( 16, 32 ),
		shadowScaleSize: new google.maps.Size( 59, 32 )
	},
	pinkDot: {
		markerImg: 'http://maps.google.co.jp/mapfiles/ms/icons/pink-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: 'http://maps.google.co.jp/mapfiles/ms/icons/msmarker.shadow.png',
		shadowSize: new google.maps.Size( 59, 32 ),
		shadowOrigin: new google.maps.Point( 0, 0 ),
		shadowAnchor: new google.maps.Point( 16, 32 ),
		shadowScaleSize: new google.maps.Size( 59, 32 )
	},
	orangeDot: {
		markerImg: 'http://maps.google.co.jp/mapfiles/ms/icons/orange-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: 'http://maps.google.co.jp/mapfiles/ms/icons/msmarker.shadow.png',
		shadowSize: new google.maps.Size( 59, 32 ),
		shadowOrigin: new google.maps.Point( 0, 0 ),
		shadowAnchor: new google.maps.Point( 16, 32 ),
		shadowScaleSize: new google.maps.Size( 59, 32 )
	}
}
list_target:
地図上のマーカーと連動するリストを表示させるul（もしくは、ol）要素を指定します。
list_target: null

JavaScript サンプル

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.6.2");</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery.GoogleMaps.js"></script>
<script type="text/javascript">
  $(function(){
    $('#gmap').GoogleMaps({
        
      // シングルマーカー関連
      lat: 37.400529,                               // 緯度
      lng: 140.359743,                              // 経度
      zoom: 15,                                     // ズームレベル
      info_window: 0,                               // 情報ウィンドウの表示（0, 1）
      info_content: null,                           // 情報ウィンドウのコンテンツ（HTMLタグ）
      
      // マルチマーカー関連
      file: null,                                   // XMLファイルのパス（記述例：'./sample.xml'）
      info_window_class: 'info-data',               // 情報ウィンドウのclass名
      info_window_heading_level: 1,                 // 情報ウィンドウ内タイトルの見出しレベル（1〜6）
      list_target: null,                            // 連動リストを表示させるul要素のセレクタ（記述例：'ul#list'）
  	
      // マップタイプ関連
      map_type_control: false,                      // MapTypeコントロール（Boolean）
      map_type_id: google.maps.MapTypeId.ROADMAP,   // MapTypeID
      
      // アイコン関連
      icon_type: null,                              // アイコンタイプ（アイコン一覧は、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 ),
          markerAnchor: new google.maps.Point( 16, 32 ),
          markerScaleSize: new google.maps.Size( 32, 32 ),
          shadowImg: 'http://maps.google.co.jp/mapfiles/ms/icons/msmarker.shadow.png',
          shadowSize: new google.maps.Size( 59, 32 ),
          shadowOrigin: new google.maps.Point( 0, 0 ),
          shadowAnchor: new google.maps.Point( 16, 32 ),
          shadowScaleSize: new google.maps.Size( 59, 32 )
        },
        blueDot: {（中略）},
        greenDot: {（中略）},
        ltblueDot: {（中略）},
        yellowDot: {（中略）},
        purpleDot: {（中略）},
        pinkDot: {（中略）},
        orangeDot: {（中略）}
      }
    });
  });
</script>

XML サンプル

<?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>

JSON サンプル

{
  "placemarks": [
    {
      "name": "郡山市役所",
      "description": "<img src=\"http://mw2.google.com/mw-panoramio/photos/thumbnail/25589455.jpg\">〒963-8024<br>福島県郡山市朝日１丁目２３−７<br>024-924-2491<br><a href=\"http://koriyama.fukushima.jp\">koriyama.fukushima.jp‎</a>",
      "url": "http://koriyama.fukushima.jp",
      "lookat": {
        "latitude": "37.400529",
        "longitude": "140.359743"
      }
    },
    {（中略）}
  ]
}

備考

お気づきの点やご意見・ご要望などありましたら、@BUNまたはdreamseekerまで、ご連絡ください。