MMap(Moogle Map) 0.2

Simple image marker.

Image marker for whom style can be specified with CSS

Demonstration that displays two image markers

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 marker1 = new MMap.Marker.Image({
		map: map,
		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){
			window.location.href = this.getURL();
		}
	});

	var marker2 = new MMap.Marker.Image({
		map: map,
		className: 'imagePaper',
		title: 'Title of image marker [2]',
		image: 'http://holyshared.github.com/MMap/Demos/images/demo/img02.jpg',
		url: 'http://mootools.net/forge',
		position: new google.maps.LatLng(35.6626870, 139.730859),
		onClick: function(event){
			window.location.href = this.getURL();
		}
	});

});

}(document.id));

HTML

Document structure of this image marker

<div class="ovarlayView marker image imageDefault">
	<p class="photo">
		<a title="Title of image marker [1]" href="http://mootools.net/">
			<img src="http://holyshared.github.com/MMap/Demos/images/demo/img01.jpg"
				title="Title of image marker [1]" />
		</a>
	</p>
</div>