シンプルな情報ウィンドウを表示する
マーカーと一緒に使用するデモ
サンプルコード
このデモのソースコード
(function($){ window.addEvent("domready", function(){ var map = new google.maps.Map($('gmap'), { zoom: 15, center: new google.maps.LatLng(35.6666870, 139.731859), mapTypeId: google.maps.MapTypeId.ROADMAP }); var contentWindow = new MMap.Window({ className: 'window windowDefault', title: 'Title of window', content: 'Contents displayed in window' }); var marker = new MMap.Marker.Image({ map: map, className: 'marker imageDefault', title: 'Title of image marker [1]', image: 'http://holyshared.github.com/MMap/Demos/images/demo/img01.jpg', url: 'http://mootools.net', position: new google.maps.LatLng(35.6666870, 139.731859), onClick: function(event){ event.preventDefault(); //The reference to this here is an instance of the marker. contentWindow.open(map, this); } }); }); }(document.id));
HTML
ウィンドウの文書構造
<div class="ovarlayView window windowDefault"> <div class="inner"> <div class="hd"> <div class="hdgroup"> <p class="title">Title of window</p> <p class="close"><a title="Close" href="#">Close</a></p> </div> </div> <div class="bd"> <div class="content">Contents displayed in window</div> </div> <div class="ft"></div> </div> </div>