$(function(){
mapInit();
var position = $("#mapCanvas").offset().top-20;
$(".placeNameBoxWrap").click(function () {
$('html,body').animate({ scrollTop : position }, 'fast');
mapClick($(this).prop("rel"));
return false;
});
/*$(".placeNameBoxWrap").mouseover(function () {
mapClick($(this).prop("rel"));
return false;
});*/
$("#locationBtn").click(function () {
var selectLocation = $('[name=locationSelector]').val();
window.location.href = selectLocation;
location.reload();
});
});
//地図の基本設定
var myOptions;
var styledMapOptions;
var map;
var markers;
function mapInit() {
if("#sagamihara" == location.hash) {
sagamihara();
}else if("#machida" == location.hash) {
machida();
}else if("#hashimoto" == location.hash) {
hashimoto();
}else if("#fuchinobe" == location.hash) {
fuchinobe();
}else if("#hachioji" == location.hash) {
hachioji();
}else{
sagamihara();
}
//地図のスタイルを設定
var styleOptions = [
{
"stylers": [
{ "gamma": 2.01 },
{ "hue": "#ff0033" },
{ "visibility": "simplified" },
{ "lightness": -5 },
{ "saturation": -5 }
]
}
];
var mapType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
map.mapTypes.set('okusama', mapType);
map.setMapTypeId('okusama');
var countNum = 0;
for (var i = 0; i < markers.length; i++) {
countNum++;
icon = new google.maps.MarkerImage(
'/sagamihara/images/mapIconBL_'+ countNum +'.png',
new google.maps.Size(25,37),
new google.maps.Point(0,0)
);
var content = markers[i][0];
var latlng = new google.maps.LatLng(markers[i][1],markers[i][2]);
createMarker(latlng,content,map,icon,i);
}
}
//JR相模原駅
function sagamihara() {
$(".locationSelector").val("#sagamihara");
$('.sagamihara').css('display','block');
//地図の中心点と拡大率を設定
myOptions = {
zoom: 16,
disableDefaultUI: true,
/*streetViewControl: false,*/
center: new google.maps.LatLng(35.5793840,139.3693282),
mapTypeControlOptions: { mapTypeIds: ['okusama', google.maps.MapTypeId.ROADMAP] }
};
map = new google.maps.Map(document.getElementById("mapCanvas"),myOptions);
styledMapOptions = { name: 'JR相模原駅待ち合わせ場所' }
//アイコンの場所の名前と緯度経度を追加
markers = [
['
ローソン さがみ夢大通り店
'+
'',
35.5786700, 139.3692330],
['
串カツ田中 相模原店
'+
'
',
35.5796070, 139.3704742],
['
ホテルウォーターゲート相模原
'+
'
',
35.5782410, 139.3706210],
['
相模原プラザ
'+
'
',
35.5797510, 139.3706715]
];
}
//町田駅
function machida() {
$(".locationSelector").val("#machida");
$('.machida').css('display','block');
//地図の中心点と拡大率を設定
myOptions = {
zoom: 18,
disableDefaultUI: true,
/*streetViewControl: false,*/
center: new google.maps.LatLng(35.5419950,139.4454127),
mapTypeControlOptions: { mapTypeIds: ['okusama', google.maps.MapTypeId.ROADMAP] }
};
map = new google.maps.Map(document.getElementById("mapCanvas"),myOptions);
styledMapOptions = { name: '町田駅待ち合わせ場所' }
//アイコンの場所の名前と緯度経度を追加
markers = [
['
ローソン 町田中央南口店
'+
'
',
35.5416168, 139.4457306],
['
デニーズ 町田南口店
'+
'
',
35.5418845, 139.4448945]
];
}
//橋本駅
function hashimoto() {
$(".locationSelector").val("#hashimoto");
$('.hashimoto').css('display','block');
//地図の中心点と拡大率を設定
myOptions = {
zoom: 17,
disableDefaultUI: true,
/*streetViewControl: false,*/
center: new google.maps.LatLng(35.5948778,139.3449312),
mapTypeControlOptions: { mapTypeIds: ['okusama', google.maps.MapTypeId.ROADMAP] }
};
map = new google.maps.Map(document.getElementById("mapCanvas"),myOptions);
styledMapOptions = { name: '橋本駅待ち合わせ場所' }
//アイコンの場所の名前と緯度経度を追加
markers = [
['
橋本駅 南口 ロータリー
'+
'
',
35.5940471, 139.3453296]
];
}
//淵野辺駅
function fuchinobe() {
$(".locationSelector").val("#fuchinobe");
$('.fuchinobe').css('display','block');
//地図の中心点と拡大率を設定
myOptions = {
zoom: 17,
disableDefaultUI: true,
/*streetViewControl: false,*/
center: new google.maps.LatLng(35.5686933,139.3948411),
mapTypeControlOptions: { mapTypeIds: ['okusama', google.maps.MapTypeId.ROADMAP] }
};
map = new google.maps.Map(document.getElementById("mapCanvas"),myOptions);
styledMapOptions = { name: '淵野辺駅待ち合わせ場所' }
//アイコンの場所の名前と緯度経度を追加
markers = [
['
ローソン 淵野辺駅前店
'+
'
',
35.5690970, 139.3943523],
['
ファミリーマート相模原淵野辺四丁目店
'+
'
',
35.5685482, 139.3965366]
];
}
//八王子駅
function hachioji() {
$(".locationSelector").val("#hachioji");
$('.hachioji').css('display','block');
//地図の中心点と拡大率を設定
myOptions = {
zoom: 15,
disableDefaultUI: true,
/*streetViewControl: false,*/
center: new google.maps.LatLng(35.6556165,139.3387998),
mapTypeControlOptions: { mapTypeIds: ['okusama', google.maps.MapTypeId.ROADMAP] }
};
map = new google.maps.Map(document.getElementById("mapCanvas"),myOptions);
styledMapOptions = { name: '八王子駅待ち合わせ場所' }
//アイコンの場所の名前と緯度経度を追加
markers = [
['
サーティワンアイスクリーム セレオ八王子店前(2F)
'+
'
',
35.6546600, 139.3388800],
['
多摩信用金庫 八王子駅前支店前
'+
'
',
35.6541600, 139.3375600],
['
ドン・キホーテ 八王子駅前店
'+
'
',
35.6578800, 139.3371000],
['
スターバックスコーヒー 八王子オクトーレ店
'+
'
',
35.6571310, 139.3386510]
];
}
//アイコンの設定
var currentInfoWindow = null;
var gmarkers = [];
function createMarker(latlng,content,map,icon,i){
var iwopts = {maxWidth: 250,};
var infoWindow = new google.maps.InfoWindow(iwopts);
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: icon,
animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'click', function() {
if (currentInfoWindow) {
currentInfoWindow.close();
}
/*infoWindow.close();*/
infoWindow.setContent(content);
infoWindow.open(map,marker);
currentInfoWindow = infoWindow;
});
i++;
gmarkers[i] = marker;
}
//アイコンとテキストリンクのクリックイベント
function mapClick(i) {
google.maps.event.trigger(gmarkers[i], "click");
map.setCenter(gmarkers[i].getPosition());
}