var circle = new Array();
var marker = new Array();

r_suishitsu_list = ['shimonada', 'iegushi', 'kitanada', 'shitaba', 'miura', 'uwajima', 'yoshida'];

function display_map(zoom, c_lat, c_lng) {
  /*
    var min_lat = 90, max_lat = 0, min_lng = 180, max_lng = 0;
    for(var i = 0; i < suishitsu_list.length; i++) {
        if(suishitsu_lat_list[suishitsu_list[i]] <= min_lat) min_lat = suishitsu_lat_list[suishitsu_list[i]];
        if(suishitsu_lat_list[suishitsu_list[i]] >= max_lat) max_lat = suishitsu_lat_list[suishitsu_list[i]];
        if(suishitsu_lng_list[suishitsu_list[i]] <= min_lng) min_lng = suishitsu_lng_list[suishitsu_list[i]];
        if(suishitsu_lng_list[suishitsu_list[i]] >= max_lng) max_lng = suishitsu_lng_list[suishitsu_list[i]];
    }
*/
  var position = new google.maps.LatLng(c_lat, c_lng);
  var map = new google.maps.Map(document.getElementById('canvas3'), {
    zoom: zoom,
    center: position,
    scrollwheel: true,
    disableDoubleClickZoom: false,
    draggable: true,
    mapTypeControl: false,
    panControl: false,
    zoomControl: true,
    scaleControl: false,
    streetViewControl: false,
    keyboardShortcuts: false,
    fullscreenControl: false,
  });

  var styleOptions = [
    {
      feartureType: 'all',
      elementType: 'labels',
      stylers: [{ visibility: 'off' }],
    },
  ];
  var lopanType = new google.maps.StyledMapType(styleOptions);
  map.mapTypes.set('noText', lopanType);
  map.setMapTypeId('noText');

  for (var i = 0; i < r_suishitsu_list.length; i++) {
    if (r_suishitsu_list[i] == '') continue;
    circle[i] = new google.maps.Circle({
      center: new google.maps.LatLng(suishitsu_lat_list[suishitsu_list[i]], suishitsu_lng_list[suishitsu_list[i]]),
      fillColor: '#00a2e8',
      fillOpacity: 1,
      map: map,
      radius: 400 * Math.pow(2, 10 - zoom),
      strokeColor: '#00a2e8',
      strokeOpacity: 0,
      strokeWeight: 2,
    });

    var img = './image/' + r_suishitsu_list[i] + '.png';
    marker[i] = new google.maps.Marker({
      position: new google.maps.LatLng(suishitsu_lat_list[suishitsu_list[i]], suishitsu_lng_list[suishitsu_list[i]]),
      map: map,
      icon: img,
    });
  }

  google.maps.event.addListener(map, 'zoom_changed', function () {
    var latlng = map.getCenter();
    lat = latlng.lat();
    lng = latlng.lng();
    display_map(map.getZoom(), lat, lng);
    for (var i = 0; i < suishitsu_list.length; i++) {
      addEvent(i);
    }
  });
}

function addEvent(i) {
  marker[i].addListener('mouseover', function () {
    display_table(true, suishitsu_list[i], p_mode);
  });

  marker[i].addListener('mouseout', function () {
    display_table(true, '', p_mode);
  });
  circle[i].addListener('mouseover', function () {
    display_table(true, suishitsu_list[i], p_mode);
  });

  circle[i].addListener('mouseout', function () {
    display_table(true, '', p_mode);
  });
}