MMap(Moogle Map) 0.2

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

マーカーを動的に読み込む

Ajaxを利用してマーカーを読み込むデモ

サンプルコード

このデモのソースコード

メインコード

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

スピナーのコード

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