MMap(Moogle Map) 0.2

The marker displayed in the map is managed.

Two or more markers are managed.

Two or more markers are managed by using the marker manager.

Example code

Source code of this demonstration

Main code

(function($){

window.addEvent("domready", function(){

	var mapDiv = $('gmap');
	var map = new google.maps.Map(mapDiv, {
		disableDefaultUI: true,
		zoom: 15,
		center: new google.maps.LatLng(35.6666870, 139.731859),
		mapTypeId: google.maps.MapTypeId.ROADMAP
	});

	//The marker is made based on the parameter of the marker.
	var markers = [{
		title: 'MMap.Marker',
		image: 'http://holyshared.github.com/MMap/Demos/images/demo/img01.jpg',
		url: 'http://holyshared.github.com/MMap/Demos/marker.html',
		position: new google.maps.LatLng(35.6666870, 139.731859)
	}, {
		title: 'MMap.Marker.Image',
		image: 'http://holyshared.github.com/MMap/Demos/images/demo/img02.jpg',
		url: 'http://holyshared.github.com/MMap/Demos/marker.image.html',
		position: new google.maps.LatLng(35.6666870, 139.733859)
	}, {
		title: 'MMap.Marker.Images',
		image: 'http://holyshared.github.com/MMap/Demos/images/demo/img03.jpg',
		url: 'http://holyshared.github.com/MMap/Demos/marker.images.html',
		position: new google.maps.LatLng(35.6650870, 139.729859)
	}, {
		title: 'MMap.Window',
		image: 'http://holyshared.github.com/MMap/Demos/images/demo/img04.jpg',
		url: 'http://holyshared.github.com/MMap/Demos/window.html',
		position: new google.maps.LatLng(35.6686870, 139.728859)
	},	{
		title: 'MMap.MarkerLoader',
		image: 'http://holyshared.github.com/MMap/Demos/images/demo/img05.jpg',
		url: 'http://holyshared.github.com/MMap/Demos/marker.loader.html',
		visible: false,
		position: new google.maps.LatLng(35.6646870, 139.726859)
	}];

	var view = new CurrentMarkerView();
	map.controls[google.maps.ControlPosition.TOP_RIGHT].push(view.getInstance());

	var onClick = function(event){
		event.preventDefault();
		markerManager.active(this);
	}

	var onActive = function(event){
		view.set('title', this.getTitle());
		view.set('url', this.getURL());
	}

	var manageMarkers = [];
	markers.each(function(context){
		//markerClick
		var options = Object.merge(context, {
			onClick: onClick,
			onActive: onActive
		});
		var imageMarker = new MMap.Marker.Image(options);
		manageMarkers.push(imageMarker);
	});

	//The marker manager is made, and the managed marker is set.
	var markerManager = new MMap.MarkerManager({
		markers: manageMarkers
	});
	markerManager.setMap(map); //The arranged map is specified for all managed markers.
	markerManager.visibleAll();
	markerManager.active(manageMarkers.getLast());
});

}(document.id));

View code

(function($){

var CurrentMarkerView = this.CurrentMarkerView = new Class({

	Extends: MMap.MVCObject,

	Implements: [MMap.Events],

	initialize: function(){
		this._setup();
	},

	_setup: function(){
		var self = this;
		var title = new Element('h3', {'html': 'Information'});
		this._container = new Element('div', {'class': 'currentMarkerView'});
		title.inject(this._container);

		this._options = new Element('dl', {'class': 'states'});

		var label = new Element('dt', {'html': 'Title:'});
		var title = new Element('dd');
		this._options.adopt([label, title]);
		this._title = title;

		var label = new Element('dt', {'html': 'Url: '});
		var url = new Element('dd');
		var link = new Element('a');
		link.inject(url);

		this._options.adopt([label, url]);
		this._url = url;
		this._link = link;
		this._options.inject(this._container);
	},

	getInstance: function(){
		return this._container;
	},

	title_changed: function(){
		var title = this.get('title');
		this._title.set('html', title);
		this._link.set('title', title);
	},

	url_changed: function(){
		var url = this.get('url');
		this._link.set('html', url);
		this._link.set('href', url);
	}

});

}(document.id));