PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

ช่วยหน่อยคับ Google Map ไม่ไปพิกัดที่คิวรี่มา ไม่แสดงMarker ครับ

ช่วยหน่อยคับ Google Map ไม่ไปพิกัดที่คิวรี่มา ไม่แสดงMarker ครับ
มี 2 ไฟล์คับ index.php และ genMarker.php


index.php 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- <meta http-equiv="refresh" content="500">  -->
<title>Google Map API 3 - Friend 01</title>
<style type="text/css">
html { height: 100% }
body { 
	height:100%;
	margin:0;padding:0;
	font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
	font-size:12px;
}
/* css กำหนดความกว้าง ความสูงของแผนที่ */
#map_canvas { 
	width:70%;
	height:100%;
	margin:0px;
	margin-top:0px;
}
</style>


</head>

<body>
  <div id="map_canvas"></div>
 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">



var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var infowindow=[]; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่  
var infowindowTmp; // กำหนดตัวแปรสำหรับเก็บลำดับของ infowindow ที่เปิดล่าสุด  
var my_Marker=[]; // กำหนดตัวแปรสำหรับเก็บตัว marker เป็นตัวแปร array  
var markerID=[];  // ประกาศเป็น arrray สำหรับเก็บค่า id
var markerName=[];  // ประกาศเป็น arrray สำหรับเก็บค่า name
var markerLat=[]; // ประกาศเป็น arrray สำหรับเก็บ latitude
var markerLng=[]; // ประกาศเป็น arrray สำหรับเก็บ longitude
var markerDate=[]; // ประกาศเป็น arrray สำหรับเก็บ datetime
var markerIcons=[]; // ประกาศเป็น arrray สำหรับเก็บ icon
var markerLatLng=[]; // ประกาศเป็น arrray สำหรับเก็บ พิกัดในรูปแบบของ google map
var contentData=[]; // ประกาศเป็น arrray สำหรับเก็บ เนื้อหาของแต่ละ icon
var image1=[]; // ประกาศเป็น arrray สำหรับเก็บ icons ในรูปแบบของ google map
var image2='icon/place_call.png';

function initialize() { // ฟังก์ชันแสดงแผนที่

	GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
	// กำหนดจุดเริ่มต้นของแผนที่
	var my_Latlng  = new GGM.LatLng(16.43526194038385,100.34465789794922);
	// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
	var my_DivObj=$("#map_canvas")[0]; 
	// กำหนด Option ของแผนที่
	var myOptions = {
		zoom: 12, // กำหนดขนาดการ zoom
		center: my_Latlng , // กำหนดจุดกึ่งกลาง
		mapTypeId:GGM.MapTypeId.ROADMAP, // กำหนดรูปแบบแผนที่
		mapTypeControlOptions:{ // การจัดรูปแบบส่วนควบคุมประเภทแผนที่
			position:GGM.ControlPosition.TOP, // จัดตำแหน่ง
			style:GGM.MapTypeControlStyle.DROPDOWN_MENU // จัดรูปแบบ style 
		}
	};
	map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map


    // เรียกใช้คุณสมบัติ ระบุตำแหน่ง ของ html 5 ถ้ามี  
    if(navigator.geolocation){  
            navigator.geolocation.getCurrentPosition(function(position){  
				var myPosition_lat=position.coords.latitude; // เก็บค่าตำแหน่ง latitude  ปัจจุบัน
				var myPosition_lon=position.coords.longitude;  // เก็บค่าตำแหน่ง  longitude ปัจจุบัน
				// สรัาง LatLng ตำแหน่ง สำหรับ google map
                var pos = new GGM.LatLng(position.coords.latitude,position.coords.longitude);  	
				map.panTo(pos); // เลื่อนแผนที่ไปตำแหน่งปัจจุบัน
				map.setCenter(pos);  // กำหนดจุดกลางของแผนที่เป็น ตำแหน่งปัจจุบัน								
				$.post("save_location.php",{ // ส่งค่าตำแหน่งปัจจุบัน บันทึกลงฐานข้อ        ห้ามลบออก
					myPosition_lat:myPosition_lat,   // ส่งค่า latitude
					myPosition_lon:myPosition_lon  // ส่งค่า longitude
				},function(){
					map.panTo(pos); // เลื่อนแผนที่ไปตำแหน่งปัจจุบัน
					map.setCenter(pos);  // กำหนดจุดกลางของแผนที่เป็น ตำแหน่งปัจจุบัน									
				});
				var	my_Marker = new GGM.Marker({ // สร้างตัว marker    
                        position:pos,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง    
                        icon: image2,
                        map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map    
                        title:'จุดเกิดเหตุ' // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ    
                    });
				mapCircle = new GGM.Circle({ // สร้างตัว circle  
				      strokeColor: "#CC0000", // สีของเส้นสัมผัส หรือสีขอบโดยรอบ  
				      strokeOpacity: 0.8, // ความโปร่งใส ของสีขอบโดยรอบ กำหนดจาก 0.0  -  0.1  
				      strokeWeight: 1, // ความหนาของสีขอบโดยรอบ เป็นหน่วย pixel  
				      fillColor: "#FF0000", // สีของวงกลม circle  
				      fillOpacity: 0.35, // ความโปร่งใส กำหนดจาก 0.0  -  0.1  
				      map: map, // กำหนดว่า circle นี้ใช้กับแผนที่ชื่อ instance ว่า map  
				      center: pos, // ตำแหน่งศูนย์กลางของวลกลม ในที่นี้ใช้ตำแหน่งเดียวกับ ศูนย์กลางแผนที่  
				      radius: 750 // รัศมีวงกลม circle ทีสร้าง หน่ายเป็น เมตร  
				    }); 
            },function() {  
                // คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน  
            });  
    }else{  
         // คำสั่งทำงาน ถ้า บราวเซอร์ ไม่สนับสนุน ระบุตำแหน่ง  
    }  	


$(function(){  //โค๊ดที่เพิ่มลงไปใหม่ refresh ทุกๆ 3s 
setInterval(function(){ 

    // ใช้ ajax ดึงค่าจาก xml มาใช้งาน
    var xml = $.ajax({  
        url:"genMarker.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml  
        dataType: "xml", 
        async:false,   
        success:function(xml){  
            $(xml).find("marker").each(function(i){ // วนลูปดึงค่าข้อมูลมาสร้าง marker  
                    markerID[i]=$(this).attr("id");// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน      
                    markerName[i]=$(this).find("name").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน      
                    markerLat[i]=$(this).find("latitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน   
                    markerLng[i]=$(this).find("longitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน         
					markerDate[i]=$(this).find("lastdate").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน         
					markerIcons[i]=$(this).find("icon").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน           
                    markerLatLng[i]=new GGM.LatLng(markerLat[i],markerLng[i]);  
					image1[i] = new GGM.MarkerImage(markerIcons[i],  // url ภาพ ใส่แบบเต็ม หรือแบบ path ก็ได้  
						new GGM.Size(50, 60),  //กำหนดความกว้าง สูงของ icons  
						new GGM.Point(0,0),  // จุดเริ่มต้นของรูปภาพ ใช้ 0,0  
						new GGM.Point(25, 60)  // จุดปลายของพิกัดเทียบกับรูป ปกติ (0,ความสูงของรูป) หรือ (ครึ่งหนึ่งความกว้างของรูป,ความสูงของรูป)  
					); 				
								
                    my_Marker[i] = new GGM.Marker({ // สร้างตัว marker  
                        position:markerLatLng[i],  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง  
						icon: image1[i], // เปลี่ยนเป็น icon ตามรูปภาพที่ดึงจาก xml 
                        map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map  
                        title:markerName[i] // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ  
                    });  
					
					// จัดรูปแบบ เนื้อหาใน infowndow
					contentData[i]=markerName[i]+"<br/>"+markerDate[i]+"<br/>"+markerLat[i]+","+markerLng[i];
					infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array  
						content: contentData[i] // แสดงเนื้อหา ของแต่ละ icons
					});  								

					GGM.event.addListener(my_Marker[i], "click", function(){ // เมื่อคลิกตัว marker แต่ละตัว  
						if(infowindowTmp!=null){ // ให้ตรวจสอบว่ามี infowindow ตัวไหนเปิดอยู่หรือไม่  
							infowindow[infowindowTmp].close();  // ถ้ามีให้ปิด infowindow ที่เปิดอยู่  
						}  
						infowindow[i].open(map,my_Marker[i]); // แสดง infowindow ของตัว marker ที่คลิก  
						infowindowTmp=i; // เก็บ infowindow ที่เปิดไว้อ้างอิงใช้งาน  
					});    					
					
                //  console.log($(this).find("id").text());  
            	});  
       		 }     
    	}).responseText;   


 },5000);      
});    

}

$(function(){
	// โหลด สคริป google map api เมื่อเว็บโหลดเรียบร้อยแล้ว
	// ค่าตัวแปร ที่ส่งไปในไฟล์ google map api
	// v=3.2&sensor=false&language=th&callback=initialize
	//	v เวอร์ชัน่ 3.2
	//	sensor กำหนดให้สามารถแสดงตำแหน่งทำเปิดแผนที่อยู่ได้ เหมาะสำหรับมือถือ ปกติใช้ false
	//	language ภาษา th ,en เป็นต้น
	//	callback ให้เรียกใช้ฟังก์ชันแสดง แผนที่ initialize
	$("<script/>", {
	  "type": "text/javascript",
	  src: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
	}).appendTo("body");	
});


</script>  
</body>
</html>


genMarker.php
<?php
header("Content-type:text/xml; charset=UTF-8");              
header("Cache-Control: no-store, no-cache, must-revalidate");             
header("Cache-Control: post-check=0, pre-check=0", false);   
mysql_connect("127.0.0.1","emsmap","emsmap1669") or die("Cannot connect the Server");
mysql_select_db("test") or die("Cannot select database");
mysql_query("set character set utf8");
echo '<?xml version="1.0" encoding="utf-8"?>';
// 6-7 บรรทัดแรกด้านบน เป็นการกำหนด ให้ไฟล์นี้ส่งออกเป็นไฟล์ แบบ xml
// และการกำหนดการเชิ่อมต่อกับฐานข้อมูล
?>
<markers>
<?php


/*$

q_search=""; // กำหนดตัวแปร เพื่อรอรับการ ส่งคำสั่งตามเงื่อนไข การค้นหา
$q_limit=""; // กำหนดตัวแปร เพื่อรอรับการ เลือกจำกัดข้อมูลที่ต้องการแสดง
if(isset($_GET['data_search']) && $_GET['data_search']!=""){ // ถ้า มีการส่งค่า คำค้นหามา และค่านั้นไม่ใช่ค่าว่าง
	// กำหนด รูปแบบคำสั่ง sql ในตัวแปรที่สร้างไว้ตอนต้น
	$q_search=" AND province_name like '%".$_GET['data_search']."%' ";
}else{
	// ถ้าไม่มีการส่งค่า ไม่ให้แสดง ตำแหน่งในแผนที่ ให้กำหนด LIMIT 0
	//  แต่ถ้า ต้องการแสดงเริ่มต้น ให้กำหนดจำนวนตามต้องการ เช่น LIMIT 10	
	$q_limit=" LIMIT 0 ";
}

*/


// ชุดคำสั่ง sql ในการดึงข้อมูล จากฐานข้อมูลมาแสดง
$q = "SELECT car.car_id, CONCAT(unit.unit_name,' ',car.car_name,' (',car.car_license,')') AS name_car , ";
$q .= "CONCAT(unit.unit_name,' ',car.car_name,' (',car.car_license,')') AS detail_car ,  ";
$q .= "log_car.log_latitude, log_car.log_longitude , car.car_icon  , log_car.log_datetime  ";
$q .= "FROM car LEFT OUTER JOIN unit on car.unit_id = unit.unit_id  ";
$q .= "LEFT OUTER JOIN center ON unit.center_id = center.center_id  ";
$q .= "LEFT OUTER JOIN log_car ON car.car_id = log_car.log_car_id  ";


$qr=mysql_query($q);
while($rs=mysql_fetch_array($qr)){
?>
	<marker id="<?=$rs['car.car_id']?>">
        <name><?=$rs['name_car']?></name>
        <latitude><?=$rs['log_car.log_latitude']?></latitude>
        <longitude><?=$rs['log_car.log_longitude']?></longitude>
        <lastdate><?=$rs['log_car.log_datetime']?></lastdate>
        <icon><?=$rs['car.car_icon']?></icon>
    </marker>
<?php } ?>
</markers>


โดย:  Minity IP: 110.78.168.xxx วันที่: 06-11-2014 เวลา: 12:02:17

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 4
ได้แล้วคับ ชอบคุณครับ

โดย:  Minity IP: 119.42.87.xxx วันที่: 08-11-2014 เวลา: 13:03:33
 ความคิดเห็นที่ 3
ได้แล้วครับ ข้อความทุกอย่างขึ้นครับ

แต่ไอคอน marker ไม่ขึ้นครับ

มีวิธีแก้ป่ะครับ



โดย:  Minity IP: 110.78.168.xxx วันที่: 06-11-2014 เวลา: 14:25:02
 ความคิดเห็นที่ 2
ขอบคุณมากครับ

ถ้าเป็นไปได้อยากให้มีทั้ง 2 แบบ ใน map เดียวกันครับ คือ

1. แบบที่ กำหนดตำแหน่ง ตายตัว ไม่มีการเปลี่ยนแปลง

2. แบบที่ เปลี่ยนตำแหน่งตามที่ดึงจากฐานข้อมูลแบบ real time คับ

พอจะมีแนวทางบ้างป่ะคับ...



โดย:  Minity IP: 110.78.168.xxx วันที่: 06-11-2014 เวลา: 14:00:38
 ความคิดเห็นที่ 1
ลองประยุกต์จากตัวนี้แทน 

ใช้ gps ระบุตำแหน่ง และอัพเดท ตำแหน่งอัตโนมัติ ใน google map 
http://www.ninenik.com/content.php?arti_id=563 via @ninenik

อันเดิมจะเป็นการใช้งาน getCurrentPosition  จะดึงข้อมูล และทำงานแค่ครั้งเดียวตอนเรียกหน้านั้น
มาแสดงครั้งแรก   แต่ถ้าใช้งาน watchPosition  จะมีการอัพเดทตำแหน่งปัจจุบัน

 


โดย:  Ninenik IP: 110.168.112.xxx วันที่: 06-11-2014