MMap(Moogle Map) 0.2

The loading of the marker can be done by using json and ajax(The response is json).

Dynamic reading of marker

Ajax is used and the marker is arranged in the map.

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
	});

	var spinner = new Spinner({ map: map });
	var manager = new MMap.MarkerManager();
	var loader = new MMap.MarkerLoader({
		method: 'get',
		url: 'http://holyshared.github.com/MMap/js/marker-loader/markers.json',
		format: 'json',
		onPreload: function(){
			spinner.show();
		},
		onLoad: function(markers){
			manager.setMarkers(markers);
			manager.setMap(map);
			manager.visibleAll();
			spinner.hide();
		}
	});
	loader.load();
});

}(document.id));

Spinner code

(function($){

var Spinner = this.Spinner = new Class({

	Extends: MMap.MVCObject,

	Implements: [MMap.Options],

	options:{
		map: null,
		message: 'Now Loading...'
	},

	initialize: function(options){
		this.setOptions(options);
		this._spinner = new Element('div', {'class': 'spinner'});
		this._message = new Element('p', {'class': 'message'});
		this._message.inject(this._spinner);
		this._spinner.inject(document.body);
		this._message.set('html', this.options.message);
	},

	setMap: function(map){
		if (!(map instanceof google.maps.Map)) {
			throw new TypeError('The specified value is not a map object.');
		} 
		this.set('map', map);
	},

	getMap: function(){
		return this.get('map');
	},

	setMessage: function(message){
		if (!message) return false;
		this.set('message', message);
		this._message.set('html', message);
	},

	getMessage: function(){
		return this.get('message');
	},

	center: function(){
		var map = this.getMap();
		var container = map.getDiv();
		var mSize = container.getSize();
		var sSize = this._spinner.getSize();
		var position = container.getPosition();
		var spPosition = {};
		spPosition.x = position.x + (mSize.x/2) - (sSize.x/2);
		spPosition.y = position.y + (mSize.y/2) - (sSize.y/2);
		this._spinner.setStyles({
			top: spPosition.y,
			left: spPosition.x
		});
	},

	show: function(){
		var args = Array.from(arguments);
		var message = args.shift();
		this.setMessage(message);
		this.center();
		this._spinner.fade('in');
	},

	hide: function(){
		this._spinner.fade('out');
	}

});

}(document.id));