/* 変更するアイコンを指定する */
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;
/* shop_nameとマーカーを繋げるための配列 */
var markerc = [];
/* マップを定義する */
function load() {
map = new google.maps.Map(document.getElementById("googlemap"), {
center: new google.maps.LatLng(33.83916,132.765698),
zoom: 17,
mapTypeId: 'roadmap',
minZoom: 10,
maxZoom: 20
});
var infoWindow = new google.maps.InfoWindow;
/* XMLを受け取ってマーカー生成の準備 */
//XMLを読み込む部分
downloadUrl("./genxml.php?shub[]=8", function(data) {
var xml = data.responseXML;
markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var cd = markers[i].getAttribute("cd");
var address = markers[i].getAttribute("address1");
address = address + markers[i].getAttribute("address2");
address = address + markers[i].getAttribute("address3");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var yachin = markers[i].getAttribute("yachin");
var HEYA_CNT = markers[i].getAttribute("HEYA_CNT");
var MADORI_TYPE_KBN_CD = markers[i].getAttribute("MADORI_TYPE_KBN_CD");
//吹き出しの内容
var html = '
' +
'価格' + (parseFloat(yachin)) + '万円 |
' +
'' + HEYA_CNT + MADORI_TYPE_KBN_CD + ' |
' +
'' + address + ' |
' +
'詳しく見る |
' +
'
';
//マーカー作成
// 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("uploadFile");
if (!uploadFile) {
uploadFile = "noimg.png";
}
if (cou_l%2 == 0){bg_id = 'list_2';}
else{bg_id = 'list_1';}
shop_names[k] = shop_names[k] +
'- ' +
'

' +
'
' +
'' + markers[j].getAttribute("name") + '
'
}
}
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("shop_list").innerHTML = shop_names[num];
}
/* 店名をクリックしたときの動作 */
function Markerclick (num) {
google.maps.event.trigger(markerc[num], "click");
}
/* 地域をクリックしたときの動作 */
function move_center (lat,lng,zoom) {
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);