function CompactMoveControl() {}
CompactMoveControl.prototype = new GControl();
CompactMoveControl.prototype.initialize = function( map ) {
var container = document.createElement( 'div' );
this.setContainerStyle( container );
// Top
var topDiv = document.createElement( 'div' );
this.setDivStyle( topDiv );
var topImg = document.createElement( 'img' );
topImg.src = 'images/smc_top.png';
this.setImgStyle( topImg );
container.appendChild( topDiv );
topDiv.appendChild( topImg );
GEvent.addDomListener( topImg , 'click' , function() {
map.panDirection( 0 , +1 );
} );
// Left and Right
var middleDiv = document.createElement( 'div' );
this.setDivStyle( middleDiv );
var leftImg = document.createElement( 'img' );
var rightImg = document.createElement( 'img' );
leftImg.src = 'images/smc_left.png';
this.setLeftStyle( leftImg );
rightImg.src = 'images/smc_right.png';
this.setImgStyle( rightImg );
container.appendChild( middleDiv );
middleDiv.appendChild( leftImg );
middleDiv.appendChild( rightImg );
GEvent.addDomListener( leftImg , 'click' , function() {
map.panDirection( +1 , 0 );
} );
GEvent.addDomListener( rightImg , 'click' , function() {
map.panDirection( -1 , 0 );
} );
// Bottom
var bottomDiv = document.createElement( 'div' );
this.setDivStyle( bottomDiv );
var bottomImg = document.createElement( 'img' );
bottomImg.src = 'images/smc_bottom.png';
this.setImgStyle( bottomImg );
container.appendChild( bottomDiv );
bottomDiv.appendChild( bottomImg );
GEvent.addDomListener( bottomImg , 'click' , function() {
map.panDirection( 0 , -1 );
} );
map.getContainer().appendChild( container );
return container;
}
CompactMoveControl.prototype.getDefaultPosition = function() {
return new GControlPosition( G_ANCHOR_TOP_LEFT , new GSize( 9 , 9 ) );
}
CompactMoveControl.prototype.setContainerStyle = function( obj ) {
obj.style.width = '34px';
obj.style.textAlign = 'center';
}
CompactMoveControl.prototype.setDivStyle = function( obj ) {
obj.style.height = '18px';
}
CompactMoveControl.prototype.setImgStyle = function( obj ) {
obj.style.cursor = 'pointer';
}
CompactMoveControl.prototype.setLeftStyle = function( obj ) {
obj.style.cursor = 'pointer';
obj.style.margin = '0 2px 0 0';
}
var Map = Class.create();
Map.prototype = {
initialize : function( id ) {
this.map = new GMap2( id );
this.icon = new GIcon();
this.icon.image = "images/icon.png";
this.icon.shadow = "images/shadow.png";
this.icon.iconSize = new GSize( 30 , 28 );
this.icon.shadowSize = new GSize( 30 , 28 );
this.icon.iconAnchor = new GPoint( 9 , 26 );
this.icon.infoWindowAnchor = new GPoint( 9 , 0 );
} ,
build : function() {
this.map.addControl( new GScaleControl() );
this.map.addControl( new CompactMoveControl() );
this.map.setCenter( new GLatLng( 35.01 , 135.76 ) , 13 );
var self = this;
} ,
zoomIn : function() {
this.map.zoomIn();
} ,
zoomOut : function() {
this.map.zoomOut();
} ,
getMarkers : function( number ) {
$( 'mapLoading' ).innerHTML = '画廊データを読み込んでいます。しばらくお待ちください。';
var self = this;
var ajax = new Ajax.Request( '../map/map.php' , {
onComplete : function( transport ) {
self.setMarker( transport , number );
}
} );
} ,
setMarker : function( transport , direct ) {
if ( transport.responseText ) {
var markers = eval( '(' + transport.responseText + ')' );
var number , name , address , lat , lng;
for ( var i = 0; i < markers.length; i++ ) {
number = markers[i].number;
name = markers[i].name;
address = markers[i].address;
lat = markers[i].lat;
lng = markers[i].lng;
if ( number == direct ) {
this.createMarker( number , name , address , lat , lng , true );
} else {
this.createMarker( number , name , address , lat , lng , false );
}
}
$( 'mapLoading' ).innerHTML = '画廊データの読み込みを完了しました。';
}
},
createMarker : function( number , name , address , lat , lng , direct ) {
var gp = new GLatLng( lat , lng );
var marker = new GMarker( gp , this.icon );
var html =
'' + name + '
' +
'' + address + '
' +
'';
GEvent.addListener( marker , 'click' , function() {
marker.openInfoWindowHtml( html );
} );
this.map.addOverlay( marker );
if ( direct ) {
this.map.setCenter( gp , 17 );
marker.openInfoWindowHtml( html );
}
}
};
var Main = Class.create();
Main.prototype = {
initialize : function( mapId ) {
this.mapId = $( mapId );
},
main : function() {
this.mapId.innerHTML = '';
this.mapId.style.width = '540px';
this.mapId.style.height = '460px';
var map = new Map( this.mapId );
map.build();
if ( location.href.indexOf( '#' ) > -1 ) {
map.getMarkers( location.href.substring( location.href.indexOf( '#' ) + 1 , location.href.length ) );
} else {
map.getMarkers( false );
}
Event.observe( $( 'zoomIn' ) , 'click' , function() {
map.zoomIn();
} , false );
Event.observe( $( 'zoomOut' ) , 'click' , function() {
map.zoomOut();
} , false );
}
};
window.onload = function() {
if ( GBrowserIsCompatible() ) {
var main = new Main( 'mapBox' );
main.main();
} else {
document.getElementById( 'mapLoading' ).innerHTML = 'ご利用の環境では地図を表示できません';
}
};