//ローディングされたら動く google.maps.event.addDomListener(window, 'load', function() { var myLatlng = new google.maps.LatLng(31.8097736, 130.3262816);//店舗位置 //複数店舗情報を入れるための配列 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("鹿児島川内店"); 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=276', 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(); } } } });