//<![CDATA[
$(document).ready(function() {
    var myPosition = new google.maps.LatLng(1.571159, 110.345329);
    
    var myMapOptions = {
        zoom: 16,
        center: myPosition,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    var myMap = new google.maps.Map(
        document.getElementById("map_canvas"),
        myMapOptions
    );
    
    var myInfoWindow = new google.maps.InfoWindow;
    var markerz = [];
    var jqXhr = $.get('map_ajax.php', function(data) {
        var markers = data.documentElement.getElementsByTagName("marker");
        for(var i = 0; i < markers.length; i++) {
			var point = new google.maps.LatLng(
				parseFloat(markers[i].getAttribute("lat")),
				parseFloat(markers[i].getAttribute("lng"))
            );
            var marker = new google.maps.Marker({
                map: myMap,
                position: point
            });
            var html = "<div><b>" + markers[i].getAttribute("label") +
                "</b><br />" + markers[i].getAttribute("lat") +
                ", " + markers[i].getAttribute("lng") + 
                "<br />Reduced level: " + markers[i].getAttribute("level") +
                "</div>";
            bindInfoWindow(marker, myMap, myInfoWindow, html);
            markerz[i] = marker;
        }
    });
    
    $(markerz);
    
    function bindInfoWindow(marker, map, infoWindow, html) {
        google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
        map.panTo(marker.getPosition());
	});
}
});
//]]>