このサンプルは、jQueryのgoogleMapsプラグインを利用してマーカーの情報ウィンドウ（吹き出し）を表示します。中央のマーカーをクリックすると、吹き出しが表示されてマーカーの情報が表示されます。「東京タワー」のリンクをクリックすると新規ウィンドウに東京タワーのサイトが表示されます。
マーカーをクリックしたときに情報ウィンドウを表示するには、googleMaps()メソッドにmarkersオプションを追加します。さらに、markersオプションにinfoオプションを追加して「layer」に、情報ウィンドウに表示するメッセージが定義されている要素のセレクタを指定します。ここでは、div#address要素のセレクタを指定しています。
$('#canvas').googleMaps({
depth: 18,
markers: { // マーカーの情報を指定
latitude: 35.658632,
longituge: 139.745411,
info: { // 情報ウィンドウに表示するコンテンツを指定
layer: '#address' // div#address要素のセレクタを指定
}
}
});
<div id="address">
<a href="http://www.tokyotower.co.jp/" target="_blank">東京タワー</a><br />
〒105‐0011<br />東京都港区芝公園4‐2‐8
</div>