var gmarkers = [];

var baseIcon = new GIcon();
baseIcon.shadowSize = new GSize(30, 30);
baseIcon.iconSize = new GSize(30, 30);
baseIcon.iconAnchor = new GPoint(7, 30);
baseIcon.infoWindowAnchor = new GPoint(7, 15);
baseIcon.infoShadowAnchor = new GPoint(30, 30);



// NEW - This function picks up the click and opens the corresponding info window
function myclick(i) {
      GEvent.trigger(gmarkers[i], "click");
    }

function load() {

var markerBounds = new GLatLngBounds();

function createMarker(point, i, businessid, html) {
  var letter = String.fromCharCode("A".charCodeAt(0) + i);
  var $markerletter = letter;
  var icon = new GIcon(baseIcon);
  icon.image = 'mapassets/redmarker.png';
  var marker = new GMarker(point, icon);
  GEvent.addListener(marker, "click", function() {
    marker.openExtInfoWindow(map,
              "simple_example_window",html, {beakOffset: 3});
  });
markerBounds.extend(marker.getLatLng()); 
// save the info we need to use later for the side_bar
gmarkers[i] = marker;
return marker;
}



var map = new GMap2(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.addMapType(G_PHYSICAL_MAP);
        map.removeMapType(G_HYBRID_MAP);
        map.setMapType(G_PHYSICAL_MAP);
        map.enableContinuousZoom();
       	map.setCenter(new GLatLng(22.9906, 120.1935), 12);

	document.getElementById('button-sidebar-hide').onclick = function() { return changeBodyClass('sidebar-right', 'nosidebar'); };
	document.getElementById('button-sidebar-show').onclick = function() { return changeBodyClass('nosidebar', 'sidebar-right'); };

function changeBodyClass(from, to) {
     document.body.className = document.body.className.replace(from, to);
     return false;
}

var businessid = (0);
var point = new GLatLng(22.994230,120.206190);
var html = '<div style="width:300px; height:auto;"><img src="mapassets/tn_00.jpg" width=300 height=225><h5>台南公會堂</h5></div>'
map.addOverlay(createMarker(point, 0, businessid, html));

var businessid = (1);
var point = new GLatLng(22.991900,120.187300);
var html = '<div style="width:300px; height:auto;"><img src="mapassets/tn_01.jpg" width=300 height=225><h5>國立台南生活美學館</h5></div>'
map.addOverlay(createMarker(point, 1, businessid, html));

var businessid = (2);
var point = new GLatLng(22.999316,120.211308);
var html = '<div style="width:300px; height:auto;"><img src="mapassets/tn_02.jpg" width=300 height=225><h5>西華堂</h5></div>'
map.addOverlay(createMarker(point, 2, businessid, html));

var businessid = (3);
var point = new GLatLng(22.989410,120.184271);
var html = '<div style="width:300px; height:auto;"><img src="mapassets/tn_03.jpg" width=300 height=225><h5>台南市政府</h5></div>'
map.addOverlay(createMarker(point, 3, businessid, html));

var businessid = (4);
var point = new GLatLng(22.984373,120.203336);
var html = '<div style="width:300px; height:auto;"><img src="mapassets/tn_04.jpg" width=300 height=225><h5>大南門城</h5></div>'
map.addOverlay(createMarker(point, 4, businessid, html));

var businessid = (5);
var point = new GLatLng(23.002743,120.211952);
var html = '<div style="width:300px; height:auto;"><img src="mapassets/tn_05.jpg" width=300 height=225><h5>台南公園</h5></div>'
map.addOverlay(createMarker(point, 5, businessid, html));

var businessid = (6);
var point = new GLatLng(22.996402,120.202038);
var html = '<div style="width:300px; height:auto;"><img src="mapassets/tn_06.jpg" width=300 height=225><h5>祀典武廟</h5></div>'
map.addOverlay(createMarker(point, 6, businessid, html));

var businessid = (7);
var point = new GLatLng(22.986930,120.197700);
var html = '<div style="width:300px; height:auto;"><img src="mapassets/tn_07.jpg" width=300 height=225><h5>大億麗緻酒店</h5></div>'
map.addOverlay(createMarker(point, 7, businessid, html));

var businessid = (8);
var point = new GLatLng(22.982239,120.205021);
var html = '<div style="width:300px; height:auto;"><img src="mapassets/tn_08.jpg" width=300 height=225><h5>五妃廟</h5></div>'
map.addOverlay(createMarker(point, 8, businessid, html));

var businessid = (9);
var point = new GLatLng(22.991918,120.202789);
var html = '<div style="width:300px; height:auto;"><img src="mapassets/tn_09.jpg" width=300 height=225><h5>土地銀行</h5></div>'
map.addOverlay(createMarker(point, 9, businessid, html));

var businessid = (10);
var point = new GLatLng(22.990530,120.203400);
var html = '<div style="width:300px; height:auto;"><img src="mapassets/tn_10.jpg" width=300 height=225><h5>武德殿</h5></div>'
map.addOverlay(createMarker(point, 10, businessid, html));

var businessid = (11);
var point = new GLatLng(22.992649,120.205107);
var html = '<div style="width:300px; height:auto;"><img src="mapassets/tn_11.jpg" width=300 height=225><h5>湯德彰紀念公園(民生綠園)</h5></div>'
map.addOverlay(createMarker(point, 11, businessid, html));

var businessid = (12);
var point = new GLatLng(22.983227,120.203251);
var html = '<div style="width:300px; height:auto;"><img src="mapassets/tn_12.jpg" width=300 height=225><h5>Former Tainan broadcast station</h5></div>'
map.addOverlay(createMarker(point, 12, businessid, html));

var businessid = (13);
var point = new GLatLng(22.990417,120.204624);
var html = '<div style="width:450px; height:300px; margin:0px; background-color:white;"><img style="float:left;margin-right:5px" src="mapassets/tn_13.jpg" width=225 height=300><h5>孔廟</h5></div>'
map.addOverlay(createMarker(point, 13, businessid, html));

var businessid = (14);
var point = new GLatLng(22.993360,120.205000);
var html = '<div style="width:300px; height:auto;"><img src="mapassets/tn_14.jpg" width=300 height=225><h5>台南測候所</h5></div>'
map.addOverlay(createMarker(point, 14, businessid, html));

var businessid = (15);
var point = new GLatLng(22.993222,120.205396);
var html = '<div style="width:450px; height:300px; margin:0px;  background-color:white;  font-size:14px;"><img style="float:left;margin-right:5px" src="mapassets/tn_15.jpg" width=225 height=300><h5>太平境馬雅各紀念教會</h5></div>'
map.addOverlay(createMarker(point, 15, businessid, html));

var businessid = (16);
var point = new GLatLng(22.997054,120.205890);
var html = '<div style="width:300px; height:auto;"><img src="mapassets/tn_16.jpg" width=300 height=225><h5>全台吳姓大宗祠</h5></div>'
map.addOverlay(createMarker(point, 16, businessid, html));

var businessid = (17);
var point = new GLatLng(22.987039,120.217445);
var html = '<div style="width:300px; height:auto;"><img src="mapassets/tn_17.jpg" width=300 height=225><h5>大東門</h5></div>'
map.addOverlay(createMarker(point, 17, businessid, html));

var businessid = (18);
var point = new GLatLng(22.998486,120.163865);
var html = '<div style="width:300px; height:auto;"><img src="mapassets/tn_18.jpg" width=300 height=225><h5>Museum of Canal</h5></div>'
map.addOverlay(createMarker(point, 18, businessid, html));

var businessid = (19);
var point = new GLatLng(22.986783,120.198455);
var html = '<div style="width:300px; height:auto;"><img src="mapassets/tn_19.jpg" width=300 height=225><h5>新光三越</h5></div>'
map.addOverlay(createMarker(point, 19, businessid, html));

var businessid = (20);
var point = new GLatLng(22.997350,120.202703);
var html = '<div style="width:300px; height:auto;"><img src="mapassets/tn_20.jpg" width=300 height=225><h5>赤崁樓</h5></div>'
map.addOverlay(createMarker(point, 20, businessid, html));

var businessid = (21);
var point = new GLatLng(22.992116,120.204678);
var html = '<div style="width:300px; height:auto;"><img src="mapassets/tn_21.jpg" width=300 height=225><h5>台灣文學館</h5></div>'
map.addOverlay(createMarker(point, 21, businessid, html));

var businessid = (22);
var point = new GLatLng(22.990467,120.204999);
var html = '<div style="width:300px; height:auto;"><img src="mapassets/tn_22.jpg" width=300 height=225><h5>泮宮石坊(府中街)</h5></div>'
map.addOverlay(createMarker(point, 22, businessid, html));

var businessid = (23);
var point = new GLatLng(22.992185,120.206727);
var html = '<div style="width:300px; height:auto;"><img src="mapassets/tn_23.jpg" width=300 height=225><h5>台灣府城隍廟</h5></div>'
map.addOverlay(createMarker(point, 23, businessid, html));

var businessid = (24);
var point = new GLatLng(22.998417,120.162320);
var html = '<div style="width:300px; height:auto;"><img src="mapassets/tn_24.jpg" width=300 height=225><h5>環港步道</h5></div>'
map.addOverlay(createMarker(point, 24, businessid, html));

var businessid = (25);
var point = new GLatLng(22.992531,120.204077);
var html = '<div style="width:450px; height:300px; margin:0px;  background-color:white;  font-size:14px;"><img style="float:left;margin-right:5px" src="mapassets/tn_25.jpg" width=225 height=300><h5>消防隊第二分隊(原台南合同廳舍)</h5></div>'
map.addOverlay(createMarker(point, 25, businessid, html));

var businessid = (26);
var point = new GLatLng(22.987464,120.208454);
var html = '<div style="width:300px; height:auto;"><img src="mapassets/tn_26.jpg" width=300 height=225><h5>延平郡王祠花園</h5></div>'
map.addOverlay(createMarker(point, 26, businessid, html));

var businessid = (27);
var point = new GLatLng(23.001469,120.161033);
var html = '<div style="width:300px; height:auto;"><img src="mapassets/tn_27.jpg" width=300 height=225><h5>安平古堡</h5></div>'
map.addOverlay(createMarker(point, 27, businessid, html));

var businessid = (28);
var point = new GLatLng(22.988106,120.159595);
var html = '<div style="width:300px; height:auto;"><img src="mapassets/tn_28.jpg" width=300 height=225><h5>億載金城</h5></div>'
map.addOverlay(createMarker(point, 28, businessid, html));

var businessid = (29);
var point = new GLatLng(22.998338,120.180688);
var html = '<div style="width:300px; height:auto;"><img src="mapassets/tn_29.jpg" width=300 height=225><h5>從府前路看台南運河</h5></div>'
map.addOverlay(createMarker(point, 29, businessid, html));

var businessid = (30);
var point = new GLatLng(22.997449,120.196974);
var html = '<div style="width:450px; height:300px; margin:0px;  background-color:white;  font-size:14px;"><img style="float:left;margin-right:5px" src="mapassets/tn_30.jpg" width=225 height=300><h5>海安路</h5></div>'
map.addOverlay(createMarker(point, 30, businessid, html));

var businessid = (31);
var point = new GLatLng(23.003632,120.189357);
var html = '<div style="width:300px; height:auto;"><img src="mapassets/tn_31.jpg" width=300 height=225><h5>小北門夜市</h5></div>'
map.addOverlay(createMarker(point, 31, businessid, html));

var businessid = (32);
var point = new GLatLng(22.999385,120.219891);
var html = '<div style="width:450px; height:300px; margin:0px;  background-color:white;  font-size:14px;"><img style="float:left;margin-right:5px" src="mapassets/tn_32.jpg" width=225 height=300><h5>成功大學</h5></div>'
map.addOverlay(createMarker(point, 32, businessid, html));

var businessid = (33);
var point = new GLatLng(22.997113,120.212338);
var html = '<div style="width:300px; height:auto;"><img src="mapassets/tn_33.jpg" width=300 height=225><h5>台南火車站</h5></div>'
map.addOverlay(createMarker(point, 33, businessid, html));


}