//<![CDATA[

//_mSvgEnabled = true;//nomore needed
//_mSvgForced  = true;
_mPreferMetric=true;

if (GBrowserIsCompatible()) {
// this variable will collect the html which will eventualkly be placed in the side_bar
var side_bar_html = "";
    
// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
var htmls = [];
var i = 0;

var icon = new GIcon();
//icon.image = "http://www.google.com/mapfiles/turkey.png";
//icon.shadow = "http://www.google.com/mapfiles/turkeyshadow.png";
icon.iconSize = new GSize(59, 62);
icon.shadowSize = new GSize(91, 62);
icon.iconAnchor = new GPoint(37, 59);
icon.infoWindowAnchor = new GPoint(31, 8);
     
// A function to create the marker and set up the event window
function createMarker(point,name,html) {
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});

// save the info we need to use later for the side_bar
gmarkers[i] = marker;
htmls[i] = html;
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>';
i++;
return marker;
}



// create the map
var map = new GMap2(document.getElementById("div_map"));
GEvent.addListener(map, "move", function() {
        var center = map.getCenter();
        var latLngStr = 'Lat' + " " + center.x + '  Lon' + " " + center.y + '<br />';
        document.getElementById("xy").innerHTML = latLngStr;
});
GEvent.addListener(map, 'click', function(overlay, point) {
            if (overlay) {
            map.removeOverlay(overlay);
            } else if (point) {
            map.addOverlay(new GMarker(point));
            }
});
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl(new GSize(200,(screen_height/3))));
map.addControl(new GScaleControl());
map.setCenter(new GLatLng(22.288381658642606,114.17301177978516), 14);

// Read the data from example.xml
var urlstr="code/read.php";
var request = GXmlHttp.create();
request.open('GET', urlstr , true);	// request XML from PHP with AJAX call
request.onreadystatechange = function () {
if (request.readyState == 4) {
var xmlDoc = request.responseXML;
// obtain the array of markers and loop through it
var markers = xmlDoc.documentElement.getElementsByTagName("location");
          
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new GLatLng(lat,lng);									
var html = markers[i].getAttribute("name");
var label = markers[i].getAttribute("label");

// create the marker
var marker = createMarker(point,label,html);
map.addOverlay(marker);
}

// put the assembled side_bar_html contents into the side_bar div
document.getElementById("side_bar").innerHTML = side_bar_html;
}
}
request.send(null);
}

else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}

function gohk() {
lat = parseFloat(document.getElementById("GotoHK").value.split(",")[0]);
lng = parseFloat(document.getElementById("GotoHK").value.split(",")[1]);
scale = parseInt(document.getElementById("GotoHK").value.split(",")[2]);
map.setCenter(new GLatLng(lat,lng),scale);
}
function gokln() {
lat = parseFloat(document.getElementById("GotoKLN").value.split(",")[0]);
lng = parseFloat(document.getElementById("GotoKLN").value.split(",")[1]);
scale = parseInt(document.getElementById("GotoKLN").value.split(",")[2]);
map.setCenter(new GLatLng(lat,lng),scale);
}
function gont() {
lat = parseFloat(document.getElementById("GotoNT").value.split(",")[0]);
lng = parseFloat(document.getElementById("GotoNT").value.split(",")[1]);
scale = parseInt(document.getElementById("GotoNT").value.split(",")[2]);
map.setCenter(new GLatLng(lat,lng),scale);
}

//]]>