/* 変更するアイコンを指定する */
var customIcons = {
1: {
icon: "./image_pin/p1.png",
shadow: "./image_pin/msmarker_shadow.png"
},
2: {
icon: "./image_pin/p2.png",
shadow: "./image_pin/msmarker_shadow.png"
},
3: {
icon: "./image_pin/p3.png",
shadow: "./image_pin/msmarker_shadow.png"
},
4: {
icon: "./image_pin/p4.png",
shadow: "./image_pin/msmarker_shadow.png"
},
5: {
icon: "./image_pin/p5.png",
shadow: "./image_pin/msmarker_shadow.png"
},
6: {
icon: "./image_pin/p6.png",
shadow: "./image_pin/msmarker_shadow.png"
},
7: {
icon: "./image_pin/p7.png",
shadow: "./image_pin/msmarker_shadow.png"
},
8: {
icon: "./image_pin/p8.png",
shadow: "./image_pin/msmarker_shadow.png"
},
9: {
icon: "./image_pin/p9.png",
shadow: "./image_pin/msmarker_shadow.png"
},
10: {
icon: "./image_pin/p10.png",
shadow: "./image_pin/msmarker_shadow.png"
}
};
var markers;
var map;
var k;
var shop_names;
var get = new Object();
/* shop_nameとマーカーを繋げるための配列 */
var markerc = [];
/* マップを定義する */
function load() {
map = new google.maps.Map(document.getElementById("area_map"), {
center: new google.maps.LatLng(33.8922,133.1),
zoom: 11,
mapTypeId: 'roadmap',
minZoom: 8,
maxZoom: 20
});
var infoWindow = new google.maps.InfoWindow;
/* XMLを受け取ってマーカー生成の準備 */
//XMLを読み込む部分
downloadUrl("./genxml.php?cat=2&area=1", function(data) {
var xml = data.responseXML;
markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var tel = markers[i].getAttribute("tel");
var address = markers[i].getAttribute("address");
var teikyu = '';
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var category = markers[i].getAttribute("category");
var honbun = markers[i].getAttribute("honbun");
var uploadFile = markers[i].getAttribute("uploadFile");
if (!uploadFile) {
uploadFile = "noimg.png";
}
//吹き出しの内容
var html = '
' +
// ' |
' +
// '
' + linkurl + name + linkurl_b + ' |
' +
'' + name + ' |
' +
'' + honbun + ' |
' +
'' + address + ' |
' +
'TEL ' + tel + ' |
' +
'' + teikyu + ' |
' +
' |
' +
'
';
//マーカー作成
var icon = customIcons[category] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow,
title: name
});
bindInfoWindow(marker, map, infoWindow, html);
//マーカーを配列に格納
markerc.push(marker);
}
//マーカーをクラスタ化
// var markerCluster = new MarkerClusterer(map, markerc,{gridSize:20 ,maxZoom:19 });
//地図の動きが止まったら開始
google.maps.event.addListener(map, 'idle', create_side);
//shop_nameを作成する
create_side();
});
}
/* 実際に吹き出しを定義する */
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
map.setZoom(20);
infoWindow.open(map, marker);
});
}
/* MSXML */
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
/* 何もしない */
function doNothing() {}
/* shop_nameの内容を生成する部分 */
function create_side() {
if (map != null && map != undefined) {
//地図の範囲を取得
var map_bounds = map.getBounds();
if (map_bounds != null) {
var swLatlng = map_bounds.getSouthWest();
var swlat = swLatlng.lat();
var swlng = swLatlng.lng();
var neLatlng = map_bounds.getNorthEast();
var nelat = neLatlng.lat();
var nelng = neLatlng.lng();
//範囲内の店名を取り出す
k = 1;
shop_names = [];
shop_names[k] = "";
var cou_l = 0;
for (var j = 0; j < markers.length; j++) {
if (swlat <= parseFloat(markers[j].getAttribute("lat")) &&
nelat >= parseFloat(markers[j].getAttribute("lat")) &&
swlng <= parseFloat(markers[j].getAttribute("lng")) &&
nelng >= parseFloat(markers[j].getAttribute("lng"))) {
// if (cou_l%10 == 0 && cou_l != 0) {
// k++;
// shop_names[k] = "";
// }
cou_l++;
var uploadFile = markers[j].getAttribute("photo");
if (!uploadFile) {
uploadFile = "noimg.png";
}
var hp = markers[j].getAttribute("linkurl")
var link = "なし";
if (hp != "なし") {
link = '' + hp + '';
}
if (cou_l%2 == 0){bg_id = '';}
else{bg_id = ' bk-gray';}
shop_names[k] = shop_names[k] +
'' + markers[j].getAttribute("name") + '' + markers[j].getAttribute("catch") + '' + '' +
'' +
'' + markers[j].getAttribute("honbun") + '' +
'' +
'' +
' | ' +
'' + markers[j].getAttribute("address") + ' |
' +
' | ' +
'' + markers[j].getAttribute("tel") + ' |
' +
' | ' +
'' + markers[j].getAttribute("time") + ' |
' +
' | ' +
'' + markers[j].getAttribute("hldy") + ' |
' +
' | ' +
'' + markers[j].getAttribute("park") + ' |
' +
' | ' +
'' + link + ' |
' +
'
';
}
}
move_list(1);
// make_list();
}
}
}
/* 店舗リストのページ送り動作を作成 */
/* k:配列の最大数 l:ページ送りを書き込む処理を行っている配列番号 m:ループ処理用 n:ページ番号を書き込んだ回数 */
function make_list () {
for (var l = 1; l <= k; l++) {
if (l == 1) {
shop_names[l] = shop_names[l] + '前 [';
}else{
var before_n = l - 1;
shop_names[l] = shop_names[l] + ' [';
}
for (var m = l-3, n = 0; m <= k && n <= 6; m++) {
if (m == l) {
if (n == 0) {
shop_names[l] = shop_names[l] + m;
}else{
shop_names[l] = shop_names[l] + -m;
}
n++;
}else if (l == k && n == 0 && m > 3) {
var ms = m - 3;
shop_names[l] = shop_names[l] + '';
ms = m - 2;
shop_names[l] = shop_names[l] + '-';
ms = m - 1;
shop_names[l] = shop_names[l] + '-';
ms = m;
shop_names[l] = shop_names[l] + '-';
n++;
}else if (l >= k-1 && n == 0 && m > 2) {
var ms = m - 2;
shop_names[l] = shop_names[l] + '';
ms = m - 1;
shop_names[l] = shop_names[l] + '-';
ms = m;
shop_names[l] = shop_names[l] + '-';
n++;
}else if (l >= k-2 && n == 0 && m > 1) {
var ms = m - 1;
shop_names[l] = shop_names[l] + '';
ms = m;
shop_names[l] = shop_names[l] + '-';
n++;
}else if (m > 0 && n == 0){
shop_names[l] = shop_names[l] + '';
n++;
}else if (m > 0) {
shop_names[l] = shop_names[l] + '-';
n++;
}
}
if (l == k) {
shop_names[l] = shop_names[l] + '] 次
';
}else{
var next_n = l + 1;
shop_names[l] = shop_names[l] + '] ';
}
}
move_list(1);
}
/* 店舗リストの表示を行う部分 */
function move_list (num) {
document.getElementById("dtl_list").innerHTML = shop_names[num];
}
/* 店名をクリックしたときの動作 */
function Markerclick (num) {
google.maps.event.trigger(markerc[num], "click");
}
/* 地域をクリックしたときの動作 */
function move_center (lat,lng,zoom,e_name) {
var c_point = new google.maps.LatLng(lat,lng);
map.setZoom(zoom);
map.panTo(c_point);
document.getElementById("eria_fix").innerHTML = e_name;
}
google.maps.event.addDomListenerOnce(window, 'load', load);
google.maps.event.addDomListenerOnce(window, 'tilesloaded', create_side);