/**
* gmap.js
* @version 1.5.0.1 - 19:03 2009/01/21
* @author Toki
*
* mark: [
* {
* latlng: [経度, 緯度] （必須）
* iconsrc: 'カスタムアイコンのパス' （オプション）
* html: 'マーカーをクリックしたときの表示する内容' （オプション）
* id: '地図をコントロールする要素を作成（要素を作成するコンテナのid名）' （オプション）
* page: '複数ページで使用する際、それぞれのページで中心位置を変えたいときのbodyのクラス名' （オプション）
* }
* ],
*
* Google Maps API リファレンス - Google Maps API - Google Code
* http://code.google.com/intl/ja/apis/maps/documentation/reference.html
*/
Kaas.addEvent(window, 'load', function() {
switch(location.search) {
case '?haborland' :
Kaas.setGmaps.init(34.677809, 135.183474);
break;
case '?osakaminami' :
Kaas.setGmaps.init(34.564783, 135.513412);
break;
case '?kyoto' :
Kaas.setGmaps.init(35.01037638414067, 135.7592797279358);
// Kaas.setGmaps.init(35.0096677, 135.7549696);
break;
case '?shinsaibashi' :
default :
Kaas.setGmaps.init('class');
break;
}
// Kaas.setGmaps.getGeoCoder('東京都新宿区新宿3-18-1');
});
Kaas.setGmaps = {
mark: [
{
latlng: [34.675668, 135.503068],
page: 'studio',
id: 'sectionA',
iconsrc: '../img/gmap_icon_b.png',
html: '心斎橋店
〒542-0081
大阪府大阪市中央区南船場 3-4-26 出光ナガホリビル12階
'
}, {
latlng: [34.677809, 135.183474],
id: 'sectionB',
iconsrc: '../img/gmap_icon_b.png',
html: '神戸ハーバーランド店
〒650-0044
兵庫県神戸市中央区東川崎町 1-5-5 ハーバーランド煉瓦倉庫
'
}, {
latlng: [34.564783, 135.513412],
id: 'sectionC',
iconsrc: '../img/gmap_icon_b.png',
html: '大阪南店
〒591-8025
大阪府堺市北区長曽根町 3069-7
'
}, {
latlng: [35.01037638414067, 135.7592797279358],
id: 'sectionD',
iconsrc: '../img/gmap_icon_b.png',
html: '京都店
〒604-8171
京都市中京区烏丸通御池下る虎屋町
566-1 井門明治安田生命ビルB１F
'
}
],
defaultZoom: 16,
infoWindowMaxWidth: 300,
anchorToGMap: '#sectionGmaps',
init: function(c) {
var gmaps = document.getElementById('gmaps');
gmaps.innerHTML = '';
this.gmap = new GMap2(document.getElementById('gContainer'));
/**
* 中心位置を設定
*
* 1. 中心位置を mark の1つ目の位置にセット {Null}
* @usage
* ----------------------------
* Kaas.addEvent(window, 'load', function() {
* Kaas.setGmaps.init();
* });
* ----------------------------
* var center = this.mark[0].latlng;
*
* 2. 中心位置を直接入力 {Number}
* @usage
* ----------------------------
* Kaas.addEvent(window, 'load', function() {
* Kaas.setGmaps.init(34.6800535, 135.1841097);
* });
* ----------------------------
* var center = [arguments[0], arguments[1]];
*
* 3. 複数ページで使用する際、bodyのクラス名から中心位置を変えたいとき {String}
* @see getCenter()
* @usage
* ----------------------------
* Kaas.addEvent(window, 'load', function() {
* Kaas.setGmaps.init('c');
* });
* ----------------------------
* var center = this.getCenter();
*/
var center;
// 3. 複数ページで使用する際、bodyのクラス名から中心位置を変えたいとき
if (c == 'class')
center = this.getCenter();
// 2. 中心位置を直接入力
else if (typeof c == 'number')
center = [arguments[0], arguments[1]];
// 1. 中心位置を mark の1つ目の位置にセット
else
center = this.mark[0].latlng;
// 中心位置を設定
this.gmap.setCenter(new GLatLng(center[0], center[1]), this.defaultZoom);
// コントローラ作成
this.gmap.addControl(new GMapTypeControl());
this.gmap.addControl(new GLargeMapControl());
// this.gmap.addControl(new GSmallMapControl());
// マーカー作成
for (var i = 0, l = this.mark.length; i < l; i++) {
var marker = this.createGMarker(i);
this.gmap.addOverlay(marker);
/**
* mark[i] に id がある場合、クリックするとセンターを移動するための制御要素を作成
* @see onSetCenter()
*/
if (this.mark[i].id != undefined) this.onSetCenter(i, marker);
}
},
/**
* マーカー作成
* @param i : mark のインデックス
* @return {GMarker}
*/
createGMarker: function(i) {
var m = this.mark[i];
// Icon
var markerOpt = (m.iconsrc != undefined)? { icon: this.createGIcon(m.iconsrc) } : {};
var marker = new GMarker(new GLatLng(m.latlng[0], m.latlng[1]), markerOpt);
// infoWindow 幅の指定
var infoWindowOpt = this.gmap.getInfoWindow();
infoWindowOpt.maxWidth = this.infoWindowMaxWidth;
if (m.html != undefined) GEvent.addListener(marker, 'click', function() { marker.openInfoWindowHtml(m.html, infoWindowOpt); });
return marker;
},
/**
* カスタムアイコン作成
* @todo とりあえず影のパスやサイズ等は固定（変えたい場合はカスタマイズ）
* @param src : アイコンのパス
* @return {GIcon}
*/
createGIcon: function(src) {
var icon = new GIcon(G_DEFAULT_ICON);
icon.image = src;
icon.shadow = '../img/gmap_shadow.png';
icon.iconSize = new GSize(25, 32);
icon.shadowSize = new GSize(25, 38);
icon.iconAnchor = new GPoint(13, 32);
return icon;
},
/**
* クリックイベント
* マップコントロールのハンドラとなる要素をクリックするとセンターを移動
* @param i : mark のインデックス
* @param marker : 対応するマーカー
* @return {Void}
*/
onSetCenter: function(i, marker) {
var m = this.mark[i];
if (!document.getElementById(m.id)) return;
var g = this.gmap;
var a = this.createCenterControlElement(i);
a.i = i;
anchor = this.anchorToGMap;
a.onmouseover = function() {
Kaas.addClass(this, 'handlerOver');
};
a.onmouseout = function() {
Kaas.removeClass(this, 'handlerOver');
};
a.onclick = function() {
g.panTo(new GLatLng(m.latlng[0], m.latlng[1]));
if (m.html != undefined) {
var w = this.infoWindowMaxWidth;
var infoWindowOpt = g.getInfoWindow();
infoWindowOpt.maxWidth = w;
var timerId = setTimeout(function() {
marker.openInfoWindowHtml(m.html, infoWindowOpt);
}, 300);
}
//
if (anchor) {
window.location.href = anchor;
return false;
}
};
},
/**
* マップコントロールのハンドラとなる要素を作成
* @param i : mark のインデックス
* @return {Object}
*/
createCenterControlElement: function(i) {
var m = this.mark[i];
var div = document.createElement('div');
div.id = m.id + 'Handler';
div.className = 'handler';
div.innerHTML = '地図上に表示';
return document.getElementById(m.id).appendChild(div);
},
/**
* body の class名と連動させて最初の表示位置を変える時
* @return {Array}
*/
getCenter: function() {
var bodyClassNames = document.getElementsByTagName('body')[0].className.split(' ');
var bodyClassName = bodyClassNames[bodyClassNames.length - 1];
var m = this.mark;
for (var i = 0, l = m.length; i < l; i++) {
if (m[i].page == bodyClassName) return m[i].latlng;
}
},
/**
* 緯度・経度をユーザープロンプトで出力
* @param address : 緯度・経度を調べたい住所
* @return {Void}
*/
getGeoCoder: function(address) {
var geocoder = new GClientGeocoder();
var g = this.gmap;
geocoder.getLatLng(address, function(e) {
if (e != null) {
g.panTo(e);
var str = e.toString().replace(/\(/, '');
prompt(address, str.replace(/\)/, ''));
} else {
alert('指定した住所はありません\n' + address);
}
});
},
gmap: {}
};