var map;
var marker = [];
var infoWindow = [];
var markerData = [{
    name: '湯布高原　中古住宅',
    lat: 33.26578307455173,
    lng: 131.32377202965026,
    img: '/img_file/data/1713336545412-1.jpg',
    url: '/search/house/detail.php?1713336545412'
  }
,{
    name: '白滝の里　別荘',
    lat: 33.28163849374046,
    lng: 131.3525050804808,
    img: '/img_file/data/169743325628005-1.jpg',
    url: '/search/house/detail.php?169743325628005'
  }
,{
    name: '東石松　中古住宅　商談中',
    lat: 33.25830285052673,
    lng: 131.35768900534916,
    img: '/img_file/data/169572390525924-1.jpg',
    url: '/search/house/detail.php?169572390525924'
  }
,{
    name: '♨川上地区　中古住宅',
    lat: 33.27489513609131,
    lng: 131.36778222537018,
    img: '/img_file/data/164422003117066-1.jpg',
    url: '/search/house/detail.php?164422003117066'
  }
,{
    name: '県道２１０号線沿い　売店舗！',
    lat: 33.25050187098771,
    lng: 131.32642267078307,
    img: '/img_file/data/162916960731525-1.jpg',
    url: '/search/house/detail.php?162916960731525'
  }
,{
    name: '中川地区　工場',
    lat: 33.241316808746056,
    lng: 131.33287543639148,
    img: '/img_file/data/162916829826645-1.jpg',
    url: '/search/house/detail.php?162916829826645'
  }
,{
    name: '♨白滝の里　売別荘',
    lat: 33.2815217198323,
    lng: 131.35278224522867,
    img: '/img_file/data/16270250181824-1.jpg',
    url: '/search/house/detail.php?16270250181824'
  }
,{
    name: '♨中川地区　中古住宅',
    lat: 33.24697888816257,
    lng: 131.3415506645975,
    img: '/img_file/data/162702204624653-1.jpg',
    url: '/search/house/detail.php?162702204624653'
  }
,{
    name: '湯平地区　売別荘',
    lat: 33.18284984737118,
    lng: 131.33053250833456,
    img: '/img_file/data/162702090521644-1.jpg',
    url: '/search/house/detail.php?162702090521644'
  }
];
function initMap() {
  // 地図の作成
  var mapLatLng = new google.maps.LatLng({
    lat: 33.2626697,
    lng: 131.355101,
//    lat: markerData[0]['lat'],
//    lng: markerData[0]['lng']
  }); // 緯度経度のデータ作成
  map = new google.maps.Map(document.getElementById('map'), { // #sampleに地図を埋め込む
    center: mapLatLng, // 地図の中心を指定
    zoom: 15 // 地図のズームを指定
  });

  // マーカー毎の処理
  for (var i = 0; i < markerData.length; i++) {
    markerLatLng = new google.maps.LatLng({
      lat: markerData[i]['lat'],
      lng: markerData[i]['lng']
    }); // 緯度経度のデータ作成
    marker[i] = new google.maps.Marker({ // マーカーの追加
      position: markerLatLng, // マーカーを立てる位置を指定
      map: map // マーカーを立てる地図を指定
    });

    infoWindow[i] = new google.maps.InfoWindow({ // 吹き出しの追加
      content: 
      '<div class="infowindow">' +
      '<h2>' + markerData[i]['name'] + '</h2>' +
      '<figure><img src="' + markerData[i]['img'] + '" alt=""/></figure>' +
      '<a href="' + markerData[i]['url'] + '">詳細はこちら</a>' +
      '</div>' // 吹き出しに表示する内容
    });

    markerEvent(i); // マーカーにクリックイベントを追加
  }
}

// マーカーにクリックイベントを追加
function markerEvent(i) {
  marker[i].addListener('click', function () { // マーカーをクリックしたとき
    infoWindow[i].open(map, marker[i]); // 吹き出しの表示
  });
}