var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้  
var infowindow=[]; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่  
var infowindowTmp; // กำหนดตัวแปรสำหรับเก็บลำดับของ infowindow ที่เปิดล่าสุด  
var my_Marker=[]; // กำหนดตัวแปรสำหรับเก็บตัว marker เป็นตัวแปร array  
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น  
var type;
var province;
var amphur;
var price;
var geocoder;
var mapzoom;
function initialize() { // ฟังก์ชันแสดงแผนที่  
    GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM  
	geocoder = new GGM.Geocoder();
    // กำหนดจุดเริ่มต้นของแผนที่  
	if($("input#maplat").val() && $("input#maplon").val()){
		var maplat = $("input#maplat").val();	
		var maplon = $("input#maplon").val();	
		mapzoom = 14;	
	}else{
		var maplat = 13.758893962231816;	
		var maplon = 100.60832977294913;	
		mapzoom = 11;
	}
    var my_Latlng  = new GGM.LatLng(maplat,maplon);  
    // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas  
    var my_DivObj=$("#map_canvas2")[0];   
    // กำหนด Option ของแผนที่  
    var myOptions = {  
        zoom: mapzoom, // กำหนดขนาดการ zoom  
        center: my_Latlng , // กำหนดจุดกึ่งกลาง  
        mapTypeId:GGM.MapTypeId.ROADMAP, // กำหนดรูปแบบแผนที่  
        mapTypeControlOptions:{ // การจัดรูปแบบส่วนควบคุมประเภทแผนที่  
            position:GGM.ControlPosition.RIGHT, // จัดตำแหน่ง  
            style:GGM.MapTypeControlStyle.DROPDOWN_MENU // จัดรูปแบบ style   
        }  
    };  
    map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map  
    
	var param = "?type="+type+"&province="+province+"&amphur="+amphur+"&price="+price;

    $.ajax({  
        url: root+"lib/googlemap_list.php"+param, // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml   
        dataType: "xml",  
        success:function(xml){  
            $(xml).find('marker').each(function(i){ // วนลูปดึงค่าข้อมูลมาสร้าง marker    
                var markerID=$(this).find("id").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน      
                var markerName=$(this).find("name").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน      
                var markerLat=$(this).find("latitude").text();// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน      
                var markerLng=$(this).find("longitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน                  
                var markerType=$(this).find("marker").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน                  
                var markerLatLng=new GGM.LatLng(markerLat,markerLng);  
                my_Marker[i] = new GGM.Marker({ // สร้างตัว marker เป็นแบบ array  
                    position:markerLatLng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง  
                    map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map  
                    title:markerName, // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ  
					icon:root+'/img/marker/'+markerType
                });  
                //  กรณีตัวอย่าง ดึง title ของตัว marker มาแสดง  
                //infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array  
               //     content: my_Marker[i].getTitle() // ดึง title ในตัว marker มาแสดงใน infowindow  
               // });  
//              //  กรณีนำไปประยุกต์ ดึงข้อมูลจากฐานข้อมูลมาแสดง  
              infowindow[i] = new GGM.InfoWindow({     
                  content:$.ajax({     
                      url:root+'lib/googlemap_detail.php',//ใช้ ajax ใน jQuery ดึงข้อมูล     
                      data:'pid='+markerID,// ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล  
                      async:false     
                  }).responseText     
              });               
                  
				GGM.event.addListener(my_Marker[i], 'click', function(){ // เมื่อคลิกตัว marker แต่ละตัว  
					if(infowindowTmp){ // ให้ตรวจสอบว่ามี infowindow ตัวไหนเปิดอยู่หรือไม่  
						infowindow[infowindowTmp].close();  // ถ้ามีให้ปิด infowindow ที่เปิดอยู่  
					}  
					infowindow[i].open(map,my_Marker[i]); // แสดง infowindow ของตัว marker ที่คลิก  
					infowindowTmp=i; // เก็บ infowindow ที่เปิดไว้อ้างอิงใช้งาน  
				});           
            });  
        }     
    });       
  
}  

$(function(){
	$("<script/>", {
	  "type": "text/javascript",
	  src: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
	}).appendTo("body");	
});