MMap(Moogle Map) 0.2

Simple information window.

A simple information window is displayed.

It uses it together with the marker.

Example code

Source code of this demonstration

(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

Document structure of this window


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