//ローディングされたら動く
google.maps.event.addDomListener(window, 'load', function() {
var myLatlng = new google.maps.LatLng(35.34674884908363, 137.1541331);//店舗位置
//複数店舗情報を入れるための配列
var marker_array = new Array();
//地図の初期設定
var myOptions = {
zoom: 14,//校正時だけ19に普段は14
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP };
//地図
var map = new google.maps.Map(document.getElementById("map"),myOptions);
//情報ウィンドウ初期化
var infowindow = new google.maps.InfoWindow();
//初期マーカー
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
zIndex : 10000,
icon: new google.maps.MarkerImage( "https://www.24028.jp/tenpo/image/mimiicon-blue.png",
new google.maps.Size(64, 64),
new google.maps.Point(0,0),
new google.maps.Point(25,62) ) });
// 初期マーカクリック時に店名表示
google.maps.event.addListener(marker, 'mouseover', function () {
if(infowindow) infowindow.close();
infowindow.setContent("2022年10月7日(金)グランドオープン
イオンモール土岐店");
infowindow.open(map, marker);
});
//近くの店舗読込とマーカーセット
google.maps.event.addListener(map, 'tilesloaded', function(){
setShopPoint();
});
//XMLで店舗情報取得
function setShopPoint(){
//表示されている店舗ポイントを削除
Pointdelete();
//地図の範囲内を取得
var bounds = map.getBounds();
ne_lat = bounds.getNorthEast().lat();//右上の経度
sw_lat = bounds.getSouthWest().lat();//左下の緯度
ne_lng = bounds.getNorthEast().lng();//右上の経度
sw_lng = bounds.getSouthWest().lng();//左下の緯度
//zoom値を取得
var zoomLevel = map.getZoom();
//XML取得
$.ajax({
url: 'files/xml.php?ne_lat='+ne_lat+'&sw_lat='+sw_lat+'&ne_lng='+ne_lng+'&sw_lng='+sw_lng+'&seq=1214',
type: 'GET',
dataType: 'xml',
timeout: 10000,
error: function(){
alert("情報の読み込みに失敗しました");
},
success: function(xml){
//帰ってきた地点の数だけループ
$(xml).find("ShopInfo").each(function(){
var ShopInfoLat = $("lat",this).text();
var ShopInfoLng = $("lng",this).text();
var ShopInfoName = $("name",this).text();
var ShopInfoLink = $("shoplink",this).text();
//マーカーをセット
makShopMaker(ShopInfoLat,ShopInfoLng,ShopInfoName,ShopInfoLink,zoomLevel);
});
}
});
}
// MarkerとInfoWindowを登録
function makShopMaker(ShopInfoLat,ShopInfoLng,ShopInfoName,ShopInfoLink,zoomLevel) {
var marker_num = marker_array.length;
if(zoomLevel < 10){
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(ShopInfoLat, ShopInfoLng),
map: map,
icon: new google.maps.MarkerImage( "https://www.24028.jp/tenpo/image/mimiicon-blue-circle.png", new google.maps.Size(15, 12), new google.maps.Point(0,0), new google.maps.Point(5,3) )
});
}else if(zoomLevel < 12){
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(ShopInfoLat, ShopInfoLng),
map: map,
icon: new google.maps.MarkerImage( "https://www.24028.jp/tenpo/image/mimiicon-mini-blue2.png", new google.maps.Size(44, 44), new google.maps.Point(0,0), new google.maps.Point(17,40) )
});
}else{
var marker2 = new google.maps.Marker({
position: new google.maps.LatLng(ShopInfoLat, ShopInfoLng),
map: map,
icon: new google.maps.MarkerImage( "https://www.24028.jp/tenpo/image/mimiicon-blue-usui.png", new google.maps.Size(64, 64), new google.maps.Point(0,0), new google.maps.Point(25,62) )
});
}
marker_array[marker_num] = marker2;
// マーカクリック時
google.maps.event.addListener(marker2, 'mouseover', function (e) {
infowindow.setContent(""+ShopInfoName+"");
infowindow.open(map, marker2);
//map.panTo(arrData[n]["LatLng"]);
});
}
//マーカー削除
function Pointdelete() {
//表示中のマーカーがあれば削除
if(marker_array.length > 0){
//マーカー削除
for (i = 0; i < marker_array.length; i++) {
marker_array[i].setMap();
}
//配列削除
for (i = 0; i <= marker_array.length; i++) {
marker_array.shift();
}
}
}
});